From be83f305dd35ed354ac43402dd13a1039dbb5a34 Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Fri, 16 Dec 2022 11:39:46 +0100
Subject: [PATCH] Fixes #202

---
 web/components/top_bar.tsx | 104 +++++++++++++++++++------------------
 web/styles/editor.scss     |   1 +
 web/styles/main.scss       |  15 ++++--
 3 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/web/components/top_bar.tsx b/web/components/top_bar.tsx
index d4c0cf2..ef8a07a 100644
--- a/web/components/top_bar.tsx
+++ b/web/components/top_bar.tsx
@@ -44,60 +44,62 @@ export function TopBar({
       {lhs}
       <div className="main">
         <div className="inner">
-          <span
-            className={`sb-current-page ${
-              isLoading
-                ? "sb-loading"
-                : unsavedChanges
-                ? "sb-unsaved"
-                : "sb-saved"
-            }`}
-          >
-            <input
-              type="text"
-              ref={inputRef}
-              value={pageName}
-              className="sb-edit-page-name"
-              onBlur={(e) => {
-                (e.target as any).value = pageName;
-              }}
-              onKeyDown={(e) => {
-                e.stopPropagation();
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  const newName = (e.target as any).value;
-                  onRename(newName);
-                }
-                if (e.key === "Escape") {
-                  onRename();
-                }
-              }}
-            />
-          </span>
-          {notifications.length > 0 && (
-            <div className="sb-notifications">
-              {notifications.map((notification) => (
-                <div
-                  key={notification.id}
-                  className={`sb-notification-${notification.type}`}
+          <div className="wrapper">
+            <span
+              className={`sb-current-page ${
+                isLoading
+                  ? "sb-loading"
+                  : unsavedChanges
+                  ? "sb-unsaved"
+                  : "sb-saved"
+              }`}
+            >
+              <input
+                type="text"
+                ref={inputRef}
+                value={pageName}
+                className="sb-edit-page-name"
+                onBlur={(e) => {
+                  (e.target as any).value = pageName;
+                }}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    const newName = (e.target as any).value;
+                    onRename(newName);
+                  }
+                  if (e.key === "Escape") {
+                    onRename();
+                  }
+                }}
+              />
+            </span>
+            {notifications.length > 0 && (
+              <div className="sb-notifications">
+                {notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className={`sb-notification-${notification.type}`}
+                  >
+                    {notification.message}
+                  </div>
+                ))}
+              </div>
+            )}
+            <div className="sb-actions">
+              {actionButtons.map((actionButton) => (
+                <button
+                  onClick={(e) => {
+                    actionButton.callback();
+                    e.stopPropagation();
+                  }}
+                  title={actionButton.description}
                 >
-                  {notification.message}
-                </div>
+                  <actionButton.icon size={18} />
+                </button>
               ))}
             </div>
-          )}
-          <div className="sb-actions">
-            {actionButtons.map((actionButton) => (
-              <button
-                onClick={(e) => {
-                  actionButton.callback();
-                  e.stopPropagation();
-                }}
-                title={actionButton.description}
-              >
-                <actionButton.icon size={18} />
-              </button>
-            ))}
           </div>
         </div>
       </div>
diff --git a/web/styles/editor.scss b/web/styles/editor.scss
index 408a915..15c07a4 100644
--- a/web/styles/editor.scss
+++ b/web/styles/editor.scss
@@ -7,6 +7,7 @@
     margin-left: auto;
     margin-right: auto;
     max-width: var(--max-width);
+    padding: 5px 20px;
   }
 
   .cm-line {
diff --git a/web/styles/main.scss b/web/styles/main.scss
index 2984979..7d5322a 100644
--- a/web/styles/main.scss
+++ b/web/styles/main.scss
@@ -52,10 +52,16 @@
       max-width: 800px;
       margin: auto;
       font-size: 28px;
-      padding: 10px 20px;
+      padding: 10px 0;
       display: flex;
       flex-direction: row;
 
+      .wrapper {
+        width: 100%;
+        padding: 0 20px;
+        position: relative;
+      }
+
       .sb-notifications {
         position: absolute;
         bottom: 0;
@@ -64,7 +70,7 @@
         font-size: 15px;
         z-index: 100;
 
-        > div {
+        >div {
           padding: 3px;
           margin-bottom: 3px;
           border-radius: 5px;
@@ -94,6 +100,9 @@
 
     .sb-actions {
       text-align: right;
+      position: absolute;
+      right: 0;
+      top: 0;
     }
   }
 
@@ -159,4 +168,4 @@
       margin: 0;
     }
   }
-}
+}
\ No newline at end of file