From 5c50eb1f8bbb5eb9e9ef9e529f82d1b953fd7e84 Mon Sep 17 00:00:00 2001
From: KernelDeimos <eric.alex.dube@gmail.com>
Date: Fri, 14 Mar 2025 03:09:08 -0400
Subject: [PATCH] fix(gui): logo placement with no clock using margin

Flex isn't being used in the top bar correctly, which is causing
unpredictable issues when people implement new elements on the top bar.
The best solution for this is to use proper flex values but right now
it's important to get the layout back to normal for production so I'm
implementing this sub-par fix where we always include a spacer element.
---
 src/gui/src/UI/UIDesktop.js | 3 +++
 src/gui/src/css/style.css   | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js
index 42b525e78..5dd10693b 100644
--- a/src/gui/src/UI/UIDesktop.js
+++ b/src/gui/src/UI/UIDesktop.js
@@ -1108,6 +1108,9 @@ async function UIDesktop(options){
     
         //clock 
     ht += `<div id="clock" class="toolbar-clock" style="margin-left: 10px; margin-right: auto">12:00 AM Sun, Jan 01</div>`;
+
+    // clock spacer
+    ht += `<div class="toolbar-spacer"></div>`;
     
         // create account button
         ht += `<div class="toolbar-btn user-options-create-account-btn ${window.user.is_temp ? '' : 'hidden' }" style="padding:0; opacity:1;" title="Save Account">`;
diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index f9731db03..7bab0f90d 100644
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -2413,6 +2413,10 @@ label {
     opacity: 0.8;
 }
 
+.toolbar-spacer {
+    margin-right: auto;
+}
+
 .device-phone #clock {
     display: none !important;
 }