fix firefox palettes

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;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -93,11 +93,12 @@
         <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>
+          <div class="palettes">
             <button
               v-for="p in stylePalettes || []"
               :key="p.name"
@@ -144,6 +145,7 @@
               </div>
             </button>
           </div>
+        </div>
         <div>
           <template v-if="customThemeVersion === 'v3'">
             <h4 v-if="expertLevel > 0">