diff --git a/dev-test/index.html b/dev-test/index.html
index 8147bcc0118d..0dd2b5075037 100644
--- a/dev-test/index.html
+++ b/dev-test/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8" />
-
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Decap CMS Development Test</title>
   <script>
   window.repoFiles = {
diff --git a/packages/decap-cms-backend-git-gateway/src/AuthenticationPage.js b/packages/decap-cms-backend-git-gateway/src/AuthenticationPage.js
index b2bea0e33dac..78541a4f1739 100644
--- a/packages/decap-cms-backend-git-gateway/src/AuthenticationPage.js
+++ b/packages/decap-cms-backend-git-gateway/src/AuthenticationPage.js
@@ -18,7 +18,7 @@ const LoginButton = styled.button`
   ${buttons.default};
   ${buttons.gray};
 
-  padding: 0 30px;
+  padding: clamp(4px, 1.2vw, 12px) clamp(12px, 3.2vw, 32px);
   display: block;
   margin-top: 20px;
   margin-left: auto;
diff --git a/packages/decap-cms-backend-git-gateway/src/__tests__/__snapshots__/AuthenticationPage.spec.js.snap b/packages/decap-cms-backend-git-gateway/src/__tests__/__snapshots__/AuthenticationPage.spec.js.snap
index d5b474d66b8c..86852c7e10da 100644
--- a/packages/decap-cms-backend-git-gateway/src/__tests__/__snapshots__/AuthenticationPage.spec.js.snap
+++ b/packages/decap-cms-backend-git-gateway/src/__tests__/__snapshots__/AuthenticationPage.spec.js.snap
@@ -36,7 +36,7 @@ exports[`GitGatewayAuthenticationPage should render with identity error 1`] = `
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   background-color: #313d3e;
@@ -54,6 +54,12 @@ exports[`GitGatewayAuthenticationPage should render with identity error 1`] = `
   position: relative;
 }
 
+@media (min-width: 800px) {
+  .emotion-4 {
+    padding: 0 35px;
+  }
+}
+
 .emotion-4:focus,
 .emotion-4:hover {
   color: #fff;
@@ -174,7 +180,7 @@ exports[`GitGatewayAuthenticationPage should render with no identity error 1`] =
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   background-color: #313d3e;
@@ -192,6 +198,12 @@ exports[`GitGatewayAuthenticationPage should render with no identity error 1`] =
   position: relative;
 }
 
+@media (min-width: 800px) {
+  .emotion-4 {
+    padding: 0 35px;
+  }
+}
+
 .emotion-4:focus,
 .emotion-4:hover {
   color: #fff;
diff --git a/packages/decap-cms-backend-proxy/src/AuthenticationPage.js b/packages/decap-cms-backend-proxy/src/AuthenticationPage.js
index 4d01a4f894fc..3ef555120031 100644
--- a/packages/decap-cms-backend-proxy/src/AuthenticationPage.js
+++ b/packages/decap-cms-backend-proxy/src/AuthenticationPage.js
@@ -17,7 +17,7 @@ const LoginButton = styled.button`
   ${buttons.default};
   ${buttons.gray};
 
-  padding: 0 30px;
+  padding: clamp(4px, 1.2vw, 12px) clamp(12px, 3.2vw, 32px);
   margin-top: 0;
   display: flex;
   align-items: center;
diff --git a/packages/decap-cms-backend-test/src/AuthenticationPage.js b/packages/decap-cms-backend-test/src/AuthenticationPage.js
index 722ae9a119cd..1976db410496 100644
--- a/packages/decap-cms-backend-test/src/AuthenticationPage.js
+++ b/packages/decap-cms-backend-test/src/AuthenticationPage.js
@@ -22,7 +22,7 @@ const LoginButton = styled.button`
   ${buttons.default};
   ${buttons.gray};
 
-  padding: 0 30px;
+  padding: clamp(4px, 1.2vw, 12px) clamp(12px, 3.2vw, 32px);
   margin-top: 0;
   display: flex;
   align-items: center;
diff --git a/packages/decap-cms-core/src/components/App/App.js b/packages/decap-cms-core/src/components/App/App.js
index 75859c1e9f2e..6179031ece72 100644
--- a/packages/decap-cms-core/src/components/App/App.js
+++ b/packages/decap-cms-core/src/components/App/App.js
@@ -32,7 +32,6 @@ TopBarProgress.config({
 });
 
 const AppMainContainer = styled.div`
-  min-width: 800px;
   max-width: 1440px;
   margin: 0 auto;
 `;
@@ -151,6 +150,7 @@ class App extends React.Component {
       openMediaLibrary,
       t,
       showMediaButton,
+      location,
     } = this.props;
 
     if (config === null) {
@@ -172,20 +172,25 @@ class App extends React.Component {
     const defaultPath = getDefaultPath(collections);
     const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
 
+    const isEditorRoute =
+      location.pathname.includes('/new') || location.pathname.includes('/entries');
+
     return (
       <>
         <Notifications />
-        <Header
-          user={user}
-          collections={collections}
-          onCreateEntryClick={createNewEntry}
-          onLogoutClick={logoutUser}
-          openMediaLibrary={openMediaLibrary}
-          hasWorkflow={hasWorkflow}
-          displayUrl={config.display_url}
-          isTestRepo={config.backend.name === 'test-repo'}
-          showMediaButton={showMediaButton}
-        />
+        {!isEditorRoute && (
+          <Header
+            user={user}
+            collections={collections}
+            onCreateEntryClick={createNewEntry}
+            onLogoutClick={logoutUser}
+            openMediaLibrary={openMediaLibrary}
+            hasWorkflow={hasWorkflow}
+            displayUrl={config.display_url}
+            isTestRepo={config.backend.name === 'test-repo'}
+            showMediaButton={showMediaButton}
+          />
+        )}
         <AppMainContainer>
           {isFetching && <TopBarProgress />}
           <Switch>
diff --git a/packages/decap-cms-core/src/components/App/Header.js b/packages/decap-cms-core/src/components/App/Header.js
index 7c308262fb9c..921cb881d02f 100644
--- a/packages/decap-cms-core/src/components/App/Header.js
+++ b/packages/decap-cms-core/src/components/App/Header.js
@@ -37,7 +37,10 @@ function AppHeader(props) {
         top: 0;
         background-color: ${colors.foreground};
         z-index: ${zIndex.zIndex300};
-        height: ${lengths.topBarHeight};
+        height: ${lengths.topBarHeightMobile};
+        @media (min-width: 800px) {
+          height: ${lengths.topBarHeight};
+        }
       `}
       {...props}
     />
@@ -47,10 +50,16 @@ function AppHeader(props) {
 const AppHeaderContent = styled.div`
   display: flex;
   justify-content: space-between;
-  min-width: 800px;
+  flex-direction: column-reverse;
+  min-width: 100%;
   max-width: 1440px;
   padding: 0 12px;
   margin: 0 auto;
+
+  @media (min-width: 800px) {
+    min-width: 800px;
+    flex-direction: row;
+  }
 `;
 
 const AppHeaderButton = styled.button`
@@ -58,15 +67,17 @@ const AppHeaderButton = styled.button`
   background: none;
   color: #7b8290;
   font-family: inherit;
-  font-size: 16px;
+  font-size: clamp(14px, 1.6vw, 16px);
   font-weight: 500;
   display: inline-flex;
-  padding: 16px 20px;
   align-items: center;
+  padding: clamp(8px, 1.6vw, 16px) 0;
 
   ${Icon} {
     margin-right: 4px;
     color: #b3b9c4;
+    width: clamp(20px, 2.4vw, 24px);
+    height: clamp(20px, 2.4vw, 24px);
   }
 
   &:hover,
@@ -95,21 +106,27 @@ const AppHeaderNavLink = AppHeaderButton.withComponent(NavLink);
 const AppHeaderActions = styled.div`
   display: inline-flex;
   align-items: center;
+  gap: clamp(8px, 2.5vw, 20px);
 `;
 
 const AppHeaderQuickNewButton = styled(StyledDropdownButton)`
   ${buttons.button};
   ${buttons.medium};
   ${buttons.gray};
-  margin-right: 8px;
+
+  @media (max-width: 800px) {
+  font-weight: 400;
+  }
 
   &:after {
-    top: 11px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 `;
 
 const AppHeaderNavList = styled.ul`
   display: flex;
+  gap: clamp(16px, 4vw, 60px);
   margin: 0;
   list-style: none;
 `;
@@ -166,8 +183,8 @@ class Header extends React.Component {
 
     return (
       <AppHeader>
-        <AppHeaderContent>
-          <nav>
+        <nav>
+          <AppHeaderContent>
             <AppHeaderNavList>
               <li>
                 <AppHeaderNavLink
@@ -196,34 +213,35 @@ class Header extends React.Component {
                 </li>
               )}
             </AppHeaderNavList>
-          </nav>
-          <AppHeaderActions>
-            {creatableCollections.size > 0 && (
-              <Dropdown
-                renderButton={() => (
-                  <AppHeaderQuickNewButton> {t('app.header.quickAdd')}</AppHeaderQuickNewButton>
-                )}
-                dropdownTopOverlap="30px"
-                dropdownWidth="160px"
-                dropdownPosition="left"
-              >
-                {creatableCollections.map(collection => (
-                  <DropdownItem
-                    key={collection.get('name')}
-                    label={collection.get('label_singular') || collection.get('label')}
-                    onClick={() => this.handleCreatePostClick(collection.get('name'))}
-                  />
-                ))}
-              </Dropdown>
-            )}
-            <SettingsDropdown
-              displayUrl={displayUrl}
-              isTestRepo={isTestRepo}
-              imageUrl={user?.avatar_url}
-              onLogoutClick={onLogoutClick}
-            />
-          </AppHeaderActions>
-        </AppHeaderContent>
+
+            <AppHeaderActions>
+              {creatableCollections.size > 0 && (
+                <Dropdown
+                  renderButton={() => (
+                    <AppHeaderQuickNewButton> {t('app.header.quickAdd')}</AppHeaderQuickNewButton>
+                  )}
+                  dropdownTopOverlap="30px"
+                  dropdownWidth="160px"
+                  dropdownPosition="left"
+                >
+                  {creatableCollections.map(collection => (
+                    <DropdownItem
+                      key={collection.get('name')}
+                      label={collection.get('label_singular') || collection.get('label')}
+                      onClick={() => this.handleCreatePostClick(collection.get('name'))}
+                    />
+                  ))}
+                </Dropdown>
+              )}
+              <SettingsDropdown
+                displayUrl={displayUrl}
+                isTestRepo={isTestRepo}
+                imageUrl={user?.avatar_url}
+                onLogoutClick={onLogoutClick}
+              />
+            </AppHeaderActions>
+          </AppHeaderContent>
+        </nav>
       </AppHeader>
     );
   }
diff --git a/packages/decap-cms-core/src/components/Collection/Collection.js b/packages/decap-cms-core/src/components/Collection/Collection.js
index dc3f8e711c78..bcf72d2ad8f2 100644
--- a/packages/decap-cms-core/src/components/Collection/Collection.js
+++ b/packages/decap-cms-core/src/components/Collection/Collection.js
@@ -26,16 +26,20 @@ import {
 } from '../../reducers/entries';
 
 const CollectionContainer = styled.div`
-  margin: ${lengths.pageMargin};
+  margin: ${lengths.pageMarginMobile};
+  @media (min-width: 800px) {
+    margin: ${lengths.pageMargin};
+  }
 `;
 
 const CollectionMain = styled.main`
-  padding-left: 280px;
+  @media (min-width: 800px) {
+    padding-left: 280px;
+  }
 `;
 
 const SearchResultContainer = styled.div`
   ${components.cardTop};
-  margin-bottom: 22px;
 `;
 
 const SearchResultHeading = styled.h1`
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionControls.js b/packages/decap-cms-core/src/components/Collection/CollectionControls.js
index afd9758ae1ea..ce8ddb067524 100644
--- a/packages/decap-cms-core/src/components/Collection/CollectionControls.js
+++ b/packages/decap-cms-core/src/components/Collection/CollectionControls.js
@@ -12,9 +12,12 @@ const CollectionControlsContainer = styled.div`
   align-items: center;
   flex-direction: row-reverse;
   margin-top: 22px;
-  width: ${lengths.topCardWidth};
   max-width: 100%;
 
+  @media (min-width: 800px) {
+    width: ${lengths.topCardWidth};
+  }
+
   & > div {
     margin-left: 6px;
   }
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionSearch.js b/packages/decap-cms-core/src/components/Collection/CollectionSearch.js
index 2532921e1296..0cd55811464b 100644
--- a/packages/decap-cms-core/src/components/Collection/CollectionSearch.js
+++ b/packages/decap-cms-core/src/components/Collection/CollectionSearch.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 const SearchContainer = styled.div`
-  margin: 0 12px;
+  margin: 0 clamp(12px, 2vw, 20px);
   position: relative;
 
   ${Icon} {
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionTop.js b/packages/decap-cms-core/src/components/Collection/CollectionTop.js
index 47d63e956d45..8bdee8ea34db 100644
--- a/packages/decap-cms-core/src/components/Collection/CollectionTop.js
+++ b/packages/decap-cms-core/src/components/Collection/CollectionTop.js
@@ -8,7 +8,6 @@ import { components, buttons, shadows } from 'decap-cms-ui-default';
 
 const CollectionTopContainer = styled.div`
   ${components.cardTop};
-  margin-bottom: 22px;
 `;
 
 const CollectionTopRow = styled.div`
@@ -27,7 +26,7 @@ const CollectionTopNewButton = styled(Link)`
   ${buttons.default};
   ${buttons.gray};
 
-  padding: 0 30px;
+  padding: clamp(4px, 1.2vw, 12px) clamp(12px, 3.2vw, 32px);
 `;
 
 const CollectionTopDescription = styled.p`
diff --git a/packages/decap-cms-core/src/components/Collection/ControlButton.js b/packages/decap-cms-core/src/components/Collection/ControlButton.js
index a31e04834a56..b9b9f3062d6c 100644
--- a/packages/decap-cms-core/src/components/Collection/ControlButton.js
+++ b/packages/decap-cms-core/src/components/Collection/ControlButton.js
@@ -7,10 +7,11 @@ const Button = styled(StyledDropdownButton)`
   ${buttons.button};
   ${buttons.medium};
   ${buttons.grayText};
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 
   &:after {
-    top: 11px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 `;
 
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js b/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js
index 830f7911de8c..1cc39b10d74e 100644
--- a/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js
+++ b/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js
@@ -22,7 +22,7 @@ import { selectCollectionEntriesCursor } from '../../../reducers/cursors';
 import Entries from './Entries';
 
 const GroupHeading = styled.h2`
-  font-size: 22px;
+  font-size: clamp(18px, 2.2vw, 22px);
   font-weight: 600;
   line-height: 37px;
   padding-inline-start: 20px;
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js b/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js
index 01e0027d7069..c85e95e03bd8 100644
--- a/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js
+++ b/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js
@@ -11,7 +11,9 @@ import { selectEntryCollectionTitle } from '../../../reducers/collections';
 
 const ListCard = styled.li`
   ${components.card};
-  width: ${lengths.topCardWidth};
+  @media (min-width: 800px) {
+    width: ${lengths.topCardWidth};
+  }
   margin-left: 12px;
   margin-bottom: 10px;
   overflow: hidden;
@@ -20,7 +22,7 @@ const ListCard = styled.li`
 const ListCardLink = styled(Link)`
   display: block;
   max-width: 100%;
-  padding: 16px 20px;
+  padding: clamp(8px, 1.6vw, 16px) clamp(10px, 2vw, 20px);
 
   &:hover {
     background-color: ${colors.foreground};
@@ -63,7 +65,7 @@ const CardHeading = styled.h2`
 `;
 
 const CardBody = styled.div`
-  padding: 16px 20px;
+  padding: clamp(8px, 1.6vw, 16px) clamp(10px, 2vw, 20px);
   height: 90px;
   position: relative;
   margin-bottom: ${props => props.hasImage && 0};
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js b/packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js
index 6947a426ce34..635a2deff2cd 100644
--- a/packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js
+++ b/packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js
@@ -15,6 +15,10 @@ const CardsGrid = styled.ul`
   margin-left: -12px;
   margin-top: 16px;
   margin-bottom: 16px;
+  flex-direction: column;
+  @media (min-width: 800px) {
+    flex-direction: row;
+  }
 `;
 
 export default class EntryListing extends React.Component {
diff --git a/packages/decap-cms-core/src/components/Collection/NestedCollection.js b/packages/decap-cms-core/src/components/Collection/NestedCollection.js
index 0cc9a068c870..afccbe75fe45 100644
--- a/packages/decap-cms-core/src/components/Collection/NestedCollection.js
+++ b/packages/decap-cms-core/src/components/Collection/NestedCollection.js
@@ -47,8 +47,8 @@ const TreeNavLink = styled(NavLink)`
   font-size: 14px;
   font-weight: 500;
   align-items: center;
-  padding: 8px;
-  padding-left: ${props => props.depth * 16 + 18}px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(${props => props.depth + 1} * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 
   ${Icon} {
diff --git a/packages/decap-cms-core/src/components/Collection/Sidebar.js b/packages/decap-cms-core/src/components/Collection/Sidebar.js
index 78abcdebe4e7..3a836d1312d6 100644
--- a/packages/decap-cms-core/src/components/Collection/Sidebar.js
+++ b/packages/decap-cms-core/src/components/Collection/Sidebar.js
@@ -21,20 +21,24 @@ const styles = {
 
 const SidebarContainer = styled.aside`
   ${components.card};
-  width: 250px;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: flex;
   flex-direction: column;
+  margin-bottom: 10px;
+  @media (min-width: 800px) {
+    width: 250px;
+    position: fixed;
+    margin-bottom: 0;
+  }
 `;
 
 const SidebarHeading = styled.h2`
-  font-size: 22px;
+  font-size: clamp(18px, 2.2vw, 22px);
   font-weight: 600;
-  line-height: 37px;
+  line-height: 1.5;
   padding: 0;
-  margin: 10px 20px;
+  margin: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
   color: ${colors.textLead};
 `;
 
@@ -49,7 +53,7 @@ const SidebarNavLink = styled(NavLink)`
   font-size: 14px;
   font-weight: 500;
   align-items: center;
-  padding: 8px 18px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
   border-left: 2px solid #fff;
   z-index: -1;
 
diff --git a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap
index 0cb6a889449c..86aa96ba62d5 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap
@@ -3,11 +3,19 @@
 exports[`Collection should render connected component 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  margin: 10px;
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -45,11 +53,19 @@ exports[`Collection should render connected component 1`] = `
 exports[`Collection should render with collection with create url 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  margin: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -78,11 +94,19 @@ exports[`Collection should render with collection with create url 1`] = `
 exports[`Collection should render with collection with create url and path 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  margin: 10px;
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -113,11 +137,19 @@ exports[`Collection should render with collection with create url and path 1`] =
 exports[`Collection should render with collection without create url 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  margin: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
diff --git a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap
index accf2fd59286..7b309c6295eb 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap
@@ -6,9 +6,7 @@ exports[`Sidebar should render nested collection with filterTerm 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -17,10 +15,19 @@ exports[`Sidebar should render nested collection with filterTerm 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  margin-bottom: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    width: 250px;
+    position: fixed;
+    margin-bottom: 0;
+  }
 }
 
 .emotion-2 {
-  font-size: 22px;
+  font-size: clamp(18px, 2.2vw, 22px);
   font-weight: 600;
   line-height: 37px;
   padding: 0;
@@ -67,9 +74,7 @@ exports[`Sidebar should render sidebar with a nested collection 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -78,10 +83,19 @@ exports[`Sidebar should render sidebar with a nested collection 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  margin-bottom: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    width: 250px;
+    position: fixed;
+    margin-bottom: 0;
+  }
 }
 
 .emotion-2 {
-  font-size: 22px;
+  font-size: clamp(18px, 2.2vw, 22px);
   font-weight: 600;
   line-height: 37px;
   padding: 0;
@@ -127,9 +141,7 @@ exports[`Sidebar should render sidebar with a simple collection 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -138,10 +150,19 @@ exports[`Sidebar should render sidebar with a simple collection 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  margin-bottom: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    width: 250px;
+    position: fixed;
+    margin-bottom: 0;
+  }
 }
 
 .emotion-2 {
-  font-size: 22px;
+  font-size: clamp(18px, 2.2vw, 22px);
   font-weight: 600;
   line-height: 37px;
   padding: 0;
@@ -224,9 +245,7 @@ exports[`Sidebar should render sidebar without search 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -235,10 +254,19 @@ exports[`Sidebar should render sidebar without search 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  margin-bottom: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    width: 250px;
+    position: fixed;
+    margin-bottom: 0;
+  }
 }
 
 .emotion-2 {
-  font-size: 22px;
+  font-size: clamp(18px, 2.2vw, 22px);
   font-weight: 600;
   line-height: 37px;
   padding: 0;
diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
index 217f4447ffe8..62e1801bdfe8 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -73,7 +73,7 @@ const ControlContainer = styled.div`
   margin-top: 16px;
 
   &:first-of-type {
-    margin-top: 36px;
+    margin-top: clamp(20px, 3.6vw, 36px);
   }
 `;
 
diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
index 18b2dfbf83d6..864e1c519da9 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
@@ -37,7 +37,8 @@ const LocaleButton = styled(StyledDropdownButton)`
   height: 100%;
 
   &:after {
-    top: 11px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 `;
 
diff --git a/packages/decap-cms-core/src/components/Editor/EditorInterface.js b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
index 7fb49ae0efac..3b8cf09eff0e 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorInterface.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
@@ -46,16 +46,12 @@ function ReactSplitPaneGlobalStyles() {
   return (
     <Global
       styles={css`
-        .Resizer.vertical {
-          width: 2px;
-          cursor: col-resize;
+        .Resizer {
           position: relative;
           background: none;
 
           &:before {
             content: '';
-            width: 2px;
-            height: 100%;
             position: relative;
             background-color: ${colors.textFieldBorder};
             display: block;
@@ -66,11 +62,46 @@ function ReactSplitPaneGlobalStyles() {
           &:hover,
           &:active {
             &:before {
-              width: 4px;
-              left: -1px;
               background-color: ${colorsRaw.blue};
             }
           }
+
+          &.vertical {
+            width: 2px;
+            cursor: col-resize;
+
+            &:before {
+              width: 2px;
+              height: 100%;
+            }
+
+            &:hover,
+            &:active {
+              &:before {
+                width: 4px;
+                left: -1px;
+              }
+            }
+          }
+
+          &.horizontal {
+            width: 100%;
+            height: 2px;
+            cursor: row-resize;
+
+            &:before {
+              width: 100%;
+              height: 2px;
+            }
+
+            &:hover,
+            &:active {
+              &:before {
+                width: 4px;
+                left: -1px;
+              }
+            }
+          }
         }
       `}
     />
@@ -79,6 +110,7 @@ function ReactSplitPaneGlobalStyles() {
 
 const StyledSplitPane = styled(SplitPane)`
   ${styles.splitPane};
+  flex-direction: column;
 
   /**
    * Quick fix for preview pane not fully displaying in Safari
@@ -94,14 +126,20 @@ const NoPreviewContainer = styled.div`
 
 const EditorContainer = styled.div`
   width: 100%;
-  min-width: 800px;
-  height: 100%;
-  position: absolute;
+  height: 100vh;
+  position: unset;
   top: 0;
   left: 0;
   overflow: hidden;
-  padding-top: 66px;
-  background-color: ${colors.background};
+  background-color: white;
+  padding-top: 100px;
+  @media (min-width: 800px) {
+    height: 100%;
+    position: absolute;
+    min-width: 800px;
+    padding-top: 66px;
+    background-color: ${colors.background};
+  }
 `;
 
 const Editor = styled.div`
@@ -120,13 +158,18 @@ const ControlPaneContainer = styled(PreviewPaneContainer)`
   padding: 0 16px;
   position: relative;
   overflow-x: hidden;
+  width: 100%;
 `;
 
 const ViewControls = styled.div`
+  display: none;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: ${zIndex.zIndex299};
+  @media (min-width: 800px) {
+    display: block;
+  }
 `;
 
 function EditorContent({
@@ -156,12 +199,25 @@ function isPreviewEnabled(collection, entry) {
 
 class EditorInterface extends Component {
   state = {
+    isMobile: window.innerWidth <= 800,
     showEventBlocker: false,
     previewVisible: localStorage.getItem(PREVIEW_VISIBLE) !== 'false',
     scrollSyncEnabled: localStorage.getItem(SCROLL_SYNC_ENABLED) !== 'false',
     i18nVisible: localStorage.getItem(I18N_VISIBLE) !== 'false',
   };
 
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = () => {
+    this.setState({ isMobile: window.innerWidth <= 768 });
+  };
+
   handleSplitPaneDragStart = () => {
     this.setState({ showEventBlocker: true });
   };
@@ -239,8 +295,7 @@ class EditorInterface extends Component {
       t,
     } = this.props;
 
-    const { scrollSyncEnabled, showEventBlocker } = this.state;
-
+    const { isMobile, scrollSyncEnabled, showEventBlocker } = this.state;
     const previewEnabled = isPreviewEnabled(collection, entry);
 
     const { locales, defaultLocale } = getI18nInfo(this.props.collection);
@@ -279,13 +334,16 @@ class EditorInterface extends Component {
       : entry;
 
     const editorWithPreview = (
-      <ScrollSync enabled={this.state.scrollSyncEnabled}>
+      <ScrollSync enabled={scrollSyncEnabled}>
         <div>
           <ReactSplitPaneGlobalStyles />
           <StyledSplitPane
+            split={isMobile ? 'horizontal' : 'vertical'} // Switch to horizontal split on mobile
             maxSize={-100}
-            minSize={400}
-            defaultSize={parseInt(localStorage.getItem(SPLIT_PANE_POSITION), 10) || '50%'}
+            minSize={isMobile ? '30%' : 400}
+            defaultSize={
+              parseInt(localStorage.getItem(SPLIT_PANE_POSITION), 10) || (isMobile ? '40%' : '50%')
+            }
             onChange={size => localStorage.setItem(SPLIT_PANE_POSITION, size)}
             onDragStarted={this.handleSplitPaneDragStart}
             onDragFinished={this.handleSplitPaneDragFinished}
diff --git a/packages/decap-cms-core/src/components/Editor/EditorToolbar.js b/packages/decap-cms-core/src/components/Editor/EditorToolbar.js
index e909e93055b1..c7bd55141f87 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorToolbar.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorToolbar.js
@@ -27,11 +27,14 @@ const styles = {
     text-overflow: ellipsis;
   `,
   buttonMargin: css`
-    margin: 0 10px;
+    margin: 0 5px;
+    @media (min-width: 800px) {
+      margin: 0 10px;
+    }
   `,
   toolbarSection: css`
-    height: 100%;
     display: flex;
+    gap: 12px;
     align-items: center;
     border: 0 solid ${colors.textFieldBorder};
   `,
@@ -83,30 +86,41 @@ const DropdownButton = styled(StyledDropdownButton)`
 `;
 
 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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: ${zIndex.zIndex300};
   background-color: #fff;
-  height: 66px;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas:
+    'back-link meta'
+    'main main';
+  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);
+
+  @media (min-width: 1000px) {
+    display: flex;
+    flex-direction: row;
+  }
 `;
 
 const ToolbarSectionMain = styled.div`
   ${styles.toolbarSection};
   flex: 10;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   justify-content: space-between;
-  padding: 0 10px;
+
+  @media (max-width: 1000px) {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 `;
 
 const ToolbarSubSectionFirst = styled.div`
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   align-items: center;
 `;
 
@@ -116,9 +130,13 @@ const ToolbarSubSectionLast = styled(ToolbarSubSectionFirst)`
 
 const ToolbarSectionBackLink = styled(Link)`
   ${styles.toolbarSection};
-  border-right-width: 1px;
+  gap: clamp(12px, 2.4vw, 24px);
   font-weight: normal;
-  padding: 0 20px;
+  padding: 0 clamp(8px, 1.6vw, 16px);
+
+  @media (max-width: 1000px) {
+    grid-area: back-link;
+  }
 
   &:hover,
   &:focus {
@@ -128,13 +146,17 @@ const ToolbarSectionBackLink = styled(Link)`
 
 const ToolbarSectionMeta = styled.div`
   ${styles.toolbarSection};
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  justify-content: flex-end;
+
+  @media (max-width: 1000px) {
+    grid-area: meta;
+    border: none;
+  }
 `;
 
 const ToolbarDropdown = styled(Dropdown)`
-  ${styles.buttonMargin};
-
   ${Icon} {
     color: ${colorsRaw.teal};
   }
@@ -144,12 +166,11 @@ const BackArrow = styled.div`
   color: ${colors.textLead};
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 `;
 
 const BackCollection = styled.div`
   color: ${colors.textLead};
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 `;
 
 const BackStatus = styled.div`
@@ -167,13 +188,7 @@ const BackStatusChanged = styled(BackStatus)`
 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)`
@@ -205,7 +220,6 @@ const StatusButton = styled(DropdownButton)`
 `;
 
 const PreviewButtonContainer = styled.div`
-  margin-right: 12px;
   color: ${colorsRaw.blue};
   display: flex;
   align-items: center;
diff --git a/packages/decap-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap b/packages/decap-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
index 280f49d0e045..32a5926a426b 100644
--- a/packages/decap-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
+++ b/packages/decap-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
@@ -3,15 +3,13 @@
 exports[`EditorToolbar should render normal save button 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -19,6 +17,20 @@ exports[`EditorToolbar should render normal save button 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -30,12 +42,18 @@ exports[`EditorToolbar should render normal save button 1`] = `
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -43,8 +61,14 @@ exports[`EditorToolbar should render normal save button 1`] = `
   color: #ff003b;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -61,10 +85,26 @@ exports[`EditorToolbar should render normal save button 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -80,12 +120,24 @@ exports[`EditorToolbar should render normal save button 1`] = `
 
 .emotion-13 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-13 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-13 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-13 .e1jeq5dr0 {
@@ -99,12 +151,12 @@ exports[`EditorToolbar should render normal save button 1`] = `
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -112,6 +164,19 @@ exports[`EditorToolbar should render normal save button 1`] = `
   background-color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-15 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-15:after {
   color: #fff;
   width: 0;
@@ -141,19 +206,32 @@ exports[`EditorToolbar should render normal save button 1`] = `
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-17 {
     padding: 0 10px;
   }
@@ -175,7 +253,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
 }
 
 .emotion-21 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -185,15 +263,30 @@ exports[`EditorToolbar should render normal save button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-21 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-21 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -259,15 +352,13 @@ exports[`EditorToolbar should render normal save button 1`] = `
 exports[`EditorToolbar should render normal save button 2`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -275,6 +366,20 @@ exports[`EditorToolbar should render normal save button 2`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -286,12 +391,18 @@ exports[`EditorToolbar should render normal save button 2`] = `
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -299,8 +410,14 @@ exports[`EditorToolbar should render normal save button 2`] = `
   color: #ff003b;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -317,10 +434,26 @@ exports[`EditorToolbar should render normal save button 2`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -336,12 +469,24 @@ exports[`EditorToolbar should render normal save button 2`] = `
 
 .emotion-13 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-13 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-13 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-13 .e1jeq5dr0 {
@@ -355,12 +500,12 @@ exports[`EditorToolbar should render normal save button 2`] = `
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -368,6 +513,19 @@ exports[`EditorToolbar should render normal save button 2`] = `
   background-color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-15 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-15:after {
   color: #fff;
   width: 0;
@@ -397,19 +555,32 @@ exports[`EditorToolbar should render normal save button 2`] = `
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-17 {
     padding: 0 10px;
   }
@@ -431,7 +602,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
 }
 
 .emotion-21 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -441,15 +612,30 @@ exports[`EditorToolbar should render normal save button 2`] = `
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-21 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-21 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -515,15 +701,13 @@ exports[`EditorToolbar should render normal save button 2`] = `
 exports[`EditorToolbar should render with default props 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -531,6 +715,20 @@ exports[`EditorToolbar should render with default props 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -542,12 +740,18 @@ exports[`EditorToolbar should render with default props 1`] = `
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -555,8 +759,14 @@ exports[`EditorToolbar should render with default props 1`] = `
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -573,10 +783,26 @@ exports[`EditorToolbar should render with default props 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -597,19 +823,32 @@ exports[`EditorToolbar should render with default props 1`] = `
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #ddf5f9;
   color: #117888;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -622,19 +861,32 @@ exports[`EditorToolbar should render with default props 1`] = `
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-14 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-14 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-14 {
     padding: 0 10px;
   }
@@ -656,7 +908,7 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 .emotion-18 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -666,15 +918,30 @@ exports[`EditorToolbar should render with default props 1`] = `
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -730,15 +997,13 @@ exports[`EditorToolbar should render with default props 1`] = `
 exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -746,6 +1011,20 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -757,12 +1036,18 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -770,8 +1055,14 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -788,10 +1079,26 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -812,19 +1119,32 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -838,12 +1158,24 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-15 .e1jeq5dr0 {
@@ -857,12 +1189,12 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -871,6 +1203,19 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-17:after {
   color: #fff;
   width: 0;
@@ -900,19 +1245,32 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-19 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-19 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-19 {
     padding: 0 10px;
   }
@@ -934,7 +1292,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 }
 
 .emotion-23 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -944,15 +1302,30 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-23 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-23 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1020,15 +1393,13 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1036,6 +1407,20 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -1047,12 +1432,18 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -1060,8 +1451,14 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1078,10 +1475,26 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -1102,19 +1515,32 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -1128,12 +1554,24 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-15 .emotion-23 {
@@ -1147,12 +1585,12 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -1161,6 +1599,19 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-17:after {
   color: #fff;
   width: 0;
@@ -1258,7 +1709,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 }
 
 .emotion-30 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1268,15 +1719,30 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-30 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-30 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1371,15 +1837,13 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 exports[`EditorToolbar should render with status=pending_publish,useOpenAuthoring=false 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1387,6 +1851,20 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -1398,12 +1876,18 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -1411,8 +1895,14 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1429,10 +1919,26 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -1453,19 +1959,32 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -1479,12 +1998,24 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-15 .e1jeq5dr0 {
@@ -1498,12 +2029,12 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -1512,6 +2043,19 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-17:after {
   color: #fff;
   width: 0;
@@ -1541,19 +2085,32 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-19 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-19 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-19 {
     padding: 0 10px;
   }
@@ -1575,7 +2132,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-23 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1585,15 +2142,30 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-23 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-23 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1661,15 +2233,13 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 exports[`EditorToolbar should render with status=pending_publish,useOpenAuthoring=true 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1677,6 +2247,20 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -1688,12 +2272,18 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -1701,8 +2291,14 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1719,10 +2315,26 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -1743,19 +2355,32 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -1769,12 +2394,24 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-15 .emotion-23 {
@@ -1788,12 +2425,12 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -1802,6 +2439,19 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-17:after {
   color: #fff;
   width: 0;
@@ -1881,7 +2531,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-28 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1891,15 +2541,30 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-28 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-28 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1989,15 +2654,13 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring=false 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2005,6 +2668,20 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -2016,12 +2693,18 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2029,8 +2712,14 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2047,10 +2736,26 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -2071,19 +2776,32 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -2097,12 +2815,24 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-15 .e1jeq5dr0 {
@@ -2116,12 +2846,12 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -2130,6 +2860,19 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-17:after {
   color: #fff;
   width: 0;
@@ -2159,19 +2902,32 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-19 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-19 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-19 {
     padding: 0 10px;
   }
@@ -2193,7 +2949,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-23 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2203,15 +2959,30 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-23 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-23 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -2279,15 +3050,13 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring=true 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2295,6 +3064,20 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -2306,12 +3089,18 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2319,8 +3108,14 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2337,10 +3132,26 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -2361,19 +3172,32 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -2387,12 +3211,24 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-15 {
+    margin: 0 10px;
+  }
 }
 
 .emotion-15 .emotion-23 {
@@ -2406,12 +3242,12 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -2420,6 +3256,19 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #17a2b8;
 }
 
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-17 {
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+}
+
 .emotion-17:after {
   color: #fff;
   width: 0;
@@ -2517,7 +3366,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-30 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2527,15 +3376,30 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-30 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-30 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -2630,15 +3494,13 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=false,isNewEntry=false,isModification=false,useOpenAuthoring=false 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2646,6 +3508,20 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -2657,12 +3533,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2670,8 +3552,14 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2688,10 +3576,26 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -2712,19 +3616,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -2743,19 +3660,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-14 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-14 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-14 {
     padding: 0 10px;
   }
@@ -2777,7 +3707,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2787,15 +3717,30 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -2850,15 +3795,13 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=false,isNewEntry=false,isModification=false,useOpenAuthoring=true 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2866,6 +3809,20 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -2877,12 +3834,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2890,8 +3853,14 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2908,10 +3877,26 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -2932,19 +3917,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -2972,7 +3970,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-16 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2982,15 +3980,30 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-16 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-16 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3040,15 +4053,13 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=false,useOpenAuthoring=false 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3056,6 +4067,20 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -3067,12 +4092,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3080,8 +4111,14 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3098,10 +4135,26 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -3122,19 +4175,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -3153,19 +4219,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-14 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-14 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-14 {
     padding: 0 10px;
   }
@@ -3187,7 +4266,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3197,15 +4276,30 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3260,15 +4354,13 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=false,useOpenAuthoring=true 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3276,6 +4368,20 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -3287,12 +4393,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3300,8 +4412,14 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3318,10 +4436,26 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -3342,19 +4476,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -3373,19 +4520,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-14 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-14 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-14 {
     padding: 0 10px;
   }
@@ -3407,7 +4567,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3417,15 +4577,30 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3480,15 +4655,13 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=true,useOpenAuthoring=false 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3496,6 +4669,20 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -3507,12 +4694,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3520,8 +4713,14 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3538,10 +4737,26 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -3562,19 +4777,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -3593,19 +4821,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-14 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-14 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-14 {
     padding: 0 10px;
   }
@@ -3627,7 +4868,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3637,15 +4878,30 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3700,15 +4956,13 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=true,useOpenAuthoring=true 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  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);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
   z-index: 300;
   background-color: #fff;
-  height: 66px;
+  height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3716,6 +4970,20 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 800px) {
+  .emotion-0 {
+    height: 66px;
+    min-width: 800px;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    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);
+  }
 }
 
 .emotion-2 {
@@ -3727,12 +4995,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+@media (min-width: 800px) {
+  .emotion-4 {
+    font-size: 14px;
+  }
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: 8px;
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3740,8 +5014,14 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
+@media (min-width: 800px) {
+  .emotion-6 {
+    font-size: 13px;
+  }
+}
+
 .emotion-8 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3758,10 +5038,26 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0 10px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-8 {
+    padding: 0 10px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
 }
 
 .emotion-10 {
@@ -3782,19 +5078,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-12 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-12 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-12 {
     padding: 0 10px;
   }
@@ -3813,19 +5122,32 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   height: 36px;
   line-height: 36px;
   font-weight: 500;
-  padding: 0 15px;
+  padding: 0 13px;
   background-color: #798291;
   color: #fff;
-  margin: 0 10px;
+  margin: 0 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  padding: 0 5px;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) {
+  .emotion-14 {
+    padding: 0 35px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-14 {
+    margin: 0 10px;
+  }
+}
+
+@media (min-width: 800px) {
   .emotion-14 {
     padding: 0 10px;
   }
@@ -3847,7 +5169,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
+  height: 70%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3857,15 +5179,30 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
-  border-left-width: 1px;
   padding: 0 7px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    height: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-18 {
+    position: unset;
+    border-left-width: 1px;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-13c7htf-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
index 1fa7cb176c0c..66adc209dd2d 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
@@ -29,10 +29,11 @@ function CardWrapper(props) {
     },
   } = props;
   const index = rowIndex * columnCount + columnIndex;
-  if (index >= mediaItems.length) {
+  const file = mediaItems[index];
+
+  if (!file) {
     return null;
   }
-  const file = mediaItems[index];
 
   return (
     <div
@@ -164,7 +165,10 @@ const PaginatingMessage = styled.h1`
 
 function MediaLibraryCardGrid(props) {
   const { canLoadMore, isPaginating } = props;
-  if (canLoadMore || isPaginating) {
+
+  const isMobile = window.innerWidth <= 800;
+
+  if (canLoadMore || isPaginating || isMobile) {
     return <PaginatedGrid {...props} />;
   }
   return <VirtualizedGrid {...props} />;
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
index a29620d52086..4e3a5cc2eba1 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
@@ -21,11 +21,16 @@ const CloseButton = styled.button`
 `;
 
 const LibraryTitle = styled.h1`
-  line-height: 36px;
-  font-size: 22px;
+  line-height: unset;
+  font-size: 16px;
   text-align: left;
-  margin-bottom: 25px;
+  margin-bottom: 12px;
   color: ${props => props.isPrivate && colors.textFieldBorder};
+  @media (min-width: 800px) {
+    margin-bottom: 25px;
+    line-height: 36px;
+    font-size: clamp(18px, 2.2vw, 22px);
+  }
 `;
 
 function MediaLibraryHeader({ onClose, title, isPrivate }) {
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
index d91bb5b92916..cc104b6a6537 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
@@ -26,12 +26,14 @@ const cardMargin = `10px`;
 const cardOutsideWidth = `300px`;
 
 const StyledModal = styled(Modal)`
-  display: grid;
-  grid-template-rows: 120px auto;
-  width: calc(${cardOutsideWidth} + 20px);
+  display: flex;
+  flex-direction: column;
+  width: 95%;
   background-color: ${props => props.isPrivate && colors.grayDark};
 
   @media (min-width: 800px) {
+    display: grid;
+    grid-template-rows: 120px auto;
     width: calc(${cardOutsideWidth} * 2 + 20px);
   }
 
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
index 00b3ed06ac05..f368d6c458a4 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
@@ -16,6 +16,7 @@ const LibraryTop = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
+  gap: 10px;
 `;
 
 const RowContainer = styled.div`
diff --git a/packages/decap-cms-core/src/components/UI/SettingsDropdown.js b/packages/decap-cms-core/src/components/UI/SettingsDropdown.js
index 06979bc86073..90cd40d22850 100644
--- a/packages/decap-cms-core/src/components/UI/SettingsDropdown.js
+++ b/packages/decap-cms-core/src/components/UI/SettingsDropdown.js
@@ -9,14 +9,18 @@ import { stripProtocol } from '../../lib/urlHelper';
 
 const styles = {
   avatarImage: css`
-    width: 32px;
-    border-radius: 32px;
+    border-radius: 100%;
+
+    @media (max-width: 800px) {
+      width: 28px;
+      height: 28px;
+    }
   `,
 };
 
 const AvatarDropdownButton = styled(DropdownButton)`
   display: inline-block;
-  padding: 8px;
+  padding: 8px 0;
   cursor: pointer;
   color: #1e2532;
   background-color: transparent;
@@ -28,23 +32,20 @@ const AvatarImage = styled.img`
 
 const AvatarPlaceholderIcon = styled(Icon)`
   ${styles.avatarImage};
-  height: 32px;
   color: #1e2532;
   background-color: ${colors.textFieldBorder};
 `;
 
 const AppHeaderSiteLink = styled.a`
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   font-weight: 400;
   color: #7b8290;
-  padding: 10px 16px;
 `;
 
 const AppHeaderTestRepoIndicator = styled.a`
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   font-weight: 400;
   color: #7b8290;
-  padding: 10px 16px;
 `;
 
 function Avatar({ imageUrl }) {
@@ -68,7 +69,7 @@ function SettingsDropdown({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }
           target="_blank"
           rel="noopener noreferrer"
         >
-          Test Backend ↗
+          Test Backend&nbsp;↗
         </AppHeaderTestRepoIndicator>
       )}
       {displayUrl ? (
diff --git a/packages/decap-cms-core/src/components/Workflow/Workflow.js b/packages/decap-cms-core/src/components/Workflow/Workflow.js
index efa4a841c34a..1a243b85813b 100644
--- a/packages/decap-cms-core/src/components/Workflow/Workflow.js
+++ b/packages/decap-cms-core/src/components/Workflow/Workflow.js
@@ -27,7 +27,10 @@ import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes';
 import WorkflowList from './WorkflowList';
 
 const WorkflowContainer = styled.div`
-  padding: ${lengths.pageMargin} 0;
+  margin: ${lengths.pageMarginMobile};
+  @media (min-width: 800px) {
+    margin: ${lengths.pageMargin};
+  }
   height: 100vh;
 `;
 
diff --git a/packages/decap-cms-core/src/components/Workflow/WorkflowList.js b/packages/decap-cms-core/src/components/Workflow/WorkflowList.js
index 7d929b2f6cb9..1238021ce435 100644
--- a/packages/decap-cms-core/src/components/Workflow/WorkflowList.js
+++ b/packages/decap-cms-core/src/components/Workflow/WorkflowList.js
@@ -55,12 +55,15 @@ const styles = {
       }
     `,
   column: css`
-    margin: 0 20px;
+    margin: 0 15px;
     transition: background-color 0.5s ease;
     border: 2px dashed transparent;
     border-radius: 4px;
     position: relative;
     height: 100%;
+    @media (min-width: 800px) {
+      margin: 0 20px;
+    }
   `,
   columnHovered: css`
     border-color: ${colors.active};
@@ -78,11 +81,15 @@ const styles = {
 };
 
 const ColumnHeader = styled.h2`
-  font-size: 20px;
+  font-size: 16px;
   font-weight: normal;
-  padding: 4px 14px;
+  padding: 4px 10px;
   border-radius: ${lengths.borderRadius};
   margin-bottom: 28px;
+  @media (min-width: 800px) {
+    padding: 4px 14px;
+    font-size: 20px;
+  }
 
   ${props =>
     props.name === 'draft' &&
diff --git a/packages/decap-cms-ui-default/src/AuthenticationPage.js b/packages/decap-cms-ui-default/src/AuthenticationPage.js
index b9e6cbc5c09b..a9feb51be366 100644
--- a/packages/decap-cms-ui-default/src/AuthenticationPage.js
+++ b/packages/decap-cms-ui-default/src/AuthenticationPage.js
@@ -16,7 +16,8 @@ const StyledAuthenticationPage = styled.section`
 `;
 
 const CustomIconWrapper = styled.span`
-  width: 300px;
+  width: auto;
+  max-width: 300px;
   height: auto;
 `;
 
diff --git a/packages/decap-cms-ui-default/src/Dropdown.js b/packages/decap-cms-ui-default/src/Dropdown.js
index c64f4aad4d55..b4cdac10dca0 100644
--- a/packages/decap-cms-ui-default/src/Dropdown.js
+++ b/packages/decap-cms-ui-default/src/Dropdown.js
@@ -9,7 +9,7 @@ import Icon from './Icon';
 
 const StyledWrapper = styled(Wrapper)`
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   user-select: none;
 `;
 
@@ -17,8 +17,8 @@ const StyledDropdownButton = styled(DropdownButton)`
   ${buttons.button};
   ${buttons.default};
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
 
   &:after {
@@ -26,8 +26,9 @@ const StyledDropdownButton = styled(DropdownButton)`
     content: '';
     display: block;
     position: absolute;
-    top: 16px;
-    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: clamp(5px, 1vw, 10px);
     color: currentColor;
   }
 `;
diff --git a/packages/decap-cms-ui-default/src/styles.js b/packages/decap-cms-ui-default/src/styles.js
index 17bc117986dc..f47a42b842e0 100644
--- a/packages/decap-cms-ui-default/src/styles.js
+++ b/packages/decap-cms-ui-default/src/styles.js
@@ -88,12 +88,14 @@ const colors = {
 
 const lengths = {
   topBarHeight: '56px',
-  inputPadding: '16px 20px',
+  topBarHeightMobile: '100%',
+  inputPadding: 'clamp(8px, 1.6vw, 16px) clamp(10px, 2vw, 20px)',
   borderRadius: '5px',
   richTextEditorMinHeight: '300px',
   borderWidth: '2px',
   topCardWidth: '682px',
   pageMargin: '28px 18px',
+  pageMarginMobile: '10px',
   objectWidgetTopBarContainerPadding: '0 14px 14px',
 };
 
@@ -155,7 +157,7 @@ const effects = {
 };
 
 const badge = css`
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
 `;
 
@@ -187,10 +189,9 @@ const buttons = {
     cursor: pointer;
   `,
   default: css`
-    height: 36px;
-    line-height: 36px;
+    line-height: 1.1;
     font-weight: 500;
-    padding: 0 15px;
+    padding: clamp(4px, 1.2vw, 12px) clamp(12px, 3.2vw, 32px);
     background-color: ${colorsRaw.gray};
     color: ${colorsRaw.white};
   `,
@@ -204,12 +205,12 @@ const buttons = {
     border-radius: 3px;
   `,
   medium: css`
-    height: 27px;
-    line-height: 27px;
+    min-height: 27px;
+    line-height: 1.1;
     font-size: 12px;
     font-weight: 600;
     border-radius: 3px;
-    padding: 0 24px 0 14px;
+    padding-right: 24px;
   `,
   small: css`
     font-size: 13px;
@@ -310,13 +311,15 @@ const components = {
   `,
   cardTop: css`
     ${card};
-    width: ${lengths.topCardWidth};
     max-width: 100%;
-    padding: 18px 20px;
-    margin-bottom: 28px;
+    padding: clamp(12px, 1.8vw, 18px) clamp(16px, 2vw, 20px);
+
+    @media (min-width: 800px) {
+      width: ${lengths.topCardWidth};
+    }
   `,
   cardTopHeading: css`
-    font-size: 22px;
+    font-size: clamp(18px, 2.2vw, 22px);
     font-weight: 600;
     line-height: 37px;
     margin: 0;
@@ -496,7 +499,7 @@ function GlobalStyles() {
 
         a,
         button {
-          font-size: 14px;
+          font-size: clamp(12px, 3.3vw, 14px);
           font-weight: 500;
         }
 
diff --git a/packages/decap-cms-widget-datetime/src/DateTimeControl.js b/packages/decap-cms-widget-datetime/src/DateTimeControl.js
index ae0a636c822a..082f10332204 100644
--- a/packages/decap-cms-widget-datetime/src/DateTimeControl.js
+++ b/packages/decap-cms-widget-datetime/src/DateTimeControl.js
@@ -17,8 +17,8 @@ function Buttons({ t, handleChange, getNow }) {
     <div
       css={css`
         display: flex;
-        gap: 20px;
         width: fit-content;
+        gap: clamp(10px, 2vw, 20px);
       `}
     >
       <button
@@ -168,8 +168,13 @@ class DateTimeControl extends React.Component {
         className={classNameWrapper}
         css={css`
           display: flex !important;
-          gap: 20px;
+          gap: clamp(5px, 2vw, 20px);
           align-items: center;
+
+          @media (max-width: 800px) {
+            flex-direction: column;
+            align-items: flex-start;
+          }
         `}
       >
         <input
diff --git a/packages/decap-cms-widget-list/src/ListControl.js b/packages/decap-cms-widget-list/src/ListControl.js
index 3db08db07e73..91e054f209d3 100644
--- a/packages/decap-cms-widget-list/src/ListControl.js
+++ b/packages/decap-cms-widget-list/src/ListControl.js
@@ -47,7 +47,7 @@ const NestedObjectLabel = styled.div`
   border-top: 0;
   color: ${props => (props.error ? colors.errorText : 'inherit')};
   background-color: ${colors.textFieldBorder};
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 ${lengths.borderRadius} ${lengths.borderRadius};
 `;
 
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js
index a7cf9b360f8b..575e1a1693d5 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js
@@ -23,10 +23,16 @@ const ToolbarContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 11px 14px;
+  padding: clamp(6px, 1.1vw, 11px) clamp(7px, 1.4vw, 14px);
   min-height: 58px;
   transition: background-color ${transitions.main}, color ${transitions.main};
   color: ${colors.text};
+
+  @media (max-width: 800px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
 `;
 
 const ToolbarDropdownWrapper = styled.div`
@@ -38,8 +44,8 @@ const ToolbarToggle = styled.div`
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  font-size: 14px;
   margin: 0 10px;
+  font-size: clamp(12px, 1.4vw, 14px);
 `;
 
 const StyledToggle = ToolbarToggle.withComponent(Toggle);
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js
index c75a2dbb53c0..79b6beae31d8 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js
@@ -6,10 +6,10 @@ import { Icon, buttons } from 'decap-cms-ui-default';
 const StyledToolbarButton = styled.button`
   ${buttons.button};
   display: inline-block;
-  padding: 6px;
+  padding: clamp(3px, 0.6vw, 6px);
   border: none;
   background-color: transparent;
-  font-size: 16px;
+  font-size: clamp(13px, 1.6vw, 16px);
   color: ${props => (props.isActive ? '#1e2532' : 'inherit')};
   cursor: pointer;
 
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
index c8c2ba7d123e..cff489677565 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
@@ -258,7 +258,7 @@ function Editor(props) {
                 {editorValue.length !== 0 && (
                   <Editable
                     className={css`
-                      padding: 16px 20px 0;
+                      padding: clamp(8px, 1.6vw, 16px) clamp(10px, 2vw, 20px) 0;
                     `}
                     renderElement={renderElement}
                     renderLeaf={renderLeaf}
