improved theme-related stuff on mobile somewhat (except shadow editor)

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: 1 1 10em;
-    flex: 0 0 0;
+    max-width: 10em;
-    max-width: 9em;
+    grid-area: input;
+    display: flex;
     align-items: stretch;
 
     input {

src/components/palette_editor/palette_editor.vue

@@ -1,8 +1,9 @@
 <template>
   <div
     class="PaletteEditor"
-    :class="{ '-compact': compact, '-apply': apply }"
+    :class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
   >
+    <div class="palette">
       <ColorInput
         v-for="key in paletteKeys"
         :key="key"
@@ -12,6 +13,8 @@
         :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"
@@ -26,6 +29,8 @@
         <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"
@@ -36,9 +41,12 @@
         {{ $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,24 +200,22 @@ 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;
-      }
-
-      .palette-export-button {
-        grid-column: 1;
   }
 
+  &.-mobile {
     &.-apply {
       .palette-apply-button {
-          grid-column: 1;
+        grid-column: 1 / span 2;
       }
     }
+
+    .color-input {
+      display: grid;
+      gap: 0.5em;
+
+      label {
+        flex: 1;
+      }
     }
   }
 }

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')

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;
   }
 

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'"

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
 

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 preview";
-      "meta meta preview preview"
+    grid-gap: 1em;
-      "meta meta preview preview"
+    grid-template-columns: min-content 6fr;
-      "meta meta preview preview";
+
-    grid-gap: 0.5em;
+    .theme-preview-container {
-    grid-template-columns: min-content min-content 6fr max-content;
+      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 {

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>

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) {
+      if (props.fullHeight || props['full-height']) {
-        classes.push('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) {

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;
     }