Mobile responsive thanks ai slop

frontend/app/components/parts/HeaderLinks.vue

@@ -115,11 +115,24 @@ function getToPath(targetKey: string): string {
   .tui-tab {
       padding: 3px 5px;
       font-size: 0.7rem;
-      
+
       .tab-sep {
           margin-right: 3px;
       }
   }
 }
 
+@media screen and (max-width: 480px) {
+    .tui-tabs {
+        flex-wrap: wrap;
+    }
+
+    .tui-tab {
+        flex: 1;
+        justify-content: center;
+        min-height: 36px;
+        padding: 6px 8px;
+    }
+}
+
 </style>

frontend/app/components/parts/StickyHeader.vue

@@ -98,6 +98,15 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
     @media screen and (max-width: 900px) {
         font-size: 0.75rem;
     }
+
+    @media screen and (max-width: 480px) {
+        display: none;
+    }
 }
 
+.site-options {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
 </style>

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

@@ -75,27 +75,30 @@ border: 1px solid var(--color-border-color);
 }
 
 .dropdown {
- z-index: 10;
+  z-index: 10;
   position: absolute;
   top: 50px;
-  right: 110px;
+  right: 0;
   margin-right: 10px;
+  max-width: calc(100vw - 32px);
+  width: auto;
+  min-width: 140px;
   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);
-   border-left: 2px solid var(--color-border-color);
+ 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);
+    border-left: 2px solid var(--color-border-color);
 
-   &::before {
-     content: "▸";
-     display: block;
-     position: absolute;
-     left: -16px;
-     top: -2px;
-     font-size: 14px;
-     color: var(--color-border-color);
-   }
+    &::before {
+      content: "▸";
+      display: block;
+      position: absolute;
+      left: -16px;
+      top: -2px;
+      font-size: 14px;
+      color: var(--color-border-color);
+    }
 }
 
 /* Items */
@@ -106,6 +109,7 @@ border: 1px solid var(--color-border-color);
   display: flex;
   gap: 10px;
   align-items: center;
+  min-height: 36px;
 
   &.active {
     background: var(--color-selected);
@@ -115,4 +119,14 @@ border: 1px solid var(--color-border-color);
 .menu-item:hover {
   background: var(--color-hover);
 }
+
+@media (max-width: 480px) {
+    .dropdown {
+        top: 42px;
+    }
+
+    .menu-item {
+        padding: 10px 12px;
+    }
+}
 </style>

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

@@ -14,10 +14,15 @@ import ThemeSelector from './ThemeSelector.vue';
 .site-options {
     display: flex;
     justify-content: right;
-    width: 400px;
+    width: auto;
+
+    @media screen and (max-width: 900px) {
+        gap: 8px;
+    }
 
     @media screen and (max-width: 600px) {
         margin-top: -10px;
+        gap: 4px;
     }
 }
 </style>

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>