Change top bar to flexbox (#753)

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

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;
+        display: flex;
-        position: relative;
       }
 
       .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 {