diff --git a/components/CopyMenu.js b/components/CopyMenu.js index 1d1c721..0eedd10 100644 --- a/components/CopyMenu.js +++ b/components/CopyMenu.js @@ -118,6 +118,7 @@ function CopyMenu({ isVisible, toggleVisibility, copyImage, carbonRef }) { position: relative; color: ${COLORS.SECONDARY}; flex: 1; + max-width: 40px; } .copy-row { diff --git a/components/Editor.js b/components/Editor.js index 507e239..bbff9e6 100644 --- a/components/Editor.js +++ b/components/Editor.js @@ -345,25 +345,27 @@ class Editor extends React.Component { onChange={this.updateLanguage} />
- - -
-
+
+ + +
+
+
:global(div:not(:last-of-type)) { + .setting-buttons > :global(div) { margin-right: 0.5rem; } @@ -431,6 +434,14 @@ class Editor extends React.Component { display: flex; align-items: center; } + @media (max-width: 768px) { + .toolbar-second-row { + display: block; + } + #style-editor-button { + margin-top: 0.5rem; + } + } `}
diff --git a/components/ExportMenu.js b/components/ExportMenu.js index 1fd55f6..6780e1a 100644 --- a/components/ExportMenu.js +++ b/components/ExportMenu.js @@ -55,7 +55,11 @@ function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportI onClick={toggleVisibility} data-cy="export-button" margin="0 0 0 -1px" - style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }} + style={{ + borderBottomLeftRadius: 0, + borderTopLeftRadius: 0, + maxWidth: '26px', + }} title="Export menu dropdown" > diff --git a/components/Page.js b/components/Page.js index 1596f4a..d165257 100644 --- a/components/Page.js +++ b/components/Page.js @@ -40,10 +40,17 @@ class Page extends React.Component { top: 1.4rem; right: 1rem; } + .page { + max-width: 100%; + padding: 0 1rem; + } @media (min-width: 1024px) { .main { ${COLUMN}; } + .page { + padding: 0; + } } `} diff --git a/components/Popout.js b/components/Popout.js index 9d94d5c..f786a2a 100644 --- a/components/Popout.js +++ b/components/Popout.js @@ -69,6 +69,7 @@ class Popout extends React.PureComponent { border-radius: 3px; margin-top: 10px; font-size: 12px; + z-index: 1; } `} diff --git a/components/ShareMenu.js b/components/ShareMenu.js index bea5872..c6d2061 100644 --- a/components/ShareMenu.js +++ b/components/ShareMenu.js @@ -49,7 +49,11 @@ function ShareMenu({ isVisible, toggleVisibility, tweet, imgur }) { margin="0 8px 0 -1px" onClick={toggleVisibility} data-cy="share-button" - style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }} + style={{ + borderBottomLeftRadius: 0, + borderTopLeftRadius: 0, + maxWidth: '26px', + }} title="Share menu dropdown" >