From e3a2dbdd11a717752395462a94fd0f0f37021017 Mon Sep 17 00:00:00 2001
From: onespaceman <onespaceman@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:10:31 -0500
Subject: [PATCH] Change top bar to flexbox (#753)

---
 web/components/top_bar.tsx | 36 ++----------------------------------
 web/styles/main.scss       | 11 +++++------
 2 files changed, 7 insertions(+), 40 deletions(-)

diff --git a/web/components/top_bar.tsx b/web/components/top_bar.tsx
index 5f1f6759..bc1ab376 100644
--- a/web/components/top_bar.tsx
+++ b/web/components/top_bar.tsx
@@ -46,38 +46,6 @@ export function TopBar({
   lhs?: ComponentChildren;
   rhs?: ComponentChildren;
 }) {
-  // Another one of my less proud moments:
-  // Somehow I cannot seem to proerply limit the width of the page name, so I'm doing
-  // it this way. If you have a better way to do this, please let me know!
-  useEffect(() => {
-    function resizeHandler() {
-      const editorWidth = parseInt(
-        getComputedStyle(document.getElementById("sb-root")!).getPropertyValue(
-          "--editor-width",
-        ),
-      );
-      const currentPageElement = document.getElementById("sb-current-page");
-      const actionsElement = document.querySelector(".sb-actions");
-      if (currentPageElement && actionsElement) {
-        // Temporarily make it very narrow to give the parent space
-        currentPageElement.style.width = "10px";
-        const innerDiv = currentPageElement.parentElement!.parentElement!;
-
-        // Then calculate a new width
-        const actionsWidth = actionsElement.clientWidth;
-        // console.log("Editor width", editorWidth);
-        currentPageElement.style.width = `${
-          innerDiv.clientWidth - actionsWidth - 40
-        }px`;
-      }
-    }
-    globalThis.addEventListener("resize", resizeHandler);
-
-    // Stop listening on unmount
-    return () => {
-      globalThis.removeEventListener("resize", resizeHandler);
-    };
-  }, []);
 
   return (
     <div
@@ -94,8 +62,8 @@ export function TopBar({
               className={isLoading
                 ? "sb-loading"
                 : unsavedChanges
-                ? "sb-unsaved"
-                : "sb-saved"}
+                  ? "sb-unsaved"
+                  : "sb-saved"}
             >
               <MiniEditor
                 text={pageName ?? ""}
diff --git a/web/styles/main.scss b/web/styles/main.scss
index f267cb0a..26c2709f 100644
--- a/web/styles/main.scss
+++ b/web/styles/main.scss
@@ -65,14 +65,13 @@ body {
       max-width: var(--#{"editor-width"});
       margin: auto;
       font-size: 28px;
-      padding: 10px 0;
+      padding: 10px 20px;
       display: flex;
       flex-direction: row;
 
       .wrapper {
         width: 100%;
-        padding: 0 20px;
-        position: relative;
+        display: flex;
       }
 
       .sb-notifications {
@@ -112,10 +111,10 @@ body {
   }
 
   .sb-actions {
+    display: flex;
+    align-items: baseline;
+    flex: 0 0 auto;
     text-align: right;
-    position: absolute;
-    right: 15px;
-    top: 0;
   }
 
   .progress-wrapper {