From 41d90a5102585964e2c618bc0b64abab046bb9f9 Mon Sep 17 00:00:00 2001
From: hatsu38 <hajiwata0308@gmail.com>
Date: Sun, 6 Feb 2022 15:23:46 +0900
Subject: [PATCH 1/5] style(Page.js): Add max-width to .page class

---
 components/Page.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/Page.js b/components/Page.js
index 1596f4a15..d16525762 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;
+              }
             }
           `}
         </style>

From a494bdb8e7267d21fc1e1c9f78f1e1430d40e7b9 Mon Sep 17 00:00:00 2001
From: hatsu38 <hajiwata0308@gmail.com>
Date: Sun, 6 Feb 2022 16:40:07 +0900
Subject: [PATCH 2/5] style(Editor.js): Make buttons vertically aligned when on
 mobile

---
 components/Editor.js | 51 +++++++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/components/Editor.js b/components/Editor.js
index 507e23957..0e8d23856 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -345,25 +345,27 @@ class Editor extends React.Component {
             onChange={this.updateLanguage}
           />
           <div className="toolbar-second-row">
-            <BackgroundSelect
-              onChange={this.updateBackground}
-              updateHighlights={this.updateHighlights}
-              mode={backgroundMode}
-              color={backgroundColor}
-              image={backgroundImage}
-              carbonRef={this.carbonNode.current}
-            />
-            <Settings
-              {...config}
-              onChange={this.updateSetting}
-              resetDefaultSettings={this.resetDefaultSettings}
-              format={this.format}
-              applyPreset={this.applyPreset}
-              getCarbonImage={this.getCarbonImage}
-            />
+            <div className="setting-buttons">
+              <BackgroundSelect
+                onChange={this.updateBackground}
+                updateHighlights={this.updateHighlights}
+                mode={backgroundMode}
+                color={backgroundColor}
+                image={backgroundImage}
+                carbonRef={this.carbonNode.current}
+              />
+              <Settings
+                {...config}
+                onChange={this.updateSetting}
+                resetDefaultSettings={this.resetDefaultSettings}
+                format={this.format}
+                applyPreset={this.applyPreset}
+                getCarbonImage={this.getCarbonImage}
+              />
+              <CopyMenu copyImage={this.copyImage} carbonRef={this.carbonNode.current} />
+            </div>
             <div id="style-editor-button" />
             <div className="buttons">
-              <CopyMenu copyImage={this.copyImage} carbonRef={this.carbonNode.current} />
               <ShareMenu tweet={this.tweet} imgur={this.imgur} />
               <ExportMenu
                 onChange={this.updateSetting}
@@ -414,16 +416,17 @@ class Editor extends React.Component {
               padding: 16px;
             }
 
-            .buttons {
+            .buttons,
+            .setting-buttons {
               display: flex;
               margin-left: auto;
+              height: 40px;
             }
             .toolbar-second-row {
-              height: 40px;
               display: flex;
               flex: 1 1 auto;
             }
-            .toolbar-second-row > :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;
+              }
+            }
           `}
         </style>
       </div>

From e88cded921c5f54dbc60c458d1e0ec88f98a59c5 Mon Sep 17 00:00:00 2001
From: hatsu38 <hajiwata0308@gmail.com>
Date: Sun, 6 Feb 2022 16:43:18 +0900
Subject: [PATCH 3/5] style: Fix Button width for mobile

---
 components/CopyMenu.js   | 1 +
 components/ExportMenu.js | 6 +++++-
 components/ShareMenu.js  | 6 +++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/CopyMenu.js b/components/CopyMenu.js
index 1d1c721ba..0eedd1073 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/ExportMenu.js b/components/ExportMenu.js
index 1fd55f64f..6780e1a06 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"
         >
           <ArrowDown color={COLORS.PURPLE} />
diff --git a/components/ShareMenu.js b/components/ShareMenu.js
index bea5872a7..c6d2061a7 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"
         >
           <ArrowDown color={COLORS.BLUE} />

From aa4f38c80f8ba3391c5e2a21f05ba76fedaf7a4f Mon Sep 17 00:00:00 2001
From: hatsu38 <hajiwata0308@gmail.com>
Date: Sun, 6 Feb 2022 16:44:10 +0900
Subject: [PATCH 4/5] style(Popout.js): Add z-index

---
 components/Popout.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Popout.js b/components/Popout.js
index 9d94d5c0c..f786a2a8a 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;
             }
           `}
         </style>

From 459919e7ac88c3b4dfe2c823f6bfa8a5c4b94f57 Mon Sep 17 00:00:00 2001
From: hatsu38 <hajiwata0308@gmail.com>
Date: Sun, 6 Feb 2022 17:04:55 +0900
Subject: [PATCH 5/5] refactor(Editor.js): .buttons->.share-buttons

---
 components/Editor.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Editor.js b/components/Editor.js
index 0e8d23856..bbff9e665 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -365,7 +365,7 @@ class Editor extends React.Component {
               <CopyMenu copyImage={this.copyImage} carbonRef={this.carbonNode.current} />
             </div>
             <div id="style-editor-button" />
-            <div className="buttons">
+            <div className="share-buttons">
               <ShareMenu tweet={this.tweet} imgur={this.imgur} />
               <ExportMenu
                 onChange={this.updateSetting}
@@ -416,7 +416,7 @@ class Editor extends React.Component {
               padding: 16px;
             }
 
-            .buttons,
+            .share-buttons,
             .setting-buttons {
               display: flex;
               margin-left: auto;