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

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 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 {

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>