Mobile responsive thanks ai slop

frontend/app/components/parts/site_options/ThemeSelector.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { theme, accent, setTheme, setAccent } from '~/composables/theme'
 
 // ref for dropdown visibility
@@ -19,22 +19,31 @@ const handleClickOutside = (e) => {
   }
 }
 
+const isNarrow = ref(false)
+
+const checkWidth = () => {
+  isNarrow.value = window.innerWidth < 480
+}
+
 onMounted(() => {
   document.addEventListener('click', handleClickOutside)
+  checkWidth()
+  window.addEventListener('resize', checkWidth)
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('resize', checkWidth)
 })
 </script>
 
 <template>
-<div class="menu-container" ref="menuContainer">
+ <div class="menu-container" ref="menuContainer">
   <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} ▾</button>
 
   <Transition name="dropdown">
     <div class="dropdown" v-show="dropdownVisible">
-      <div class="two-columns">
+      <div class="two-columns" :class="{ 'stacked': isNarrow }">
           <div class="section">
               <div class="menu-section">
                   <div class="menu-header">
@@ -180,16 +189,18 @@ border: 1px solid var(--color-border-color);
 /* Dropdown */
 .dropdown {
  z-index: 10;
-   position: absolute;
-   top: 50px;
-   right: 0;
-   margin-right: 10px;
-   width: 320px;
-   background: var(--color-background-fore);
-   border: 1px solid var(--color-border-color);
-   border-radius: 0;
-   padding: 8px 0;
-   box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3);
+    position: absolute;
+    top: 50px;
+    right: 0;
+    margin-right: 10px;
+    max-width: calc(100vw - 32px);
+    width: auto;
+    min-width: 260px;
+    background: var(--color-background-fore);
+    border: 1px solid var(--color-border-color);
+    border-radius: 0;
+    padding: 8px 0;
+    box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3);
 }
 
 /* Sections */
@@ -207,6 +218,7 @@ border: 1px solid var(--color-border-color);
   gap: 10px;
   margin: 8px;
   align-items: center;
+  min-height: 36px;
 
   &.active {
     background: var(--color-selected);
@@ -241,4 +253,38 @@ border: 1px solid var(--color-border-color);
     content: "═══════════";
   }
 }
+
+.two-columns {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
+}
+
+.section {
+    flex-grow: 1;
+}
+
+.stacked {
+    flex-direction: column;
+}
+
+@media (max-width: 480px) {
+    .dropdown {
+        top: 42px;
+        padding: 6px 0;
+    }
+
+    .menu-item {
+        margin: 4px;
+        padding: 10px 12px;
+    }
+
+    .menu-header {
+        padding: 6px 12px;
+    }
+
+    .divider {
+        margin: 4px 12px;
+    }
+}
 </style>