diff --git a/dev-test/index.html b/dev-test/index.html
index 8147bcc0118d..2ae9d5e739f2 100644
--- a/dev-test/index.html
+++ b/dev-test/index.html
@@ -2,7 +2,6 @@
 <html>
 <head>
   <meta charset="utf-8" />
-
   <title>Decap CMS Development Test</title>
   <script>
   window.repoFiles = {
diff --git a/package-lock.json b/package-lock.json
index a286b69edb9a..4e34ed9894dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27143,14 +27143,15 @@
       }
     },
     "node_modules/react-scroll-sync": {
-      "version": "0.9.0",
-      "license": "MIT",
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/react-scroll-sync/-/react-scroll-sync-0.11.2.tgz",
+      "integrity": "sha512-n7m+bbRTSWuczhKQf6Evvl7PFGkTt4RfP4bhyUtUyv6znovpybhAScQDdrFr9Jh280nG39x9AWMY8j477PHL1A==",
       "dependencies": {
         "prop-types": "^15.5.7"
       },
       "peerDependencies": {
-        "react": "0.14.x || 15.x || 16.x || 17.x",
-        "react-dom": "0.14.x || 15.x || 16.x || 17.x"
+        "react": "16.x || 17.x || 18.x",
+        "react-dom": "16.x || 17.x || 18.x"
       }
     },
     "node_modules/react-select": {
@@ -33454,8 +33455,8 @@
         "react-polyglot": "^0.7.0",
         "react-redux": "^7.2.0",
         "react-router-dom": "^5.2.0",
-        "react-scroll-sync": "^0.9.0",
-        "react-split-pane": "^0.1.85",
+        "react-scroll-sync": "^0.11.2",
+        "react-split-pane": "^0.1.92",
         "react-toastify": "^9.1.1",
         "react-topbar-progress-indicator": "^4.0.0",
         "react-virtualized-auto-sizer": "^1.0.2",
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..0678cdd25121 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
@@ -24,7 +24,8 @@ exports[`GitGatewayAuthenticationPage should render with identity error 1`] = `
 }
 
 .emotion-2 {
-  width: 300px;
+  width: auto;
+  max-width: 300px;
   height: auto;
 }
 
@@ -33,10 +34,9 @@ exports[`GitGatewayAuthenticationPage should render with identity error 1`] = `
   border-radius: 5px;
   cursor: pointer;
   box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15),0 1px 3px 0 rgba(68, 74, 87, 0.25);
-  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: #798291;
   color: #fff;
   background-color: #313d3e;
@@ -162,7 +162,8 @@ exports[`GitGatewayAuthenticationPage should render with no identity error 1`] =
 }
 
 .emotion-2 {
-  width: 300px;
+  width: auto;
+  max-width: 300px;
   height: auto;
 }
 
@@ -171,10 +172,9 @@ exports[`GitGatewayAuthenticationPage should render with no identity error 1`] =
   border-radius: 5px;
   cursor: pointer;
   box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15),0 1px 3px 0 rgba(68, 74, 87, 0.25);
-  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: #798291;
   color: #fff;
   background-color: #313d3e;
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/package.json b/packages/decap-cms-core/package.json
index e65f70c8ef3a..8e23b2da290a 100644
--- a/packages/decap-cms-core/package.json
+++ b/packages/decap-cms-core/package.json
@@ -56,8 +56,8 @@
     "react-polyglot": "^0.7.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scroll-sync": "^0.9.0",
-    "react-split-pane": "^0.1.85",
+    "react-scroll-sync": "^0.11.2",
+    "react-split-pane": "^0.1.92",
     "react-toastify": "^9.1.1",
     "react-topbar-progress-indicator": "^4.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
diff --git a/packages/decap-cms-core/src/bootstrap.js b/packages/decap-cms-core/src/bootstrap.js
index dd236d35dbcb..1a3f3e96e5c1 100644
--- a/packages/decap-cms-core/src/bootstrap.js
+++ b/packages/decap-cms-core/src/bootstrap.js
@@ -47,6 +47,17 @@ function bootstrap(opts = {}) {
     console.log(`decap-cms-core ${DECAP_CMS_CORE_VERSION}`);
   }
 
+  /**
+   * Create meta tag for viewport if it doesn't exist.
+   */
+  const viewportMetaTag = document.querySelector('meta[name="viewport"]');
+  if (!viewportMetaTag) {
+    const meta = document.createElement('meta');
+    meta.name = 'viewport';
+    meta.content = 'width=device-width, initial-scale=1.0';
+    document.head.appendChild(meta);
+  }
+
   /**
    * Get DOM element where app will mount.
    */
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..69f70af3209d 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 7d7471872d4c..72fbfa40ad59 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 b5f0b1fac865..cb0292b606d1 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__/NestedCollection.spec.js.snap b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap
index b643246f4411..22a3cd6977f4 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap
@@ -13,8 +13,8 @@ exports[`NestedCollection should render connected component 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
-  padding-left: 18px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(1 * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 }
 
@@ -99,8 +99,8 @@ exports[`NestedCollection should render connected component 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
-  padding-left: 34px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(2 * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 }
 
@@ -185,8 +185,8 @@ exports[`NestedCollection should render connected component 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
-  padding-left: 34px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(2 * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 }
 
@@ -276,8 +276,8 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
-  padding-left: 18px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(1 * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 }
 
@@ -362,8 +362,8 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
-  padding-left: 34px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(2 * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 }
 
@@ -448,8 +448,8 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
-  padding-left: 34px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(2 * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 }
 
@@ -539,8 +539,8 @@ exports[`NestedCollection should render correctly with no entries 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
-  padding-left: 18px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
+  padding-left: calc(1 * clamp(12px, 2vw, 20px));
   border-left: 2px solid #fff;
 }
 
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..a611f1647e85 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,14 +15,23 @@ 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;
+  line-height: 1.5;
   padding: 0;
-  margin: 10px 20px;
+  margin: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
   color: #313d3e;
 }
 
@@ -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,14 +83,23 @@ 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;
+  line-height: 1.5;
   padding: 0;
-  margin: 10px 20px;
+  margin: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
   color: #313d3e;
 }
 
@@ -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,14 +150,23 @@ 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;
+  line-height: 1.5;
   padding: 0;
-  margin: 10px 20px;
+  margin: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
   color: #313d3e;
 }
 
@@ -166,7 +187,7 @@ exports[`Sidebar should render sidebar with a simple collection 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px 18px;
+  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
   border-left: 2px solid #fff;
   z-index: -1;
 }
@@ -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,14 +254,23 @@ 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;
+  line-height: 1.5;
   padding: 0;
-  margin: 10px 20px;
+  margin: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
   color: #313d3e;
 }
 
@@ -263,7 +291,7 @@ exports[`Sidebar should render sidebar without search 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   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/Editor/EditorControlPane/EditorControl.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
index a5467c121565..adc5361dc0f7 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -72,7 +72,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 dae2d3d3a241..46905c5cb761 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 cad473866aa2..4635410ac0f1 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: 768px) {
+    height: 100%;
+    position: absolute;
+    min-width: 768px;
+    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,34 @@ function isPreviewEnabled(collection, entry) {
 
 class EditorInterface extends Component {
   state = {
+    isMobile: window.innerWidth <= 768,
     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 = () => {
+    const isMobile = window.innerWidth <= 768;
+    if (isMobile !== this.state.isMobile) {
+      // When switching between desktop and mobile, ensure the value doesn't exceed 80% of the screen
+      const splitPanePosition = parseInt(localStorage.getItem(SPLIT_PANE_POSITION), 10);
+      const adjustedPosition = isMobile
+        ? Math.min(splitPanePosition || window.innerHeight * 0.4, window.innerHeight * 0.8)
+        : Math.min(splitPanePosition || window.innerWidth * 0.5, window.innerWidth * 0.8);
+      localStorage.setItem(SPLIT_PANE_POSITION, adjustedPosition);
+    }
+    this.setState({ isMobile });
+  };
+
   handleFieldClick = path => {
     this.controlPaneRef?.focus(path);
   };
@@ -243,8 +308,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);
@@ -283,13 +347,17 @@ class EditorInterface extends Component {
       : entry;
 
     const editorWithPreview = (
-      <ScrollSync enabled={this.state.scrollSyncEnabled}>
+      <ScrollSync enabled={scrollSyncEnabled}>
         <div>
           <ReactSplitPaneGlobalStyles />
           <StyledSplitPane
+            key={isMobile ? 'mobile' : 'desktop'} // Force reinitialization on view change
+            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 c4be48281c07..8a0135f562d4 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,42 @@ 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 +131,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 +147,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 +167,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 +189,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 +221,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..6dfe259e5103 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,39 +3,43 @@
 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -44,11 +48,11 @@ exports[`EditorToolbar should render normal save button 1`] = `
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -61,10 +65,18 @@ exports[`EditorToolbar should render normal save button 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -72,6 +84,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -80,12 +93,11 @@ exports[`EditorToolbar should render normal save button 1`] = `
 
 .emotion-13 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-13 .e1jeq5dr0 {
@@ -96,15 +108,14 @@ exports[`EditorToolbar should render normal save button 1`] = `
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -123,8 +134,12 @@ exports[`EditorToolbar should render normal save button 1`] = `
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -138,32 +153,22 @@ exports[`EditorToolbar should render normal save button 1`] = `
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-17 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -175,25 +180,36 @@ exports[`EditorToolbar should render normal save button 1`] = `
 }
 
 .emotion-21 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-21 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -259,39 +275,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -300,11 +320,11 @@ exports[`EditorToolbar should render normal save button 2`] = `
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -317,10 +337,18 @@ exports[`EditorToolbar should render normal save button 2`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -328,6 +356,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -336,12 +365,11 @@ exports[`EditorToolbar should render normal save button 2`] = `
 
 .emotion-13 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-13 .e1jeq5dr0 {
@@ -352,15 +380,14 @@ exports[`EditorToolbar should render normal save button 2`] = `
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -379,8 +406,12 @@ exports[`EditorToolbar should render normal save button 2`] = `
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -394,32 +425,22 @@ exports[`EditorToolbar should render normal save button 2`] = `
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-17 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -431,25 +452,36 @@ exports[`EditorToolbar should render normal save button 2`] = `
 }
 
 .emotion-21 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-21 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -515,39 +547,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -556,11 +592,11 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -573,10 +609,18 @@ exports[`EditorToolbar should render with default props 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -584,6 +628,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -594,57 +639,36 @@ exports[`EditorToolbar should render with default props 1`] = `
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #ddf5f9;
   color: #117888;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-14 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -656,25 +680,36 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 .emotion-18 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-18 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -730,39 +765,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -771,11 +810,11 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -788,10 +827,18 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -799,6 +846,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -809,27 +857,16 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -838,12 +875,11 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-15 .e1jeq5dr0 {
@@ -854,15 +890,14 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -882,8 +917,12 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -897,32 +936,22 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-19 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -934,25 +963,36 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 }
 
 .emotion-23 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-23 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1020,39 +1060,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -1061,11 +1105,11 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1078,10 +1122,18 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -1089,6 +1141,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1099,27 +1152,16 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -1128,12 +1170,11 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-15 .emotion-23 {
@@ -1144,15 +1185,14 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -1172,8 +1212,12 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -1247,6 +1291,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1258,25 +1303,36 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 }
 
 .emotion-30 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-30 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1371,39 +1427,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -1412,11 +1472,11 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1429,10 +1489,18 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -1440,6 +1508,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1450,27 +1519,16 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -1479,12 +1537,11 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-15 .e1jeq5dr0 {
@@ -1495,15 +1552,14 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -1523,8 +1579,12 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -1538,32 +1598,22 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-19 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1575,25 +1625,36 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-23 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-23 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1661,39 +1722,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -1702,11 +1767,11 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1719,10 +1784,18 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -1730,6 +1803,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1740,27 +1814,16 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -1769,12 +1832,11 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-15 .emotion-23 {
@@ -1785,15 +1847,14 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -1813,8 +1874,12 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -1870,6 +1935,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1881,25 +1947,36 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-28 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-28 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -1989,39 +2066,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2030,11 +2111,11 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2047,10 +2128,18 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -2058,6 +2147,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2068,27 +2158,16 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -2097,12 +2176,11 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-15 .e1jeq5dr0 {
@@ -2113,15 +2191,14 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -2141,8 +2218,12 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -2156,32 +2237,22 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-19 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2193,25 +2264,36 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-23 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-23 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -2279,39 +2361,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2320,11 +2406,11 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2337,10 +2423,18 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -2348,6 +2442,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2358,27 +2453,16 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -2387,12 +2471,11 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 
 .emotion-15 {
   position: relative;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 0 10px;
 }
 
 .emotion-15 .emotion-23 {
@@ -2403,15 +2486,14 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
   display: block;
-  padding-left: 20px;
-  padding-right: 40px;
+  padding-left: clamp(10px, 2vw, 20px);
+  padding-right: clamp(20px, 2vw, 40px);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
@@ -2431,8 +2513,12 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   content: '';
   display: block;
   position: absolute;
-  top: 16px;
-  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: clamp(5px, 1vw, 10px);
   color: currentColor;
 }
 
@@ -2506,6 +2592,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2517,25 +2604,36 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-30 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-30 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -2630,39 +2728,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2671,11 +2773,11 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2688,10 +2790,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -2699,6 +2809,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2709,27 +2820,16 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -2740,32 +2840,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-14 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2777,25 +2867,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-18 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -2850,39 +2951,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -2891,11 +2996,11 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2908,10 +3013,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -2919,6 +3032,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2929,27 +3043,16 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -2961,6 +3064,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2972,25 +3076,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-16 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-16 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3040,39 +3155,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3081,11 +3200,11 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3098,10 +3217,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -3109,6 +3236,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3119,27 +3247,16 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -3150,32 +3267,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-14 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3187,25 +3294,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-18 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3260,39 +3378,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3301,11 +3423,11 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3318,10 +3440,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -3329,6 +3459,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3339,27 +3470,16 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -3370,32 +3490,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-14 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3407,25 +3517,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-18 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3480,39 +3601,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3521,11 +3646,11 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3538,10 +3663,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -3549,6 +3682,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3559,27 +3693,16 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -3590,32 +3713,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-14 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3627,25 +3740,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-18 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
       to=""
     >
       <div
@@ -3700,39 +3824,43 @@ 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;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  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) {
+  .emotion-0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
 }
 
 .emotion-2 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
-  margin-right: 16px;
 }
 
 .emotion-4 {
   color: #313d3e;
-  font-size: 14px;
+  font-size: clamp(12px, 3.3vw, 14px);
 }
 
 .emotion-6 {
   margin-top: 6px;
-  font-size: 13px;
+  font-size: clamp(12px, 1.3vw, 13px);
   line-height: 1;
   display: inline-block;
   font-weight: 700;
@@ -3741,11 +3869,11 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3758,10 +3886,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background-color: #fff;
+  padding: 0 clamp(12px, 2.4vw, 24px);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
+}
+
+@media (max-width: 1000px) {
+  .emotion-8 {
+    grid-area: main;
+    padding: clamp(8px, 1.6vw, 16px);
+  }
 }
 
 .emotion-10 {
@@ -3769,6 +3905,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3779,27 +3916,16 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #e8f5fe;
   color: #3a69c7;
 }
 
-@media (max-width: 1200px) {
-  .emotion-12 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-12[disabled] {
   background-color: #eff0f4;
   color: #798291;
@@ -3810,32 +3936,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   border: 0;
   border-radius: 5px;
   cursor: pointer;
-  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: #798291;
   color: #fff;
-  margin: 0 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
   color: #D60032;
 }
 
-@media (max-width: 1200px) {
-  .emotion-14 {
-    padding: 0 10px;
-  }
-}
-
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: clamp(12px, 2.4vw, 24px);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3847,25 +3963,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-18 {
-  height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: 0 solid #dfdfe3;
+  padding: 0 clamp(8px, 1.6vw, 16px);
   border-left-width: 1px;
-  padding: 0 7px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1000px) {
+  .emotion-18 {
+    grid-area: meta;
+    border: none;
+  }
 }
 
 <div
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      classname="css-1cgn7bl-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 277e5a0d5718..8c57975e0a6c 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-list/src/__tests__/__snapshots__/ListControl.spec.js.snap b/packages/decap-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap
index b5b38ac07c81..6878f9178863 100644
--- a/packages/decap-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap
+++ b/packages/decap-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap
@@ -143,7 +143,7 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
@@ -391,7 +391,7 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
@@ -669,7 +669,7 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
@@ -928,7 +928,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
@@ -1206,7 +1206,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
@@ -1484,7 +1484,7 @@ exports[`ListControl should render list with fields with default collapse ("true
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
@@ -1944,7 +1944,7 @@ exports[`ListControl should render list with nested object 1`] = `
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
@@ -2222,7 +2222,7 @@ exports[`ListControl should render list with nested object with collapse = false
   border-top: 0;
   color: inherit;
   background-color: #dfdfe3;
-  padding: 13px;
+  padding: clamp(10px, 1.3vw, 13px);
   border-radius: 0 0 5px 5px;
 }
 
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 860939fbb979..c19b7fc258a4 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
@@ -262,7 +262,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}
