fix(core): improve editor buttons for smaller screens (#3327)

decaporg · Feb 26, 2020 · 53365b7 · 53365b7
1 parent e7e497a
commit 53365b7
Showing 1 changed file with 20 additions and 3 deletions.
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
@@ -20,6 +20,11 @@ import { status } from 'Constants/publishModes';
 import SettingsDropdown from 'UI/SettingsDropdown';
 
 const styles = {
+  noOverflow: css`
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
   buttonMargin: css`
     margin: 0 10px;
   `,
@@ -35,6 +40,13 @@ const styles = {
   `,
 };
 
+const DropdownButton = styled(StyledDropdownButton)`
+  ${styles.noOverflow}
+  @media (max-width: 1200px) {
+    padding-left: 10px;
+  }
+`;
+
 const ToolbarContainer = styled.div`
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05), 0 1px 3px 0 rgba(68, 74, 87, 0.1),
     0 2px 54px rgba(0, 0, 0, 0.1);
@@ -133,7 +145,12 @@ const ToolbarButton = styled.button`
   ${buttons.button};
   ${buttons.default};
   ${styles.buttonMargin};
+  ${styles.noOverflow};
   display: block;
+
+  @media (max-width: 1200px) {
+    padding: 0 10px;
+  }
 `;
 
 const DeleteButton = styled(ToolbarButton)`
@@ -144,19 +161,19 @@ const SaveButton = styled(ToolbarButton)`
   ${buttons.lightBlue};
 `;
 
-const PublishedToolbarButton = styled(StyledDropdownButton)`
+const PublishedToolbarButton = styled(DropdownButton)`
   ${styles.publishedButton}
 `;
 
 const PublishedButton = styled(ToolbarButton)`
   ${styles.publishedButton}
 `;
 
-const PublishButton = styled(StyledDropdownButton)`
+const PublishButton = styled(DropdownButton)`
   background-color: ${colorsRaw.teal};
 `;
 
-const StatusButton = styled(StyledDropdownButton)`
+const StatusButton = styled(DropdownButton)`
   background-color: ${colorsRaw.tealLight};
   color: ${colorsRaw.teal};
 `;