diff --git a/packages/next/src/elements/DocumentHeader/Tabs/index.scss b/packages/next/src/elements/DocumentHeader/Tabs/index.scss
index 4affec9ce..c06f39cb9 100644
--- a/packages/next/src/elements/DocumentHeader/Tabs/index.scss
+++ b/packages/next/src/elements/DocumentHeader/Tabs/index.scss
@@ -37,7 +37,6 @@
 
     &__tabs {
       padding: 0;
-      margin-left: var(--gutter-h);
     }
   }
 
diff --git a/packages/next/src/elements/DocumentHeader/index.scss b/packages/next/src/elements/DocumentHeader/index.scss
index 989c8c3d9..c90eb2315 100644
--- a/packages/next/src/elements/DocumentHeader/index.scss
+++ b/packages/next/src/elements/DocumentHeader/index.scss
@@ -40,8 +40,6 @@
 
     &__title {
       width: 100%;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
     }
   }
 
diff --git a/packages/next/src/elements/LeaveWithoutSaving/index.scss b/packages/next/src/elements/LeaveWithoutSaving/index.scss
index 6cf46bd72..22724837a 100644
--- a/packages/next/src/elements/LeaveWithoutSaving/index.scss
+++ b/packages/next/src/elements/LeaveWithoutSaving/index.scss
@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
+    padding: base(2);
   }
 
   &__content {
diff --git a/packages/next/src/elements/Nav/index.client.tsx b/packages/next/src/elements/Nav/index.client.tsx
index 481d9b7df..2ee4b320a 100644
--- a/packages/next/src/elements/Nav/index.client.tsx
+++ b/packages/next/src/elements/Nav/index.client.tsx
@@ -98,11 +98,7 @@ export const DefaultNavClient: React.FC = () => {
                   key={i}
                   tabIndex={!navOpen ? -1 : undefined}
                 >
-                  {activeCollection && (
-                    <span className={`${baseClass}__link-icon`}>
-                      <ChevronIcon direction="right" />
-                    </span>
-                  )}
+                  {activeCollection && <div className={`${baseClass}__link-indicator`} />}
                   <span className={`${baseClass}__link-label`}>{entityLabel}</span>
                 </LinkElement>
               )
diff --git a/packages/next/src/elements/Nav/index.scss b/packages/next/src/elements/Nav/index.scss
index 3d8fda872..46adf33bc 100644
--- a/packages/next/src/elements/Nav/index.scss
+++ b/packages/next/src/elements/Nav/index.scss
@@ -10,6 +10,7 @@
   border-right: 1px solid var(--theme-elevation-100);
   opacity: 0;
   transition: opacity var(--nav-trans-time) ease-in-out;
+  overflow: hidden;
 
   &--nav-open {
     opacity: 1;
@@ -18,7 +19,7 @@
   &__header {
     position: absolute;
     top: 0;
-    width: 100%;
+    width: 100vw;
     height: var(--app-header-height);
   }
 
@@ -26,6 +27,7 @@
     z-index: 1;
     position: relative;
     height: 100%;
+    width: 100%;
   }
 
   &__mobile-close {
@@ -33,7 +35,7 @@
     background: none;
     border: 0;
     outline: 0;
-    padding: calc(var(--base) * 0.75) var(--gutter-h);
+    padding: base(0.8) 0;
   }
 
   &__scroll {
@@ -85,7 +87,9 @@
   nav {
     a {
       position: relative;
-      padding: base(0.125) base(1.5) base(0.125) 0;
+      padding-block: base(0.125);
+      padding-inline-start: 0;
+      padding-inline-end: base(1.5);
       display: flex;
       text-decoration: none;
 
@@ -112,10 +116,16 @@
     align-items: center;
   }
 
-  &__link-icon {
-    margin-right: calc(var(--base) * 0.25);
-    top: -1px;
-    position: relative;
+  &__link-indicator {
+    position: absolute;
+    display: block;
+    // top: 0;
+    inset-inline-start: base(-1);
+    width: 2px;
+    height: 16px;
+    border-start-end-radius: 2px;
+    border-end-end-radius: 2px;
+    background: var(--theme-text);
   }
 
   @include mid-break {
diff --git a/packages/next/src/scss/app.scss b/packages/next/src/scss/app.scss
index 4864afb13..58777f300 100644
--- a/packages/next/src/scss/app.scss
+++ b/packages/next/src/scss/app.scss
@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }
diff --git a/packages/next/src/scss/type.scss b/packages/next/src/scss/type.scss
index 66af15f77..47fee9d9c 100644
--- a/packages/next/src/scss/type.scss
+++ b/packages/next/src/scss/type.scss
@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {
diff --git a/packages/next/src/views/API/index.scss b/packages/next/src/views/API/index.scss
index 26cc22a17..9b549bc47 100644
--- a/packages/next/src/views/API/index.scss
+++ b/packages/next/src/views/API/index.scss
@@ -111,8 +111,7 @@
       position: relative;
       width: 100%;
       top: 0;
-      padding-right: var(--gutter-h);
-      padding-left: var(--gutter-h);
+      padding-inline-end: var(--gutter-h);
     }
   }
 }
diff --git a/packages/next/src/views/List/Default/index.scss b/packages/next/src/views/List/Default/index.scss
index a57930c70..d5a483dda 100644
--- a/packages/next/src/views/List/Default/index.scss
+++ b/packages/next/src/views/List/Default/index.scss
@@ -15,7 +15,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: base(0.75);
+    gap: base(0.8);
 
     h1 {
       margin: 0;
@@ -95,18 +95,18 @@
     position: fixed;
     bottom: 0;
     z-index: 10;
-    padding: base(0.75) 0;
+    padding: base(0.8) 0;
     width: 100%;
     background-color: var(--theme-bg);
 
     .btn {
-      margin: 0 0 0 base(0.5);
+      margin: 0 0 0 base(0.4);
     }
 
     .btn {
       background-color: var(--theme-elevation-100);
       cursor: pointer;
-      padding: 0 base(0.25);
+      padding: 0 base(0.4);
       border-radius: $style-radius-s;
 
       &:hover {
@@ -180,13 +180,6 @@
   }
 
   @include small-break {
-    margin-top: 0;
-    margin-bottom: base(3);
-
-    &__header {
-      .pill {
-        top: -6px;
-      }
-    }
+    margin-bottom: base(2.4);
   }
 }
diff --git a/packages/richtext-lexical/src/features/blocks/component/index.scss b/packages/richtext-lexical/src/features/blocks/component/index.scss
index 079eb733b..75741fcea 100644
--- a/packages/richtext-lexical/src/features/blocks/component/index.scss
+++ b/packages/richtext-lexical/src/features/blocks/component/index.scss
@@ -9,9 +9,13 @@
   display: flex;
   flex-direction: column;
   gap: calc(var(--base) / 2);
-  font-family: var(
-    --font-body
-  ); // Reset font to non-serif, body font, as the lexical editor parent uses a serif font.
+  @extend %body;
+
+  &__row {
+    .collapsible__toggle-wrap {
+      padding-inline-start: base(0.4);
+    }
+  }
 
   margin: 0 0 1.5em;
 
diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
index 10bd48a80..4a218392c 100644
--- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
+++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
@@ -2,7 +2,7 @@
 
 html[data-theme='light'] {
   .slash-menu-popup {
-    @include shadow-m;
+    @include shadow-lg;
   }
 }
 
diff --git a/packages/richtext-lexical/src/scss/app.scss b/packages/richtext-lexical/src/scss/app.scss
index 4864afb13..58777f300 100644
--- a/packages/richtext-lexical/src/scss/app.scss
+++ b/packages/richtext-lexical/src/scss/app.scss
@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }
diff --git a/packages/richtext-lexical/src/scss/type.scss b/packages/richtext-lexical/src/scss/type.scss
index 66af15f77..47fee9d9c 100644
--- a/packages/richtext-lexical/src/scss/type.scss
+++ b/packages/richtext-lexical/src/scss/type.scss
@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {
diff --git a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
index 3f27ec17a..af09f5914 100644
--- a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
+++ b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
@@ -35,11 +35,11 @@
     height: base(1);
 
     svg {
-      width: base(2.75);
-      height: base(2.75);
+      width: base(2);
+      height: base(2);
       position: relative;
-      left: base(-0.825);
-      top: base(-0.825);
+      inset-inline-start: base(-0.5);
+      top: base(-0.5);
 
       .stroke {
         stroke-width: 2px;
diff --git a/packages/richtext-slate/src/scss/app.scss b/packages/richtext-slate/src/scss/app.scss
index 4864afb13..58777f300 100644
--- a/packages/richtext-slate/src/scss/app.scss
+++ b/packages/richtext-slate/src/scss/app.scss
@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }
diff --git a/packages/richtext-slate/src/scss/type.scss b/packages/richtext-slate/src/scss/type.scss
index 66af15f77..47fee9d9c 100644
--- a/packages/richtext-slate/src/scss/type.scss
+++ b/packages/richtext-slate/src/scss/type.scss
@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {
diff --git a/packages/ui/src/elements/AppHeader/index.scss b/packages/ui/src/elements/AppHeader/index.scss
index 81aba4b67..4be3584bf 100644
--- a/packages/ui/src/elements/AppHeader/index.scss
+++ b/packages/ui/src/elements/AppHeader/index.scss
@@ -57,7 +57,7 @@
     height: 100%;
     flex-grow: 1;
     justify-content: space-between;
-    overflow: hidden;
+    width: 100%;
   }
 
   &__account {
@@ -90,12 +90,14 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    width: 100%;
   }
 
   &__step-nav-wrapper {
-    flex: 1;
+    flex-grow: 0;
     overflow: auto;
     display: flex;
+    width: 100%;
 
     &::-webkit-scrollbar {
       display: none;
@@ -156,7 +158,7 @@
   }
 
   @include small-break {
-    &__localizer {
+    &__localizer.localizer {
       right: base(2);
     }
 
diff --git a/packages/ui/src/elements/Card/index.scss b/packages/ui/src/elements/Card/index.scss
index 0bdd8a863..bd24f6c4f 100644
--- a/packages/ui/src/elements/Card/index.scss
+++ b/packages/ui/src/elements/Card/index.scss
@@ -17,12 +17,12 @@
   gap: base(0.8);
 
   &__title {
-    @extend %h4;
+    @extend %h5;
     letter-spacing: 0;
     font-weight: 600;
-    line-height: base(1.2);
+    line-height: base(0.8);
     width: 100%;
-    margin: 0;
+    margin: base(0.1) 0;
   }
 
   &__actions {
diff --git a/packages/ui/src/elements/Collapsible/index.scss b/packages/ui/src/elements/Collapsible/index.scss
index 6bf783ccb..412913a4c 100644
--- a/packages/ui/src/elements/Collapsible/index.scss
+++ b/packages/ui/src/elements/Collapsible/index.scss
@@ -17,9 +17,10 @@
     gap: base(0.2);
     border-top-right-radius: $style-radius-m;
     border-top-left-radius: $style-radius-m;
+    width: 100%;
 
     & > * {
-      z-index: 2;
+      z-index: 1;
     }
 
     &:has(.collapsible__drag) {
@@ -87,6 +88,8 @@
     left: 0;
     pointer-events: none;
     width: 100%;
+    overflow: hidden;
+    max-width: 100%;
   }
 
   &__header-wrap--has-drag-handle {
diff --git a/packages/ui/src/elements/DeleteDocument/index.scss b/packages/ui/src/elements/DeleteDocument/index.scss
index 64e439872..b4f33a229 100644
--- a/packages/ui/src/elements/DeleteDocument/index.scss
+++ b/packages/ui/src/elements/DeleteDocument/index.scss
@@ -6,6 +6,7 @@
   align-items: center;
   height: 100%;
   justify-content: center;
+  padding: base(2);
 
   &__template {
     z-index: 1;
diff --git a/packages/ui/src/elements/DeleteMany/index.scss b/packages/ui/src/elements/DeleteMany/index.scss
index a94400160..9b287fe65 100644
--- a/packages/ui/src/elements/DeleteMany/index.scss
+++ b/packages/ui/src/elements/DeleteMany/index.scss
@@ -6,6 +6,7 @@
   align-items: center;
   height: 100%;
   justify-content: center;
+  padding: base(2);
 
   &__template {
     z-index: 1;
diff --git a/packages/ui/src/elements/DocumentControls/index.scss b/packages/ui/src/elements/DocumentControls/index.scss
index 53be9b14a..75722df89 100644
--- a/packages/ui/src/elements/DocumentControls/index.scss
+++ b/packages/ui/src/elements/DocumentControls/index.scss
@@ -24,7 +24,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    align-items: center;
+    align-items: space-between;
     gap: var(--base);
     padding-bottom: 1px;
     z-index: 4;
@@ -36,6 +36,7 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    padding: base(0.8) 0;
   }
 
   &__meta {
@@ -46,6 +47,10 @@
     gap: var(--base);
     margin: 0;
     width: 100%;
+
+    & button {
+      margin: 0;
+    }
   }
 
   &__list-item {
@@ -64,6 +69,7 @@
     white-space: nowrap;
     margin: 0;
     font-weight: 600;
+    line-height: base(1.2);
   }
 
   &__label {
@@ -141,7 +147,7 @@
     // The timestamps and meta can scroll past
     // The same container needs to the sticky, though
     // So we use a static height with a negative top equal to the meta height plus top padding
-    top: calc(var(--base) * -2);
+    top: base(-2.8);
     padding-right: 0;
     padding-left: 0;
 
@@ -154,8 +160,7 @@
     &__content {
       width: 100%;
       overflow: auto;
-      height: calc(var(--base) * 2);
-
+      padding-inline: base(2);
       // this container has a fixed height
       // this means the scrollbar (when present) overlaps the content
       &::-webkit-scrollbar {
@@ -166,14 +171,13 @@
     &__meta {
       width: auto;
       gap: calc(var(--base) / 2);
-      margin-left: var(--gutter-h);
 
       &::after {
         content: '';
         display: block;
-        position: sticky;
+        position: absolute;
         right: 0;
-        width: calc(var(--base) * 2);
+        width: base(0.8);
         height: var(--base);
         background: linear-gradient(to right, transparent, var(--theme-bg));
         flex-shrink: 0;
@@ -183,6 +187,7 @@
     }
 
     &__controls-wrapper {
+      background-color: var(--theme-bg);
       width: 100%;
       transform: translate3d(0, 0, 0);
       padding-right: var(--gutter-h);
@@ -215,4 +220,10 @@
       }
     }
   }
+
+  @include small-break {
+    &__content {
+      padding-inline: base(0.8);
+    }
+  }
 }
diff --git a/packages/ui/src/elements/DuplicateDocument/index.scss b/packages/ui/src/elements/DuplicateDocument/index.scss
index f14eb3a8f..b9b6c3441 100644
--- a/packages/ui/src/elements/DuplicateDocument/index.scss
+++ b/packages/ui/src/elements/DuplicateDocument/index.scss
@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     height: 100%;
+    padding: base(2);
 
     .btn {
       margin-right: $baseline;
diff --git a/packages/ui/src/elements/EditMany/index.scss b/packages/ui/src/elements/EditMany/index.scss
index 611d3f66f..3fb212f24 100644
--- a/packages/ui/src/elements/EditMany/index.scss
+++ b/packages/ui/src/elements/EditMany/index.scss
@@ -63,17 +63,11 @@
       height: base(1);
 
       svg {
-        width: base(2.75);
-        height: base(2.75);
+        width: base(2);
+        height: base(2);
         position: relative;
-        [dir='ltr'] & {
-          left: base(-0.825);
-        }
-
-        [dir='rtl'] & {
-          right: base(-0.825);
-        }
-        top: base(-0.825);
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
 
         .stroke {
           stroke-width: 2px;
diff --git a/packages/ui/src/elements/GenerateConfirmation/index.scss b/packages/ui/src/elements/GenerateConfirmation/index.scss
index 209dfde97..79b31979a 100644
--- a/packages/ui/src/elements/GenerateConfirmation/index.scss
+++ b/packages/ui/src/elements/GenerateConfirmation/index.scss
@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     position: relative;
diff --git a/packages/ui/src/elements/ListControls/index.scss b/packages/ui/src/elements/ListControls/index.scss
index 01010848e..70bb0e972 100644
--- a/packages/ui/src/elements/ListControls/index.scss
+++ b/packages/ui/src/elements/ListControls/index.scss
@@ -48,10 +48,22 @@
     &__wrap {
       flex-wrap: wrap;
       background-color: unset;
+      padding: 0;
+      position: relative;
+    }
+
+    .icon--search {
+      position: absolute;
+      top: base(0.4);
+      inset-inline-start: base(0.4);
+      z-index: 1;
     }
 
     .search-filter {
       width: 100%;
+      input {
+        padding: base(0.4) base(2);
+      }
     }
 
     &__buttons-wrap {
@@ -64,11 +76,8 @@
       }
 
       .pill {
-        padding: base(0.5) base(1);
-
-        svg {
-          margin-left: auto;
-        }
+        padding: base(0.2) base(0.2) base(0.2) base(0.4);
+        justify-content: space-between;
       }
     }
 
diff --git a/packages/ui/src/elements/ListDrawer/index.scss b/packages/ui/src/elements/ListDrawer/index.scss
index f98d6b13c..fd64fc51e 100644
--- a/packages/ui/src/elements/ListDrawer/index.scss
+++ b/packages/ui/src/elements/ListDrawer/index.scss
@@ -65,11 +65,11 @@
     height: base(1);
 
     svg {
-      width: base(2.75);
-      height: base(2.75);
+      width: base(2);
+      height: base(2);
       position: relative;
-      left: base(-0.825);
-      top: base(-0.825);
+      inset-inline-start: base(-0.5);
+      top: base(-0.5);
 
       .stroke {
         stroke-width: 2px;
diff --git a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss b/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss
index 37edbc319..d8f885307 100644
--- a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss
+++ b/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss
@@ -5,12 +5,18 @@
   align-items: center;
   white-space: nowrap;
   display: flex;
+  padding-inline-start: base(0.4);
+  padding-inline-end: base(0.1);
+  gap: 0;
+  background-color: var(--theme-elevation-100);
+  border-radius: var(--style-radius-s);
 
   &__label {
     color: var(--theme-elevation-500);
   }
 
   &__chevron {
+    padding: base(0.1);
     .stroke {
       stroke: currentColor;
     }
diff --git a/packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx b/packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx
index 5e7b83c53..400f739fd 100644
--- a/packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx
+++ b/packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx
@@ -22,12 +22,10 @@ export const LocalizerLabel: React.FC<{
       aria-label={ariaLabel || t('general:locale')}
       className={[baseClass, className].filter(Boolean).join(' ')}
     >
-      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}</div>
-      &nbsp;&nbsp;
+      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>
       <span className={`${baseClass}__current-label`}>
         {`${getTranslation(locale.label, i18n)}`}
       </span>
-      &nbsp;
       <ChevronIcon className={`${baseClass}__chevron`} />
     </div>
   )
diff --git a/packages/ui/src/elements/PublishMany/index.scss b/packages/ui/src/elements/PublishMany/index.scss
index 1f94746bf..69ff686f9 100644
--- a/packages/ui/src/elements/PublishMany/index.scss
+++ b/packages/ui/src/elements/PublishMany/index.scss
@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     z-index: 1;
diff --git a/packages/ui/src/elements/Status/index.scss b/packages/ui/src/elements/Status/index.scss
index c1d64fa9d..cfef48ee2 100644
--- a/packages/ui/src/elements/Status/index.scss
+++ b/packages/ui/src/elements/Status/index.scss
@@ -23,6 +23,7 @@
     justify-content: center;
     align-items: center;
     height: 100%;
+    padding: base(2);
 
     &__toggle {
       @extend %btn-reset;
diff --git a/packages/ui/src/elements/StayLoggedIn/index.scss b/packages/ui/src/elements/StayLoggedIn/index.scss
index b7c97a799..28459881e 100644
--- a/packages/ui/src/elements/StayLoggedIn/index.scss
+++ b/packages/ui/src/elements/StayLoggedIn/index.scss
@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
+    padding: base(2);
   }
 
   &__content {
diff --git a/packages/ui/src/elements/StepNav/index.scss b/packages/ui/src/elements/StepNav/index.scss
index dd3e93c8b..927a6dac9 100644
--- a/packages/ui/src/elements/StepNav/index.scss
+++ b/packages/ui/src/elements/StepNav/index.scss
@@ -75,6 +75,6 @@
   }
 
   @include small-break {
-    gap: calc(var(--base) / 4);
+    gap: base(0.4);
   }
 }
diff --git a/packages/ui/src/elements/UnpublishMany/index.scss b/packages/ui/src/elements/UnpublishMany/index.scss
index ce3c40bcb..04d8df4a4 100644
--- a/packages/ui/src/elements/UnpublishMany/index.scss
+++ b/packages/ui/src/elements/UnpublishMany/index.scss
@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     z-index: 1;
diff --git a/packages/ui/src/fields/Blocks/SectionTitle/index.scss b/packages/ui/src/fields/Blocks/SectionTitle/index.scss
index 107e8d851..5d9ee8d12 100644
--- a/packages/ui/src/fields/Blocks/SectionTitle/index.scss
+++ b/packages/ui/src/fields/Blocks/SectionTitle/index.scss
@@ -2,15 +2,20 @@
 
 .section-title {
   position: relative;
-  min-width: 0;
+  width: 100%;
+  max-width: 100%;
   pointer-events: all;
+  display: flex;
+  overflow: hidden;
 
   &:after {
     display: block;
     content: attr(data-value) ' ';
     visibility: hidden;
     white-space: nowrap;
-    min-width: base(2.5);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &:after,
@@ -19,13 +24,18 @@
     font-weight: 600;
     font-size: base(0.625);
     padding: 0;
+    width: 100%;
   }
 
   &__input {
     color: var(--theme-elevation-800);
     background-color: transparent;
     border: none;
+    min-width: min-content;
     width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
     resize: none;
     appearance: none;
diff --git a/packages/ui/src/fields/Blocks/index.scss b/packages/ui/src/fields/Blocks/index.scss
index 9da705be8..d3622c363 100644
--- a/packages/ui/src/fields/Blocks/index.scss
+++ b/packages/ui/src/fields/Blocks/index.scss
@@ -61,6 +61,7 @@
   &__block-header {
     display: inline-flex;
     max-width: 100%;
+    width: 100%;
     overflow: hidden;
     gap: base(0.375);
   }
diff --git a/packages/ui/src/scss/app.scss b/packages/ui/src/scss/app.scss
index 4864afb13..9aa6d7a7f 100644
--- a/packages/ui/src/scss/app.scss
+++ b/packages/ui/src/scss/app.scss
@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
+    --app-header-height: calc(var(--base) * 2.8);
     --doc-controls-height: calc(var(--base) * 2.5);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }
diff --git a/packages/ui/src/scss/type.scss b/packages/ui/src/scss/type.scss
index 66af15f77..47fee9d9c 100644
--- a/packages/ui/src/scss/type.scss
+++ b/packages/ui/src/scss/type.scss
@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {
diff --git a/packages/ui/src/scss/vars.scss b/packages/ui/src/scss/vars.scss
index 7ac4d321d..22b42d6a0 100644
--- a/packages/ui/src/scss/vars.scss
+++ b/packages/ui/src/scss/vars.scss
@@ -18,7 +18,7 @@ $baseline-body-size: 13px !default;
 $baseline: math.div($baseline-px, $baseline-body-size) + rem;
 
 @function base($multiplier) {
-  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+  @return ($baseline-px * $multiplier);
 }
 
 //////////////////////////////