From 2ec19323c6c862ffbdd45d842e90abee883a8f7b Mon Sep 17 00:00:00 2001
From: x42en <x42en@users.noreply.github.com>
Date: Tue, 23 Jun 2026 00:44:39 +0200
Subject: [PATCH] feat(ui): implement mobile navigation with sidebar toggle and
 auto-close functionality refactor(ui): update layout and responsiveness for
 various components style(ui): enhance spacing and alignment in forms and
 modals delete(ui): remove unused BaseTextarea component

---
 .../applications/ApplicationFormModal.vue     | 16 ++---
 frontend/src/components/layout/AppHeader.vue  | 23 +++++--
 frontend/src/components/layout/AppLayout.vue  | 31 ++++++++++
 frontend/src/components/layout/AppSidebar.vue | 20 +++++-
 frontend/src/components/ui/BaseModal.vue      | 10 +--
 frontend/src/components/ui/BaseTextarea.vue   | 43 -------------
 frontend/src/components/ui/CopyField.vue      |  2 +-
 frontend/src/components/ui/EntityModal.vue    | 16 ++---
 frontend/src/composables/useMobileNav.ts      | 61 +++++++++++++++++++
 frontend/src/views/ApplicationDetailView.vue  |  8 +--
 frontend/src/views/ConfigurationView.vue      |  4 +-
 frontend/src/views/DashboardView.vue          |  2 +-
 frontend/src/views/ProfileView.vue            |  4 +-
 frontend/src/views/UserDetailView.vue         |  2 +-
 14 files changed, 161 insertions(+), 81 deletions(-)
 delete mode 100644 frontend/src/components/ui/BaseTextarea.vue
 create mode 100644 frontend/src/composables/useMobileNav.ts

diff --git a/frontend/src/components/applications/ApplicationFormModal.vue b/frontend/src/components/applications/ApplicationFormModal.vue
index 310259f..8c7cf2b 100644
--- a/frontend/src/components/applications/ApplicationFormModal.vue
+++ b/frontend/src/components/applications/ApplicationFormModal.vue
@@ -300,7 +300,7 @@ async function submit() {
     @close="emit('close')"
   >
     <form @submit.prevent="submit" class="space-y-5">
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <BaseInput v-model="form.name" :label="t('applications.name')" required />
         <BaseInput
           v-model="form.slug"
@@ -310,14 +310,14 @@ async function submit() {
         />
       </div>
       <BaseInput v-model="form.description" :label="t('applications.description')" />
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <BaseInput v-model="form.url" :label="t('applications.url')" placeholder="https://app.example.com" />
         <BaseInput v-model="form.icon" :label="t('applications.icon')" placeholder="https://..." />
       </div>
 
       <div class="pt-1">
         <p class="text-xs font-medium text-surface-500 uppercase tracking-wider mb-3">Options</p>
-        <div class="grid grid-cols-2 gap-x-8 gap-y-3">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3">
           <BaseToggle v-model="form.isActive" :label="t('applications.isActive')" />
           <BaseToggle
             v-model="form.isPublic"
@@ -536,10 +536,12 @@ async function submit() {
       </div>
     </form>
     <template #footer>
-      <BaseButton variant="ghost" @click="emit('close')">{{ t('common.cancel') }}</BaseButton>
-      <BaseButton :loading="loading" @click="submit">
-        {{ isEdit ? t('common.save') : t('common.create') }}
-      </BaseButton>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-2.5 w-full">
+        <BaseButton variant="ghost" @click="emit('close')" class="w-full sm:w-auto">{{ t('common.cancel') }}</BaseButton>
+        <BaseButton :loading="loading" @click="submit" class="w-full sm:w-auto">
+          {{ isEdit ? t('common.save') : t('common.create') }}
+        </BaseButton>
+      </div>
     </template>
   </EntityModal>
 </template>
diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue
index c4cc76d..b558c41 100644
--- a/frontend/src/components/layout/AppHeader.vue
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -4,14 +4,16 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useTheme } from '@/composables/useTheme';
 import { useAuthStore } from '@/stores/auth';
-import { Sun, Moon, User, LogOut } from 'lucide-vue-next';
+import { Sun, Moon, User, LogOut, Menu } from 'lucide-vue-next';
 import UserAvatar from '@/components/ui/UserAvatar.vue';
 import LanguageSelect from '@/components/ui/LanguageSelect.vue';
+import { useMobileNav } from '@/composables/useMobileNav';
 
 const { t } = useI18n();
 const router = useRouter();
 const auth = useAuthStore();
 const { theme, toggle } = useTheme();
+const { toggle: toggleSidebar } = useMobileNav();
 
 defineProps<{
   title?: string;
@@ -28,13 +30,24 @@ async function handleLogout() {
 </script>
 
 <template>
-  <header class="relative z-40 h-16 shrink-0 flex items-center justify-between px-6 border-b border-surface-800/40 bg-surface-950/40 backdrop-blur-xl">
-    <div>
+  <header class="relative z-40 h-16 shrink-0 flex items-center justify-between px-4 md:px-6 border-b border-surface-800/40 bg-surface-950/40 backdrop-blur-xl">
+    <!-- Mobile burger button -->
+    <button
+      @click="toggleSidebar"
+      class="md:hidden p-1.5 rounded-lg text-surface-400 hover:text-surface-200 hover:bg-surface-800/60 transition-colors"
+      :aria-label="t('aria.openMenu') || 'Open menu'"
+    >
+      <Menu class="w-5 h-5" />
+    </button>
+
+    <!-- Title section -->
+    <div class="flex-1 md:flex-none">
       <h1 v-if="title" class="text-base font-semibold text-surface-100">{{ title }}</h1>
       <p v-if="subtitle" class="text-xs text-surface-500">{{ subtitle }}</p>
     </div>
 
-    <div class="flex items-center gap-1">
+    <!-- Right actions -->
+    <div class="flex items-center gap-1 sm:gap-2 md:gap-3">
       <LanguageSelect />
 
       <button
@@ -47,7 +60,7 @@ async function handleLogout() {
       </button>
 
       <!-- User menu -->
-      <div class="relative ml-1" v-click-outside="() => (menuOpen = false)">
+      <div class="relative" v-click-outside="() => (menuOpen = false)">
         <button
           type="button"
           @click="menuOpen = !menuOpen"
diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index 8d11519..0595925 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -1,16 +1,47 @@
 <script setup lang="ts">
+import { watch } from 'vue';
 import AppSidebar from './AppSidebar.vue';
 import AppHeader from './AppHeader.vue';
 import ToastContainer from '@/components/ui/ToastContainer.vue';
+import { useMobileNav } from '@/composables/useMobileNav';
 
 defineProps<{
   title?: string;
   subtitle?: string;
 }>();
+
+const { isSidebarOpen, close } = useMobileNav();
+
+// Lock body scroll when sidebar is open on mobile
+watch(isSidebarOpen, (isOpen) => {
+  if (window.innerWidth < 768) {
+    if (isOpen) {
+      document.documentElement.classList.add('overflow-hidden');
+    } else {
+      document.documentElement.classList.remove('overflow-hidden');
+    }
+  }
+});
 </script>
 
 <template>
   <div class="flex h-screen bg-surface-950 text-surface-100 overflow-hidden">
+    <!-- Mobile sidebar backdrop -->
+    <transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-200"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isSidebarOpen"
+        @click="close"
+        class="md:hidden fixed inset-0 bg-black/40 z-30"
+      />
+    </transition>
+
     <AppSidebar />
     <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
       <AppHeader :title="title" :subtitle="subtitle" />
diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue
index 0996ee8..febbbe5 100644
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -4,15 +4,17 @@ import { useRoute, RouterLink } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '@/stores/auth';
 import {
-  LayoutDashboard, Users, Building2, AppWindow, Settings, ChevronRight,
+  LayoutDashboard, Users, Building2, AppWindow, Settings, ChevronRight, X,
 } from 'lucide-vue-next';
 import AppLogo from '@/components/branding/AppLogo.vue';
 import { useAppBranding } from '@/composables/useAppBranding';
+import { useMobileNav } from '@/composables/useMobileNav';
 
 const { t } = useI18n();
 const route = useRoute();
 const auth = useAuthStore();
 const { branding } = useAppBranding();
+const { isSidebarOpen, close } = useMobileNav();
 
 const navItems = computed(() => [
   { name: t('nav.dashboard'), to: '/dashboard', icon: LayoutDashboard, adminOnly: true },
@@ -32,7 +34,21 @@ function isActive(to: string) {
 </script>
 
 <template>
-  <aside class="w-64 shrink-0 h-full flex flex-col bg-surface-950/60 backdrop-blur-xl border-r border-surface-800/50">
+  <aside :class="[
+    'fixed md:static inset-y-0 left-0 z-40 w-64 shrink-0 h-full flex flex-col',
+    'bg-surface-950/60 backdrop-blur-xl border-r border-surface-800/50',
+    'transform transition-transform duration-200 ease-in-out',
+    isSidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+  ]">
+    <!-- Close button (mobile only) -->
+    <button
+      @click="close"
+      class="md:hidden absolute top-4 right-4 p-1.5 rounded-lg text-surface-400 hover:text-surface-200 hover:bg-surface-800/60 transition-colors z-50"
+      :aria-label="t('aria.closeSidebar') || 'Close sidebar'"
+    >
+      <X class="w-5 h-5" />
+    </button>
+
     <div class="px-5 py-6 flex items-center gap-3 border-b border-surface-800/40">
       <div v-if="!branding.logoUrl" class="w-8 h-8 rounded-lg bg-primary-600 flex items-center justify-center shadow-lg shadow-primary-900/40 overflow-hidden">
         <AppLogo :size="16" icon-class="text-white" />
diff --git a/frontend/src/components/ui/BaseModal.vue b/frontend/src/components/ui/BaseModal.vue
index 9aeeaa5..ceca055 100644
--- a/frontend/src/components/ui/BaseModal.vue
+++ b/frontend/src/components/ui/BaseModal.vue
@@ -53,25 +53,25 @@ onUnmounted(() => document.removeEventListener('keydown', onKeydown));
         >
           <div
             v-if="open"
-            :class="['relative w-full rounded-xl bg-surface-900 border border-surface-700/50 shadow-2xl shadow-black/50', sizeClasses[size]]"
+            :class="['relative w-full mx-4 sm:mx-6 md:mx-auto rounded-xl bg-surface-900 border border-surface-700/50 shadow-2xl shadow-black/50 max-h-[90vh] overflow-y-auto flex flex-col', sizeClasses[size]]"
           >
-            <div v-if="title || $slots.header" class="flex items-center justify-between px-6 py-4 border-b border-surface-700/50">
+            <div v-if="title || $slots.header" class="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-surface-700/50 shrink-0">
               <slot name="header">
                 <h2 class="text-base font-semibold text-surface-100">{{ title }}</h2>
               </slot>
               <button
                 @click="emit('close')"
-                class="p-1 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-700/50 transition-colors"
+                class="p-1 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-700/50 transition-colors shrink-0 ml-2"
               >
                 <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
             </div>
-            <div class="px-6 py-5">
+            <div class="px-4 sm:px-6 py-5 overflow-y-auto">
               <slot />
             </div>
-            <div v-if="$slots.footer" class="px-6 pb-5 flex justify-end gap-3">
+            <div v-if="$slots.footer" class="px-4 sm:px-6 pb-5 flex justify-end gap-3 shrink-0 border-t border-surface-700/50">
               <slot name="footer" />
             </div>
           </div>
diff --git a/frontend/src/components/ui/BaseTextarea.vue b/frontend/src/components/ui/BaseTextarea.vue
deleted file mode 100644
index 768b8ef..0000000
--- a/frontend/src/components/ui/BaseTextarea.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  label?: string;
-  error?: string;
-  hint?: string;
-  modelValue?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  required?: boolean;
-  rows?: number;
-}>();
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-}>();
-</script>
-
-<template>
-  <div class="space-y-1.5">
-    <label v-if="label" class="block text-xs font-medium text-surface-400 uppercase tracking-wide">
-      {{ label }}
-      <span v-if="required" class="text-red-400 ml-0.5">*</span>
-    </label>
-    <textarea
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :rows="rows || 3"
-      @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
-      :class="[
-        'w-full rounded-lg px-3 py-2 text-sm bg-surface-800 border transition-all duration-150',
-        'text-surface-100 placeholder:text-surface-500 resize-none',
-        'focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500',
-        'disabled:opacity-50 disabled:cursor-not-allowed',
-        error
-          ? 'border-red-500/60 focus:border-red-500 focus:ring-red-500/30'
-          : 'border-surface-600 hover:border-surface-500',
-      ]"
-    />
-    <p v-if="error" class="text-xs text-red-400">{{ error }}</p>
-    <p v-else-if="hint" class="text-xs text-surface-500">{{ hint }}</p>
-  </div>
-</template>
diff --git a/frontend/src/components/ui/CopyField.vue b/frontend/src/components/ui/CopyField.vue
index 8eb5a5f..ca3fcfc 100644
--- a/frontend/src/components/ui/CopyField.vue
+++ b/frontend/src/components/ui/CopyField.vue
@@ -21,7 +21,7 @@ async function copy(val: string) {
   <div class="space-y-1.5">
     <label v-if="label" class="block text-xs font-medium text-surface-400 uppercase tracking-wide">{{ label }}</label>
     <div class="flex items-center gap-2 bg-surface-800/60 border border-surface-700 rounded-lg px-3 py-2">
-      <code class="flex-1 text-sm font-mono text-surface-300 truncate">
+      <code :class="['flex-1 text-sm font-mono text-surface-300', masked ? 'truncate' : 'break-all']">
         {{ masked ? '•'.repeat(Math.min(value.length, 32)) : value }}
       </code>
       <button
diff --git a/frontend/src/components/ui/EntityModal.vue b/frontend/src/components/ui/EntityModal.vue
index e17d903..854f94b 100644
--- a/frontend/src/components/ui/EntityModal.vue
+++ b/frontend/src/components/ui/EntityModal.vue
@@ -87,7 +87,7 @@ const autoIconColor = computed(() => {
         >
           <div
             v-if="open"
-            :class="['relative w-full bg-surface-900 border border-surface-700/60 shadow-2xl shadow-black/60 overflow-hidden', sizeClasses[size]]"
+            :class="['relative w-full mx-4 sm:mx-6 md:mx-auto bg-surface-900 border border-surface-700/60 shadow-2xl shadow-black/60 overflow-hidden max-h-[90vh] overflow-y-auto flex flex-col', sizeClasses[size]]"
             style="border-radius: 10px;"
           >
             <button
@@ -99,23 +99,23 @@ const autoIconColor = computed(() => {
               </svg>
             </button>
 
-            <div class="flex items-start gap-5 px-6 pt-6 pb-5 border-b border-surface-800/60 bg-surface-950/40">
+            <div class="flex items-start gap-4 sm:gap-5 px-4 sm:px-6 pt-6 pb-5 border-b border-surface-800/60 bg-surface-950/40 shrink-0">
               <div
                 :class="[
-                  'w-16 h-16 shrink-0 overflow-hidden flex items-center justify-center border bg-gradient-to-br',
+                  'w-14 sm:w-16 h-14 sm:h-16 shrink-0 overflow-hidden flex items-center justify-center border bg-gradient-to-br',
                   iconShape === 'circle' ? 'rounded-full' : 'rounded-lg',
                   !iconUrl ? autoIconColor : 'bg-surface-800 border-surface-700/50',
                 ]"
               >
                 <img v-if="iconUrl" :src="iconUrl" class="w-full h-full object-cover" :alt="name ?? ''" />
-                <span v-else class="text-2xl font-bold select-none">{{ iconLetterDisplay }}</span>
+                <span v-else class="text-xl sm:text-2xl font-bold select-none">{{ iconLetterDisplay }}</span>
               </div>
 
               <div class="flex-1 min-w-0 pt-0.5">
-                <h2 class="text-xl font-bold text-surface-50 leading-tight truncate">
+                <h2 class="text-lg sm:text-xl font-bold text-surface-50 leading-tight truncate">
                   {{ name && name.length ? name : 'New Entity' }}
                 </h2>
-                <p v-if="subtitle" class="text-sm font-mono text-surface-500 mt-0.5 truncate">{{ subtitle }}</p>
+                <p v-if="subtitle" class="text-xs sm:text-sm font-mono text-surface-500 mt-0.5 truncate">{{ subtitle }}</p>
                 <div v-if="tags?.length" class="flex flex-wrap gap-1.5 mt-2.5">
                   <BaseBadge
                     v-for="tag in tags"
@@ -129,11 +129,11 @@ const autoIconColor = computed(() => {
               </div>
             </div>
 
-            <div class="px-6 py-5 max-h-[60vh] overflow-y-auto">
+            <div class="px-4 sm:px-6 py-5 overflow-y-auto">
               <slot />
             </div>
 
-            <div v-if="$slots.footer" class="px-6 py-4 flex justify-end gap-2.5 border-t border-surface-800/60 bg-surface-950/20">
+            <div v-if="$slots.footer" class="px-4 sm:px-6 py-4 flex justify-end gap-2.5 border-t border-surface-800/60 bg-surface-950/20 shrink-0">
               <slot name="footer" />
             </div>
           </div>
diff --git a/frontend/src/composables/useMobileNav.ts b/frontend/src/composables/useMobileNav.ts
new file mode 100644
index 0000000..50b9def
--- /dev/null
+++ b/frontend/src/composables/useMobileNav.ts
@@ -0,0 +1,61 @@
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const isSidebarOpen = ref(false);
+
+/**
+ * Mobile navigation state composable
+ * Manages sidebar drawer open/close state with auto-close on route change,
+ * resize detection, and ESC key handling.
+ */
+export function useMobileNav() {
+  const router = useRouter();
+
+  const open = () => {
+    isSidebarOpen.value = true;
+  };
+
+  const close = () => {
+    isSidebarOpen.value = false;
+  };
+
+  const toggle = () => {
+    isSidebarOpen.value = !isSidebarOpen.value;
+  };
+
+  // Auto-close sidebar on route change
+  watch(() => router.currentRoute.value.fullPath, () => {
+    close();
+  });
+
+  // Auto-close when resizing above md breakpoint (768px)
+  const handleResize = () => {
+    if (window.innerWidth >= 768) {
+      close();
+    }
+  };
+
+  // ESC key closes the drawer
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      close();
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('keydown', handleKeydown);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    window.removeEventListener('keydown', handleKeydown);
+  });
+
+  return {
+    isSidebarOpen,
+    open,
+    close,
+    toggle,
+  };
+}
diff --git a/frontend/src/views/ApplicationDetailView.vue b/frontend/src/views/ApplicationDetailView.vue
index a414379..6f3b3b7 100644
--- a/frontend/src/views/ApplicationDetailView.vue
+++ b/frontend/src/views/ApplicationDetailView.vue
@@ -635,12 +635,12 @@ const financialKpis = computed(() => {
 <template>
   <AppLayout :title="app?.name ?? 'Application'" :subtitle="app?.slug">
     <div class="space-y-5">
-      <div class="flex items-center justify-between">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
         <BaseButton variant="ghost" size="sm" @click="router.go(-1)">
           <ArrowLeft class="w-4 h-4" />
           {{ t('common.back') }}
         </BaseButton>
-        <div v-if="app" class="flex items-center gap-2">
+        <div v-if="app" class="flex items-center gap-2 flex-wrap">
           <BaseBadge :variant="app.isActive ? 'success' : 'neutral'" dot>{{ app.isActive ? t('common.active') : t('common.inactive') }}</BaseBadge>
           <BaseBadge variant="neutral">{{ app.isPublic ? t('applications.public') : t('applications.confidential') }}</BaseBadge>
         </div>
@@ -666,12 +666,12 @@ const financialKpis = computed(() => {
         <Sparkline :values="appActivity.sparkline" :width="140" :height="32" />
       </div>
 
-      <div class="flex gap-1 p-1 bg-surface-900/60 rounded-xl border border-surface-700/40 w-fit overflow-x-auto">
+      <div class="flex gap-1 p-1 bg-surface-900/60 rounded-xl border border-surface-700/40 overflow-x-auto -mx-6 sm:mx-0 px-6 sm:px-0 scroll-smooth snap-x snap-mandatory">
         <button
           v-for="tab in tabs"
           :key="tab.key"
           @click="activeTab = tab.key"
-          :class="['px-3 py-1.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap', activeTab === tab.key ? 'bg-primary-600/20 text-primary-300 shadow-sm' : 'text-surface-500 hover:text-surface-300']"
+          :class="['px-3 py-1.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap snap-start', activeTab === tab.key ? 'bg-primary-600/20 text-primary-300 shadow-sm' : 'text-surface-500 hover:text-surface-300']"
         >
           {{ tab.label }}
         </button>
diff --git a/frontend/src/views/ConfigurationView.vue b/frontend/src/views/ConfigurationView.vue
index 2a98981..9bccd8e 100644
--- a/frontend/src/views/ConfigurationView.vue
+++ b/frontend/src/views/ConfigurationView.vue
@@ -66,7 +66,7 @@ function getProvider(key: ProviderKey) {
             </div>
             <h2 class="text-sm font-semibold text-surface-200">{{ t('configuration.mfa') }}</h2>
           </div>
-          <div class="grid grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <p class="text-xs text-surface-500 mb-1">{{ t('configuration.mfaAdoption') }}</p>
               <p class="text-2xl font-bold text-surface-100">{{ mfaRate }}%</p>
@@ -88,7 +88,7 @@ function getProvider(key: ProviderKey) {
             </div>
             <h2 class="text-sm font-semibold text-surface-200">{{ t('configuration.platformInfo') }}</h2>
           </div>
-          <div class="grid grid-cols-3 gap-4">
+          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
             <div class="text-center">
               <div class="w-10 h-10 rounded-xl bg-primary-500/10 flex items-center justify-center mx-auto mb-2">
                 <Users class="w-5 h-5 text-primary-400" />
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 92847f2..4ad0ae0 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -249,7 +249,7 @@ void d;
 <template>
   <AppLayout :title="t('dashboard.title')" :subtitle="t('dashboard.subtitle')">
     <div class="space-y-6">
-      <div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
         <StatCard
           :label="t('dashboard.onlineNow')"
           :value="onlineCount ?? '—'"
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index fa8b894..06e8e8f 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -198,13 +198,13 @@ const showRegenerateBackup = ref(false);
     </div>
 
     <!-- Tab navigation -->
-    <div class="flex gap-1 p-1 bg-surface-900/60 rounded-xl border border-surface-700/40 w-fit overflow-x-auto mb-6">
+    <div class="flex gap-1 p-1 bg-surface-900/60 rounded-xl border border-surface-700/40 overflow-x-auto -mx-6 sm:mx-0 px-6 sm:px-0 mb-6 scroll-smooth snap-x snap-mandatory">
       <button
         v-for="tab in profileTabs"
         :key="tab.key"
         @click="activeTab = tab.key"
         :class="[
-          'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-150 whitespace-nowrap',
+          'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-150 whitespace-nowrap snap-start',
           activeTab === tab.key
             ? 'bg-primary-600/20 text-primary-300 shadow-sm'
             : 'text-surface-400 hover:text-surface-200 hover:bg-surface-800/60',
diff --git a/frontend/src/views/UserDetailView.vue b/frontend/src/views/UserDetailView.vue
index 7c16b04..84e6efc 100644
--- a/frontend/src/views/UserDetailView.vue
+++ b/frontend/src/views/UserDetailView.vue
@@ -90,7 +90,7 @@ const appColumns = computed<ColumnDef<UserApplicationDetail>[]>(() => [
 
       <template v-else-if="user">
         <div class="rounded-2xl bg-surface-900/60 border border-surface-700/40 p-6">
-          <div class="flex items-start gap-5">
+          <div class="flex flex-col sm:flex-row sm:items-start gap-4 sm:gap-5">
             <UserAvatar :name="user.name" :image="user.image" size="lg" />
             <div class="flex-1">
               <div class="flex items-center gap-3 flex-wrap">