From a98299e8b3dcbff4c0bf13789d52df5ec331fc9c Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Tue, 27 Feb 2024 19:32:40 +0100
Subject: [PATCH] Revert "Change top bar to flexbox (#753)" (#760)

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

diff --git a/web/components/top_bar.tsx b/web/components/top_bar.tsx
index bc1ab376..5f1f6759 100644
--- a/web/components/top_bar.tsx
+++ b/web/components/top_bar.tsx
@@ -46,6 +46,38 @@ 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
@@ -62,8 +94,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 26c2709f..f267cb0a 100644
--- a/web/styles/main.scss
+++ b/web/styles/main.scss
@@ -65,13 +65,14 @@ body {
       max-width: var(--#{"editor-width"});
       margin: auto;
       font-size: 28px;
-      padding: 10px 20px;
+      padding: 10px 0;
       display: flex;
       flex-direction: row;
 
       .wrapper {
         width: 100%;
-        display: flex;
+        padding: 0 20px;
+        position: relative;
       }
 
       .sb-notifications {
@@ -111,10 +112,10 @@ body {
   }
 
   .sb-actions {
-    display: flex;
-    align-items: baseline;
-    flex: 0 0 auto;
     text-align: right;
+    position: absolute;
+    right: 15px;
+    top: 0;
   }
 
   .progress-wrapper {