From ef6a199011bf945c6cfa250564a03df591bb131f Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 10 Feb 2025 21:45:03 +0100
Subject: [PATCH] make mobile view more compact

---
 src/components/directory/DirectoryFilter.vue | 8 ++++----
 src/components/directory/DirectoryGrid.vue   | 4 ++--
 src/pages/Directory.vue                      | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/directory/DirectoryFilter.vue b/src/components/directory/DirectoryFilter.vue
index 8635403..7b28040 100644
--- a/src/components/directory/DirectoryFilter.vue
+++ b/src/components/directory/DirectoryFilter.vue
@@ -71,7 +71,7 @@ const towns = computed(() => [
 </script>
 
 <template>
-  <div class="w-full flex flex-col md:flex-row gap-4">
+  <div class="w-full flex flex-col md:flex-row gap-2 sm:gap-4">
     <!-- Search Input -->
     <div class="relative flex-1">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -81,9 +81,9 @@ const towns = computed(() => [
         class="pl-10" :placeholder="t('directory.search')" />
     </div>
 
-    <div class="flex flex-col md:flex-row gap-2">
+    <div class="flex flex-col md:flex-row gap-1 sm:gap-2">
       <!-- Category Filter -->
-      <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
+      <div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
         <Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
           :variant="category === cat.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
           <!-- Show only icon on mobile for non-'all' categories -->
@@ -109,7 +109,7 @@ const towns = computed(() => [
       </div>
 
       <!-- Town Filter -->
-      <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
+      <div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
         <Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
           :variant="town === to.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
           {{ to.label }}
diff --git a/src/components/directory/DirectoryGrid.vue b/src/components/directory/DirectoryGrid.vue
index 55e4d15..1c9df5e 100644
--- a/src/components/directory/DirectoryGrid.vue
+++ b/src/components/directory/DirectoryGrid.vue
@@ -53,9 +53,9 @@ const filteredItems = computed(() => {
 </script>
 
 <template>
-  <div class="container mx-auto px-4 py-8">
+  <div class="container mx-auto px-4 py-2 sm:py-8">
     <!-- Filters -->
-    <div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
+    <div class="mb-4 sm:mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
       <DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" v-model:town="selectedTown" />
     </div>
 
diff --git a/src/pages/Directory.vue b/src/pages/Directory.vue
index e62f82c..62e7206 100644
--- a/src/pages/Directory.vue
+++ b/src/pages/Directory.vue
@@ -11,13 +11,13 @@ const items = mockDirectoryItems
 
 <template>
   <div class="container mx-auto px-4 py-8">
-    <div class="space-y-8">
-      <!-- Directory Header -->
-      <div class="text-center">
+    <div class="space-y-4 sm:space-y-8">
+      <!-- Directory Header - Hidden on mobile -->
+      <div class="hidden sm:block text-center space-y-4">
         <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
           {{ t('directory.title') }}
         </h1>
-        <p class="mt-4 text-lg text-muted-foreground">
+        <p class="text-lg text-muted-foreground">
           {{ t('directory.subtitle') }}
         </p>
       </div>