Revert "Change top bar to flexbox (#753)" (#760)

This reverts commit e3a2dbdd11.

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-unsaved"
-                  : "sb-saved"}
+                : "sb-saved"}
             >
               <MiniEditor
                 text={pageName ?? ""}

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 {