fix: prevent save status overflow from changing width of editor pane

standardnotes · Feb 18, 2022 · d12eebe · d12eebe
1 parent e9f2dc6
commit d12eebe
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/components/NoteView/NoteView.tsx
@@ -1055,21 +1055,23 @@ export class NoteView extends PureComponent<Props, State> {
                   </div>
                 </div>
                 <div className="flex items-center">
-                  <div id="save-status">
-                    <div
-                      className={
-                        (this.state.syncTakingTooLong
-                          ? 'warning sk-bold '
-                          : '') +
-                        (this.state.saveError ? 'danger sk-bold ' : '') +
-                        ' message'
-                      }
-                    >
-                      {this.state.noteStatus?.message}
+                  <div id="save-status-container">
+                    <div id="save-status">
+                      <div
+                        className={
+                          (this.state.syncTakingTooLong
+                            ? 'warning sk-bold '
+                            : '') +
+                          (this.state.saveError ? 'danger sk-bold ' : '') +
+                          ' message'
+                        }
+                      >
+                        {this.state.noteStatus?.message}
+                      </div>
+                      {this.state.noteStatus?.desc && (
+                        <div className="desc">{this.state.noteStatus.desc}</div>
+                      )}
                     </div>
-                    {this.state.noteStatus?.desc && (
-                      <div className="desc">{this.state.noteStatus.desc}</div>
-                    )}
                   </div>
                   <div className="mr-3">
                     <ChangeEditorButton

diff --git a/app/assets/stylesheets/_editor.scss b/app/assets/stylesheets/_editor.scss
@@ -64,17 +64,22 @@ $heading-height: 75px;
     }
   }
 
-  #save-status {
+  #save-status-container {
+    position: relative;
+    min-width: 15ch;
+    max-width: 15ch;
+    overflow: visible;
     margin-right: 20px;
+  }
+
+  #save-status {
     font-size: calc(var(--sn-stylekit-base-font-size) - 2px);
     text-transform: none;
     font-weight: normal;
     text-align: right;
-    white-space: nowrap;
 
     .desc,
     .message:not(.warning):not(.danger) {
-      // color: var(--sn-stylekit-editor-foreground-color);
       opacity: 0.35;
     }
   }