Fixes #202

web/components/top_bar.tsx

@@ -44,6 +44,7 @@ export function TopBar({
       {lhs}
       <div className="main">
         <div className="inner">
+          <div className="wrapper">
             <span
               className={`sb-current-page ${
                 isLoading
@@ -101,6 +102,7 @@ export function TopBar({
             </div>
           </div>
         </div>
+      </div>
       {rhs}
     </div>
   );

web/styles/editor.scss

@@ -7,6 +7,7 @@
     margin-left: auto;
     margin-right: auto;
     max-width: var(--max-width);
+    padding: 5px 20px;
   }
 
   .cm-line {

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;
     }
   }