From d12eebe8837c3f130fa16f770fd4485bc9a51ca5 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 18 Feb 2022 11:46:54 -0600
Subject: [PATCH] fix: prevent save status overflow from changing width of
 editor pane

---
 .../components/NoteView/NoteView.tsx          | 30 ++++++++++---------
 app/assets/stylesheets/_editor.scss           | 11 +++++--
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/components/NoteView/NoteView.tsx
index dbdaa53ca..2edd3bfa0 100644
--- 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
index 5c209bd15..61629478a 100644
--- 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;
     }
   }