make tab-bar-right container for banners, clean up styling

frontend/app/element/iconbutton.scss

@@ -1,4 +1,5 @@
 .iconbutton {
+    display: flex;
     cursor: pointer;
     opacity: 0.7;
     align-items: center;

frontend/app/tab/tabbar.scss

@@ -78,39 +78,24 @@
         color: var(--accent-color);
     }
 
+    .tab-bar-right {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+        &:not(:empty) {
+            margin-left: auto;
+            margin-right: 6px;
+        }
+    }
+
     .config-error-button {
-        margin-left: auto;
-        height: 80%;
-        margin: auto 4px;
         color: black;
+        padding: 0 6px;
         flex: 0 0 fit-content;
     }
 
-    .update-available-banner {
-        margin-left: auto;
-    }
-
-    .add-tab-btn {
-        height: 100%;
-        cursor: pointer;
-        font-size: 14px;
-        text-align: center;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0.5;
+    .add-tab {
         padding: 0 10px;
-
-        &:hover {
-            opacity: 1;
-        }
-
-        i {
-            overflow: hidden;
-            margin-top: 5px;
-            font-size: 11px;
-        }
     }
 
     .window-drag {

frontend/app/tab/tabbar.tsx

@@ -167,7 +167,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const appMenuButtonRef = useRef<HTMLDivElement>(null);
     const tabWidthRef = useRef<number>(TAB_DEFAULT_WIDTH);
     const scrollableRef = useRef<boolean>(false);
-    const updateStatusBannerRef = useRef<HTMLDivElement>(null);
+    const updateStatusBannerRef = useRef<HTMLButtonElement>(null);
     const configErrorButtonRef = useRef<HTMLElement>(null);
     const prevAllLoadedRef = useRef<boolean>(false);
     const activeTabId = useAtomValue(atoms.staticTabId);
@@ -685,9 +685,11 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                     })}
                 </div>
             </div>
-            <IconButton decl={addtabButtonDecl} ref={addBtnRef} />
-            <UpdateStatusBanner ref={updateStatusBannerRef} />
-            <ConfigErrorIcon buttonRef={configErrorButtonRef} />
+            <IconButton className="add-tab" ref={addBtnRef} decl={addtabButtonDecl} />
+            <div className="tab-bar-right">
+                <UpdateStatusBanner ref={updateStatusBannerRef} />
+                <ConfigErrorIcon buttonRef={configErrorButtonRef} />
+            </div>
         </div>
     );
 });

frontend/app/tab/updatebanner.scss

@@ -1,15 +1,10 @@
-.update-available-banner {
-    display: flex;
-    height: 100%;
-    .button {
-        color: black;
-        height: 80%;
-        margin: auto 4px;
-        background-color: var(--accent-color);
-        flex: 0 0 fit-content;
-
-        &:disabled {
-            opacity: unset !important;
-        }
+.button {
+    color: black;
+    background-color: var(--accent-color);
+    flex: 0 0 fit-content;
+    line-height: unset !important;
+    padding: 0 6px;
+    &:disabled {
+        opacity: unset !important;
     }
 }

frontend/app/tab/updatebanner.tsx

@@ -4,7 +4,7 @@ import { useAtomValue } from "jotai";
 import { forwardRef, memo, useEffect, useState } from "react";
 import "./updatebanner.scss";
 
-const UpdateStatusBannerComponent = forwardRef<HTMLDivElement>((_, ref) => {
+const UpdateStatusBannerComponent = forwardRef<HTMLButtonElement>((_, ref) => {
     const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
     let [updateStatusMessage, setUpdateStatusMessage] = useState<string>();
     const [dismissBannerTimeout, setDismissBannerTimeout] = useState<NodeJS.Timeout>();
@@ -29,6 +29,7 @@ const UpdateStatusBannerComponent = forwardRef<HTMLDivElement>((_, ref) => {
             default:
                 break;
         }
+        // message = "Update Available";
         setUpdateStatusMessage(message);
 
         // Clear any existing timeout
@@ -54,16 +55,15 @@ const UpdateStatusBannerComponent = forwardRef<HTMLDivElement>((_, ref) => {
     }
     if (updateStatusMessage) {
         return (
-            <div className="update-available-banner" ref={ref}>
-                <Button
-                    className="update-available-button"
-                    title={appUpdateStatus === "ready" ? "Click to Install Update" : updateStatusMessage}
-                    onClick={onClick}
-                    disabled={appUpdateStatus !== "ready"}
-                >
-                    {updateStatusMessage}
-                </Button>
-            </div>
+            <Button
+                className="update-available-banner"
+                title={appUpdateStatus === "ready" ? "Click to Install Update" : updateStatusMessage}
+                onClick={onClick}
+                disabled={appUpdateStatus !== "ready"}
+                ref={ref}
+            >
+                {updateStatusMessage}
+            </Button>
         );
     }
 });