pleroma-fe

commit: afa3410f467891514965bd029620154712cc2877
parent 09956cad2f13a667885ca5e63f29c101f6eb9f4a
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 31 Dec 2024 13:52:40 +0200

fix firefox palettes

Diffstat:
M
src/components/settings_modal/tabs/appearance_tab.scss
12
++++++++----
M
src/components/settings_modal/tabs/appearance_tab.vue
94
++++++++++++++++++++++++++++++++++++++++---------------------------------------

2 files changed, 56 insertions(+), 50 deletions(-)
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -24,10 +24,7 @@
     margin: 0.5em 0;
   }
 
-  .palettes {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0.5em;
+  .palettes-container {
     height: 15em;
     overflow-y: auto;
     overflow-x: hidden;
@@ -35,7 +32,14 @@
     border-radius: var(--roundness);
     border: 1px solid var(--border);
     margin: -0.5em;
+  }
+
+  .palettes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0.5em;
     padding: 0.5em;
+    width: 100%;
 
     h4 {
       margin: 0;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -93,56 +93,58 @@
         <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
         <div
           v-if="customThemeVersion === 'v3'"
-          class="palettes"
+          class="palettes-container"
         >
           <h4 v-if="stylePalettes?.length > 0">
             {{ $t('settings.style.themes3.palette.style') }}
           </h4>
-          <button
-            v-for="p in stylePalettes || []"
-            :key="p.name"
-            class="btn button-default palette-entry"
-            :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
-            :disabled="switchInProgress"
-            @click="() => setPalette(p.key, p)"
-          >
-            <div class="palette-label">
-              <label>
-                {{ p.name ?? $t('settings.style.themes3.palette.user') }}
-              </label>
-            </div>
-            <div class="palette-preview">
-              <span
-                v-for="c in palettesKeys"
-                :key="c"
-                class="palette-square"
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-              />
-            </div>
-          </button>
-          <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
-          <button
-            v-for="p in bundledPalettes"
-            :key="p.name"
-            class="btn button-default palette-entry"
-            :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
-            :disabled="switchInProgress"
-            @click="() => setPalette(p.key, p)"
-          >
-            <div class="palette-label">
-              <label>
-                {{ p.name }}
-              </label>
-            </div>
-            <div class="palette-preview">
-              <span
-                v-for="c in palettesKeys"
-                :key="c"
-                class="palette-square"
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-              />
-            </div>
-          </button>
+          <div class="palettes">
+            <button
+              v-for="p in stylePalettes || []"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
+              @click="() => setPalette(p.key, p)"
+            >
+              <div class="palette-label">
+                <label>
+                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
+            </button>
+            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
+            <button
+              v-for="p in bundledPalettes"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
+              @click="() => setPalette(p.key, p)"
+            >
+              <div class="palette-label">
+                <label>
+                  {{ p.name }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
+            </button>
+          </div>
         </div>
         <div>
           <template v-if="customThemeVersion === 'v3'">