fix editor padding with wide screen and gofast (#2333)

Automattic · Sep 14, 2020 · b544848 · b544848
1 parent 686eb32
commit b544848
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/lib/note-content-editor.tsx b/lib/note-content-editor.tsx
@@ -37,7 +37,10 @@ const getEditorPadding = (lineLength: T.LineLength, width?: number) => {
     return 25;
   }
 
-  if (width <= 1400) {
+  // magic number alert: 328px is the width of the sidebar :/
+  // this logic matches "@media only screen and (max-width: 1400px)" in the CSS
+  // 1400 is the viewport width; width is the width of the container element
+  if (width <= 1400 - 328) {
     // should be 10% up to 1400px wide
     return width * 0.1;
   } else {

diff --git a/scss/theme.scss b/scss/theme.scss
@@ -27,12 +27,14 @@
   unicode-range: U+E000-E001;
 }
 
-.note-detail-preview {
+.note-detail-preview,
+.note-content-plaintext.visible {
   padding: 0 calc((100% - 768px) / 2);
 }
 
 @media only screen and (max-width: 1400px) {
-  .note-detail-preview {
+  .note-detail-preview,
+  .note-content-plaintext.visible {
     padding: 0 10%;
   }
 }
@@ -54,7 +56,8 @@
 }
 
 .is-line-length-full {
-  .note-detail-preview {
+  .note-detail-preview,
+  .note-content-plaintext.visible {
     padding: 0 25px;
   }
 }
@@ -163,13 +166,8 @@ span[dir='ltr'] {
   font-size: 16px;
   white-space: pre-wrap;
 
-  &::first-line {
-    font-size: 18px;
-  }
-
   &.visible {
     display: inherit;
-    padding: 0 10px;
   }
 }