From ccc829ea2f757a9beb1f8be9c317fb435ca0106a Mon Sep 17 00:00:00 2001
From: Joachim <joachim.l.kolle.pers@gmail.com>
Date: Mon, 23 Mar 2026 20:15:56 +0100
Subject: [PATCH] feat: enhance LanguageSwitcher component with drop-up option
 and improve layout for candidate and job detail pages

---
 app/components/AppTopBar.vue            |  2 +-
 app/components/LanguageSwitcher.vue     |  9 ++++++++-
 app/pages/dashboard/candidates/[id].vue | 10 +++++-----
 app/pages/dashboard/jobs/[id]/index.vue |  2 +-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/components/AppTopBar.vue b/app/components/AppTopBar.vue
index 3dc68b60..1f72be2c 100644
--- a/app/components/AppTopBar.vue
+++ b/app/components/AppTopBar.vue
@@ -508,7 +508,7 @@ onUnmounted(() => {
 
         <div class="px-4 pb-3 flex flex-col gap-2 border-t border-surface-100 dark:border-surface-800 pt-3 lg:hidden">
           <OrgSwitcher />
-          <LanguageSwitcher />
+          <LanguageSwitcher drop-up />
         </div>
       </div>
     </Transition>
diff --git a/app/components/LanguageSwitcher.vue b/app/components/LanguageSwitcher.vue
index 45509320..f7fcd850 100644
--- a/app/components/LanguageSwitcher.vue
+++ b/app/components/LanguageSwitcher.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { ChevronDown } from 'lucide-vue-next'
 
+const props = withDefaults(defineProps<{
+  dropUp?: boolean
+}>(), {
+  dropUp: false,
+})
+
 const route = useRoute()
 const requestURL = useRequestURL()
 const { locale, locales, t } = useI18n()
@@ -189,7 +195,8 @@ async function handleLocaleChange(nextLocale: string) {
         v-if="isOpen"
         role="listbox"
         :aria-label="t('common.selectLanguage')"
-        class="absolute right-0 z-50 mt-1 min-w-40 rounded-md border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-lg py-1 text-xs"
+        class="absolute z-50 min-w-40 rounded-md border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-lg py-1 text-xs"
+        :class="props.dropUp ? 'left-0 bottom-full mb-1' : 'right-0 mt-1'"
       >
         <li
           v-for="option in localeOptions"
diff --git a/app/pages/dashboard/candidates/[id].vue b/app/pages/dashboard/candidates/[id].vue
index 2d22a021..7231d2cf 100644
--- a/app/pages/dashboard/candidates/[id].vue
+++ b/app/pages/dashboard/candidates/[id].vue
@@ -300,12 +300,12 @@ function formatFileSize(bytes: number | null | undefined): string {
       <!-- VIEW MODE -->
       <div v-if="!isEditing">
         <!-- Header -->
-        <div class="flex items-start justify-between gap-4 mb-6">
+        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
           <div class="min-w-0">
             <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-50 truncate mb-1">
               {{ candidate.firstName }} {{ candidate.lastName }}
             </h1>
-            <div class="flex items-center gap-4 text-sm text-surface-500">
+            <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-sm text-surface-500">
               <a
                 :href="`mailto:${candidate.email}`"
                 target="_blank"
@@ -342,7 +342,7 @@ function formatFileSize(bytes: number | null | undefined): string {
         <!-- Contact details -->
         <div class="rounded-lg border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 p-5 mb-4">
           <h2 class="text-sm font-semibold text-surface-700 dark:text-surface-200 mb-3">Details</h2>
-          <dl class="grid grid-cols-2 gap-3 text-sm">
+          <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
             <div>
               <dt class="text-surface-400">Email</dt>
               <dd class="text-surface-700 dark:text-surface-200 font-medium">
@@ -429,7 +429,7 @@ function formatFileSize(bytes: number | null | undefined): string {
             <div
               v-for="app in candidate.applications"
               :key="app.id"
-              class="flex items-center justify-between rounded-lg border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 px-4 py-3 hover:border-surface-300 dark:hover:border-surface-700 hover:shadow-sm transition-all group"
+              class="flex flex-col sm:flex-row sm:items-center sm:justify-between rounded-lg border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 px-4 py-3 hover:border-surface-300 dark:hover:border-surface-700 hover:shadow-sm transition-all group gap-2"
             >
               <NuxtLink
                 :to="$localePath(`/dashboard/applications/${app.id}`)"
@@ -442,7 +442,7 @@ function formatFileSize(bytes: number | null | undefined): string {
                   Applied {{ new Date(app.createdAt).toLocaleDateString() }}
                 </span>
               </NuxtLink>
-              <div class="flex items-center gap-2 shrink-0 ml-3">
+              <div class="flex items-center gap-2 shrink-0 sm:ml-3">
                 <button
                   class="inline-flex items-center gap-1 rounded-lg border border-surface-200 dark:border-surface-700 px-2 py-1 text-xs font-medium text-surface-600 dark:text-surface-400 hover:border-brand-400 dark:hover:border-brand-600 hover:bg-brand-50 dark:hover:bg-brand-950/30 hover:text-brand-700 dark:hover:text-brand-300 transition-all cursor-pointer"
                   title="Schedule Interview"
diff --git a/app/pages/dashboard/jobs/[id]/index.vue b/app/pages/dashboard/jobs/[id]/index.vue
index f698549e..bd8ae075 100644
--- a/app/pages/dashboard/jobs/[id]/index.vue
+++ b/app/pages/dashboard/jobs/[id]/index.vue
@@ -1690,7 +1690,7 @@ function closeDocPreview() {
 
             <!-- Detail tabs -->
             <div class="border-b border-surface-200/80 bg-white px-4 sm:px-6 dark:border-surface-800/60 dark:bg-surface-900">
-              <div class="mx-auto max-w-4xl flex gap-1 -mb-px overflow-x-auto scrollbar-none">
+              <div class="mx-auto max-w-4xl flex gap-1 -mb-px overflow-x-auto scrollbar-none whitespace-nowrap">
                 <div ref="overviewDropdownRef" class="relative">
                   <div class="flex items-center border-b-2 transition-all duration-150" :class="detailTab === 'overview'
                     ? 'border-brand-600 dark:border-brand-400'