From dba63e68256cef07bc291420e58f3a057afb5c83 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 25 Nov 2025 22:56:14 +0200
Subject: [PATCH] improved theme-related stuff on mobile somewhat (except
 shadow editor)

---
 src/components/color_input/color_input.scss   |  16 ++-
 .../palette_editor/palette_editor.vue         | 121 +++++++++++-------
 .../helpers/vertical_tab_switcher.jsx         |   2 +-
 .../settings_modal/tabs/appearance_tab.scss   |   4 +-
 .../settings_modal/tabs/appearance_tab.vue    |   2 -
 .../settings_modal/tabs/layout_tab.js         |   1 +
 .../tabs/style_tab/style_tab.scss             |  81 +++++++-----
 .../tabs/style_tab/style_tab.vue              |   4 +-
 src/components/tab_switcher/tab_switcher.jsx  |   7 +-
 src/components/tab_switcher/tab_switcher.scss |  11 +-
 10 files changed, 160 insertions(+), 89 deletions(-)

diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 3128381f5..c6680b6b0 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -1,18 +1,28 @@
 .color-input {
   display: inline-flex;
+  flex-wrap: wrap;
+  max-width: 10em;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "label checkbox"
+    "input input";
 
   .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/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/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/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/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 545f6b117..4f02a68c0 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -2,8 +2,6 @@
   min-width: var(--themeEditorMinWidth, fit-content);
 
   .style-control {
-    display: flex;
-    flex-wrap: wrap;
     align-items: baseline;
     margin-bottom: 0.5em;
 
@@ -18,10 +16,6 @@
       margin-left: 1em;
     }
 
-    .color-input {
-      flex: 0 0 0;
-    }
-
     input,
     select {
       min-width: 3em;
@@ -50,21 +44,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 +111,7 @@
 
     .list-edit-area {
       grid-area: editor;
+      align-items: baseline;
     }
 
     .list-select {
@@ -134,21 +132,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 +232,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..967d6983a 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"
@@ -380,6 +381,7 @@
         :label="$t('settings.style.themes3.editor.variables_tab')"
         :model-value="virtualDirectives"
         @update:model-value="updateVirtualDirectives"
+        :full-width="true"
       />
     </tab-switcher>
   </div>
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;
     }