mobile-friendly appearance tab

src/components/palette_editor/palette_editor.vue

@@ -168,6 +168,25 @@ 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;
+      }
+
+      &.-apply {
+        .palette-apply-button {
+          grid-column: 1;
+        }
+      }
+    }
   }
 }
 </style>

src/components/settings_modal/tabs/appearance_tab.scss

@@ -35,9 +35,11 @@
   .palette-entry {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    padding: 0 0.5em;
 
-    > label {
+    .palette-label label {
-      flex: 1 0 auto;
+      text-align: center;
     }
 
     .palette-square {
@@ -60,6 +62,26 @@
     margin-top: 0.5em;
   }
 
+  .modal-view.-mobile & {
+    .palette-entry {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .palette-label {
+      line-height: 1.5em;
+      margin-top: 0.5em;
+      width: 100%;
+    }
+
+    .palette-preview {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-rows: 1em 1em;
+      margin-bottom: 0.5em;
+    }
+  }
+
   .theme-list {
     list-style: none;
     display: flex;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -93,15 +93,19 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPalette(p.key, p)"
             >
-              <label>
+              <div class="palette-label">
-                {{ p.name }}
+                <label>
-              </label>
+                  {{ p.name }}
-              <span
+                </label>
-                v-for="c in palettesKeys"
+              </div>
-                :key="c"
+              <div class="palette-preview">
-                class="palette-square"
+                <span
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                  v-for="c in palettesKeys"
-              />
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
             </button>
             <h4 v-if="stylePalettes?.length > 0">
               {{ $t('settings.style.themes3.palette.style') }}
@@ -113,15 +117,19 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPaletteCustom(p)"
             >
-              <label>
+              <div class="palette-label">
-                {{ p.name ?? $t('settings.style.themes3.palette.user') }}
+                <label>
-              </label>
+                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
-              <span
+                </label>
-                v-for="c in palettesKeys"
+              </div>
-                :key="c"
+              <div class="palette-preview">
-                class="palette-square"
+                <span
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                  v-for="c in palettesKeys"
-              />
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
             </button>
             <h4 v-if="expertLevel > 0">
               {{ $t('settings.style.themes3.palette.user') }}