diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 3128381f5..fad2bfca7 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -1,18 +1,27 @@
 .color-input {
   display: inline-flex;
+  flex-wrap: wrap;
+  max-width: 10em;
+
+  &.-compact {
+    max-width: none;
+  }
 
   .label {
     flex: 1 1 auto;
+    grid-area: label;
   }
 
   .opt {
+    grid-area: checkbox;
     margin-right: 0.5em;
   }
 
   &-field.input {
-    display: inline-flex;
-    flex: 0 0 0;
-    max-width: 9em;
+    flex: 1 1 10em;
+    max-width: 10em;
+    grid-area: input;
+    display: flex;
     align-items: stretch;
 
     input {
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 266ad4d4e..58aee575c 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="color-input style-control"
-    :class="{ disabled: !present || disabled }"
+    :class="{ disabled: !present || disabled, '-compact': compact }"
   >
     <label
       :for="name"
@@ -127,6 +127,10 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    compact: {
+      required: false,
+      type: Boolean
     }
   },
   emits: ['update:modelValue'],
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 0d81128c7..0a0f9541e 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -104,6 +104,7 @@
         v-model="colorOverride"
         class="input-color-input"
         fallback="#606060"
+        :compact="true"
         :label="$t('settings.style.shadows.color_override')"
       />
     </div>
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index 041219feb..19de233d7 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -8,7 +8,7 @@
       class="label"
       :class="{ faint: !present || disabled }"
     >
-      {{ label }}
+      {{ label || $t('settings.style.themes3.editor.opacity') }}
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 252928b9e..3040696d0 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -1,44 +1,52 @@
 <template>
   <div
     class="PaletteEditor"
-    :class="{ '-compact': compact, '-apply': apply }"
+    :class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
   >
-    <ColorInput
-      v-for="key in paletteKeys"
-      :key="key"
-      :name="key"
-      :model-value="props.modelValue[key]"
-      :fallback="fallback(key)"
-      :label="$t('settings.style.themes3.palette.' + key)"
-      @update:model-value="value => updatePalette(key, value)"
-    />
-    <button
-      class="btn button-default palette-import-button"
-      @click="importPalette"
-    >
-      <FAIcon icon="file-import" />
-      {{ $t('settings.style.themes3.palette.import') }}
-    </button>
-    <button
-      class="btn button-default palette-export-button"
-      @click="exportPalette"
-    >
-      <FAIcon icon="file-export" />
-      {{ $t('settings.style.themes3.palette.export') }}
-    </button>
-    <button
-      v-if="apply"
-      class="btn button-default palette-apply-button"
-      :disabled="disabled"
-      :class="{ disabled }"
-      @click="applyPalette"
-    >
-      {{ $t('settings.style.themes3.palette.apply') }}
-    </button>
+    <div class="palette">
+      <ColorInput
+        v-for="key in paletteKeys"
+        :key="key"
+        :name="key"
+        :model-value="props.modelValue[key]"
+        :fallback="fallback(key)"
+        :label="$t('settings.style.themes3.palette.' + key)"
+        @update:model-value="value => updatePalette(key, value)"
+      />
+    </div>
+    <div class="buttons">
+      <button
+        class="btn button-default palette-import-button"
+        @click="importPalette"
+      >
+        <FAIcon icon="file-import" />
+        {{ $t('settings.style.themes3.palette.import') }}
+      </button>
+      <button
+        class="btn button-default palette-export-button"
+        @click="exportPalette"
+      >
+        <FAIcon icon="file-export" />
+        {{ $t('settings.style.themes3.palette.export') }}
+      </button>
+    </div>
+    <div class="buttons">
+      <button
+        v-if="apply"
+        class="btn button-default palette-apply-button"
+        :disabled="disabled"
+        :class="{ disabled }"
+        @click="applyPalette"
+      >
+        {{ $t('settings.style.themes3.palette.apply') }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+
 import ColorInput from 'src/components/color_input/color_input.vue'
 import {
   newImporter,
@@ -51,6 +59,8 @@ import {
   faFileExport
 } from '@fortawesome/free-solid-svg-icons'
 
+import { useInterfaceStore } from 'src/stores/interface'
+
 library.add(
   faFileImport,
   faFileExport
@@ -104,6 +114,10 @@ const applyPalette = () => {
   emit('applyPalette', getExportedObject())
 }
 
+const mobile = computed(() => {
+  return useInterfaceStore().layoutType === 'mobile'
+})
+
 const fallback = (key) => {
   if (key === 'accent') {
     return props.modelValue.link
@@ -129,13 +143,28 @@ const updatePalette = (paletteKey, value) => {
 
 <style lang="scss">
 .PaletteEditor {
-  display: grid;
   justify-content: space-around;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(5, 1fr) auto;
   grid-gap: 0.5em;
   align-items: baseline;
 
+  .buttons {
+    margin-top: 0.5em;
+    display: grid;
+    gap: 0.5em
+  }
+
+  .palette {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-auto-flow: row;
+    grid-auto-rows: auto;
+    grid-template-columns: repeat(auto-fill, 10em);
+    grid-gap: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
   .palette-import-button {
     grid-column: 1 / span 2;
   }
@@ -171,23 +200,21 @@ const updatePalette = (paletteKey, value) => {
         grid-column: 1 / span 2;
       }
     }
+  }
 
-    .-mobile & {
-      grid-template-columns: 1fr;
-      grid-template-rows: repeat(10, 1fr) auto;
-
-      .palette-import-button {
-        grid-column: 1;
+  &.-mobile {
+    &.-apply {
+      .palette-apply-button {
+        grid-column: 1 / span 2;
       }
+    }
 
-      .palette-export-button {
-        grid-column: 1;
-      }
+    .color-input {
+      display: grid;
+      gap: 0.5em;
 
-      &.-apply {
-        .palette-apply-button {
-          grid-column: 1;
-        }
+      label {
+        flex: 1;
       }
     }
   }
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index ce5e3fa20..ea685576f 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -128,7 +128,6 @@ export default {
       const props = slot.props
       if (!props) return
       const active = this.activeIndex === index
-      const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
 
       let delayRender = slot.props['delay-render']
       if (delayRender && active) {
@@ -157,6 +156,7 @@ export default {
         </h2>
       )
 
+      const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
       const contentClasses = ['tab-content']
       if (props['full-width']) {
         contentClasses.push('-full-width')
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 78698803e..fd24697b6 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -118,11 +118,15 @@
     .option-list {
       padding-left: 0.25em;
 
+
+      /* stylelint-disable no-descending-specificity */
+      // it makes no sense
       > li {
         margin: 1em 0;
         line-height: 1.5em;
         vertical-align: middle;
       }
+      /* stylelint-enable no-descending-specificity */
 
       &.two-column {
         grid-template-columns: 1fr;
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
index 58ec1e8aa..e589c596f 100644
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -6,7 +6,6 @@
   .palette,
   .theme-notice {
     padding: 0.5em;
-    margin: 1em;
   }
 
   .theme-name {
@@ -14,7 +13,6 @@
     padding-bottom: 0.5em;
   }
 
-
   input[type="file"] {
     padding: 0.25em;
     height: auto;
@@ -61,7 +59,7 @@
     scrollbar-gutter: stable;
     border-radius: var(--roundness);
     border: 1px solid var(--border);
-    margin: -0.5em;
+    margin-bottom: 0.5em;
     margin-top: 0;
   }
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 868fb8bfa..158599a56 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -75,8 +75,6 @@
           <FAIcon icon="folder-open" />
           {{ $t('settings.style.themes3.editor.load_style') }}
         </button>
-      </div>
-      <div class="setting-item">
         <h4>{{ $t('settings.style.themes3.palette.label') }}</h4>
         <div
           v-if="customThemeVersion === 'v3'"
diff --git a/src/components/settings_modal/tabs/clutter_tab.vue b/src/components/settings_modal/tabs/clutter_tab.vue
index 12514c330..aa3b4cb09 100644
--- a/src/components/settings_modal/tabs/clutter_tab.vue
+++ b/src/components/settings_modal/tabs/clutter_tab.vue
@@ -4,32 +4,22 @@
       <h3>{{ $t('settings.interface') }}</h3>
       <ul class="setting-list">
         <li>
-          <BooleanSetting
-            path="alwaysShowSubjectInput"
-            expert="1"
-          >
+          <BooleanSetting path="alwaysShowSubjectInput">
             {{ $t('settings.subject_input_always_show') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            path="minimalScopesMode"
-            expert="1"
-          >
+          <BooleanSetting path="minimalScopesMode">
             {{ $t('settings.minimal_scopes_mode') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            expert="1"
-            path="hidePostStats"
-          >
+          <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
           </BooleanSetting>
         </li>
         <li>
           <BooleanSetting
-            expert="1"
             path="hideUserStats"
           >
             {{ $t('settings.hide_user_stats') }}
@@ -51,7 +41,6 @@
                 path="hideScrobblesAfter"
                 :units="['m', 'h', 'd']"
                 unit-set="time"
-                expert="1"
               >
                 {{ $t('settings.hide_scrobbles_after') }}
               </UnitSetting>
@@ -64,7 +53,6 @@
         <li>
           <IntegerSetting
             path="maxThumbnails"
-            expert="1"
             :min="0"
           >
             {{ $t('settings.max_thumbnails') }}
@@ -81,17 +69,13 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            path="userCardHidePersonalMarks"
-            expert="1"
-          >
+          <BooleanSetting path="userCardHidePersonalMarks">
             {{ $t('settings.user_card_hide_personal_marks') }}
           </BooleanSetting>
         </li>
         <li v-if="instanceShoutboxPresent">
           <BooleanSetting
             path="hideShoutbox"
-            expert="1"
           >
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
diff --git a/src/components/settings_modal/tabs/composing_tab.vue b/src/components/settings_modal/tabs/composing_tab.vue
index 507ac5c79..60640aab0 100644
--- a/src/components/settings_modal/tabs/composing_tab.vue
+++ b/src/components/settings_modal/tabs/composing_tab.vue
@@ -59,6 +59,7 @@
             id="unsavedPostAction"
             path="unsavedPostAction"
             :options="unsavedPostActionOptions"
+            expert="1"
           >
             {{ $t('settings.unsaved_post_action') }}
           </ChoiceSetting>
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.scss b/src/components/settings_modal/tabs/data_import_export_tab.scss
index 6a4b51ca4..477dab66c 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.scss
+++ b/src/components/settings_modal/tabs/data_import_export_tab.scss
@@ -1,11 +1,21 @@
 .data-import-export-tab {
-  h3 {
-    margin-right: -2em;
-  }
-
   .importer-exporter {
     display: inline-flex;
     flex-direction: column;
     gap: 0.5em;
   }
+
+  table {
+    td, th {
+      line-height: 1.5;
+    }
+
+    th {
+      padding: 0 0.5em;
+    }
+
+    td {
+      padding: 0.5em;
+    }
+  }
 }
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index 3f7c3a875..cfd254277 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -56,8 +56,22 @@
         </li>
       </ul>
       <h3>{{ $t('settings.account_backup') }}</h3>
-      <p>{{ $t('settings.account_backup_description') }}</p>
-      <table>
+      <div class="setting-list">
+        <p>{{ $t('settings.account_backup_description') }}</p>
+        <button
+          class="btn button-default"
+          @click="addBackup"
+        >
+          {{ $t('settings.add_backup') }}
+        </button>
+        <p v-if="addedBackup">
+          {{ $t('settings.added_backup') }}
+        </p>
+        <template v-if="addBackupError !== false">
+          <p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
+        </template>
+      </div>
+      <table class="setting-list">
         <thead>
           <tr>
             <th>{{ $t('settings.account_backup_table_head') }}</th>
@@ -112,18 +126,6 @@
           />
         </button>
       </div>
-      <button
-        class="btn button-default"
-        @click="addBackup"
-      >
-        {{ $t('settings.add_backup') }}
-      </button>
-      <p v-if="addedBackup">
-        {{ $t('settings.added_backup') }}
-      </p>
-      <template v-if="addBackupError !== false">
-        <p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
-      </template>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/tabs/layout_tab.js b/src/components/settings_modal/tabs/layout_tab.js
index 355933a65..48b6eb971 100644
--- a/src/components/settings_modal/tabs/layout_tab.js
+++ b/src/components/settings_modal/tabs/layout_tab.js
@@ -31,6 +31,7 @@ const GeneralTab = {
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     columns () {
       const mode = this.$store.getters.mergedConfig.thirdColumnMode
 
diff --git a/src/components/settings_modal/tabs/layout_tab.vue b/src/components/settings_modal/tabs/layout_tab.vue
index 999040d9d..68e90d346 100644
--- a/src/components/settings_modal/tabs/layout_tab.vue
+++ b/src/components/settings_modal/tabs/layout_tab.vue
@@ -33,10 +33,7 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            path="userCardLeftJustify"
-            expert="1"
-          >
+          <BooleanSetting path="userCardLeftJustify">
             {{ $t('settings.user_card_left_justify') }}
           </BooleanSetting>
         </li>
diff --git a/src/components/settings_modal/tabs/posts_tab.js b/src/components/settings_modal/tabs/posts_tab.js
index d0399037b..094583c15 100644
--- a/src/components/settings_modal/tabs/posts_tab.js
+++ b/src/components/settings_modal/tabs/posts_tab.js
@@ -1,5 +1,6 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import FontControl from 'src/components/font_control/font_control.vue'
 
@@ -51,6 +52,7 @@ const GeneralTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
+    IntegerSetting,
     FontControl,
     ProfileSettingIndicator
   },
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 545f6b117..57d81cf70 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -2,14 +2,13 @@
   min-width: var(--themeEditorMinWidth, fit-content);
 
   .style-control {
-    display: flex;
-    flex-wrap: wrap;
     align-items: baseline;
     margin-bottom: 0.5em;
 
     .label {
+      display: inline-block;
       margin-right: 0.5em;
-      flex: 1 1 0;
+      flex: 1 1 auto;
       line-height: 2;
       min-height: 2em;
     }
@@ -18,10 +17,6 @@
       margin-left: 1em;
     }
 
-    .color-input {
-      flex: 0 0 0;
-    }
-
     input,
     select {
       min-width: 3em;
@@ -50,21 +45,24 @@
     }
   }
 
+  .setting-item.heading {
+    padding: 0;
+  }
+
   .meta-preview {
     display: grid;
     grid-template:
-      "meta meta preview preview"
-      "meta meta preview preview"
-      "meta meta preview preview"
-      "meta meta preview preview";
-    grid-gap: 0.5em;
-    grid-template-columns: min-content min-content 6fr max-content;
+      "meta preview";
+    grid-gap: 1em;
+    grid-template-columns: min-content 6fr;
+
+    .theme-preview-container {
+      margin: 0;
+    }
 
     ul.setting-list {
       padding: 0;
       margin: 0;
-      display: grid;
-      grid-template-rows: subgrid;
       grid-area: meta;
 
       > li {
@@ -114,6 +112,7 @@
 
     .list-edit-area {
       grid-area: editor;
+      align-items: baseline;
     }
 
     .list-select {
@@ -134,21 +133,6 @@
     }
   }
 
-  .palette-editor {
-    width: min-content;
-
-    .list-edit-area {
-      display: grid;
-      align-self: baseline;
-      grid-template-rows: subgrid;
-      grid-template-columns: 1fr;
-    }
-
-    .palette-editor-single {
-      grid-row: 2 / span 2;
-    }
-  }
-
   .variables-editor {
     .variable-selector {
       display: grid;
@@ -249,6 +233,46 @@
       justify-items: center;
     }
   }
+
+  .-mobile & {
+    .meta-preview {
+      grid-template:
+        "meta"
+        "preview"
+    }
+
+    .list-editor {
+      display: grid;
+      grid-template-areas:
+        "label"
+        "selector"
+        "movement"
+        "editor"
+        "editor"
+        "editor"
+        "editor";
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr auto;
+    }
+
+    .component-editor {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      grid-template-areas:
+        "component"
+        "variant"
+        "state"
+        "preview"
+        "settings";
+    }
+
+      .variable-selector {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        grid-auto-flow: row;
+        grid-gap: 0.5em;
+      }
+  }
 }
 
 .extra-content {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index a386822ee..0ced0baf4 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -4,7 +4,6 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
-      <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
       <div class="meta-preview">
         <Preview id="edited-style-preview" />
         <teleport
@@ -85,6 +84,7 @@
         key="component"
         class="setting-item component-editor"
         :label="$t('settings.style.themes3.editor.component_tab')"
+        :full-width="true"
       >
         <div class="component-selector">
           <label for="component-selector">
@@ -332,6 +332,7 @@
         key="palette"
         :label="$t('settings.style.themes3.editor.palette_tab')"
         class="setting-item list-editor palette-editor"
+        :full-width="true"
       >
         <label
           class="list-select-label"
@@ -379,6 +380,7 @@
         key="variables"
         :label="$t('settings.style.themes3.editor.variables_tab')"
         :model-value="virtualDirectives"
+        :full-width="true"
         @update:model-value="updateVirtualDirectives"
       />
     </tab-switcher>
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index d169ea234..0fb7386ec 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -6,6 +6,10 @@
   grid-gap: 0.5em;
   justify-content: stretch;
 
+  .style-control {
+    display: flex;
+  }
+
   &.-compact {
     grid-template-columns: 10em 1fr;
     grid-template-rows: auto auto;
@@ -110,7 +114,6 @@
 
   .shadow-preview {
     grid-area: preview;
-    min-width: 25em;
     margin-left: 0.125em;
     place-self: start center;
   }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index f34741797..4fdae4207 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -168,6 +168,7 @@
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
           :fallback="getColorFallback"
+          :compact="true"
           :show-optional-checkbox="false"
           name="shadow"
           @update:model-value="e => updateProperty('color', e)"
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index d46e14add..af3008459 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -138,8 +138,11 @@ export default {
       if (!props) return
       const active = this.activeIndex === index
       const classes = [ active ? 'active' : 'hidden' ]
-      if (props.fullHeight) {
-        classes.push('full-height')
+      if (props.fullHeight || props['full-height']) {
+        classes.push('-full-height')
+      }
+      if (props.fullWidth || props['full-width']) {
+        classes.push('-full-width')
       }
       let delayRender = slot.props['delay-render']
       if (delayRender && active) {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 27214e87e..f788ea30e 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -60,7 +60,7 @@
       display: none;
     }
 
-    .full-height:not(.hidden) {
+    .-full-height:not(.hidden) {
       height: 100%;
       display: flex;
       flex-direction: column;
@@ -70,6 +70,15 @@
       }
     }
 
+    .-full-width:not(.hidden) {
+      display: flex;
+      flex-direction: column;
+
+      > *:not(.mobile-label) {
+        width: auto;
+      }
+    }
+
     &.scrollable-tabs {
       overflow-y: auto;
     }