From 0a94c7b23d8fa734e2e7966c7107935c91867b01 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 26 Sep 2025 10:43:49 +0200
Subject: [PATCH] Refactor StallView layout for improved responsiveness and
 visual clarity

- Adjusted padding, margins, and font sizes throughout the StallView component to enhance mobile responsiveness and overall user experience.
- Updated the styling of various elements, including buttons, statistics, and category badges, to ensure better alignment with the design system and improved accessibility.
- Enhanced the layout of the stall information and search/filter bar for a more cohesive appearance across different screen sizes.

These changes provide a more visually appealing and user-friendly interface in the StallView component.
---
 src/modules/market/views/StallView.vue | 42 +++++++++++++-------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/modules/market/views/StallView.vue b/src/modules/market/views/StallView.vue
index 089a1c1..0eb8162 100644
--- a/src/modules/market/views/StallView.vue
+++ b/src/modules/market/views/StallView.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="container mx-auto px-4 py-6">
+  <div class="container mx-auto px-4 py-3 sm:py-6">
     <!-- Stall Header -->
-    <div class="mb-8">
+    <div class="mb-4 sm:mb-8">
       <!-- Back to Market Button -->
       <Button
         @click="goBackToMarket"
         variant="ghost"
         size="sm"
-        class="mb-4"
+        class="mb-2 sm:mb-4"
       >
         <ArrowLeft class="w-4 h-4 mr-2" />
         Back to Market
@@ -15,10 +15,10 @@
 
       <!-- Stall Info Card -->
       <Card class="overflow-hidden">
-        <div class="relative h-48 bg-gradient-to-r from-primary/80 to-accent">
+        <div class="relative h-24 sm:h-48 bg-gradient-to-r from-primary/80 to-accent">
           <!-- Stall Banner/Logo -->
           <div class="absolute inset-0 flex items-center justify-center">
-            <div v-if="stall?.logo" class="w-32 h-32 rounded-full bg-background p-2 shadow-lg">
+            <div v-if="stall?.logo" class="w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-background p-1 sm:p-2 shadow-lg">
               <img
                 :src="stall.logo"
                 :alt="stall.name"
@@ -26,43 +26,43 @@
                 @error="handleLogoError"
               />
             </div>
-            <div v-else class="w-32 h-32 rounded-full bg-background/95 flex items-center justify-center shadow-lg">
-              <Store class="w-16 h-16 text-muted-foreground" />
+            <div v-else class="w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-background/95 flex items-center justify-center shadow-lg">
+              <Store class="w-8 h-8 sm:w-16 sm:h-16 text-muted-foreground" />
             </div>
           </div>
         </div>
 
-        <CardContent class="pt-20 pb-6">
+        <CardContent class="pt-10 sm:pt-20 pb-4 sm:pb-6">
           <div class="text-center">
-            <h1 class="text-3xl font-bold mb-2 text-foreground">{{ stall?.name || 'Unknown Stall' }}</h1>
-            <p v-if="stall?.description" class="text-muted-foreground mb-4 max-w-2xl mx-auto">
+            <h1 class="text-lg sm:text-3xl font-bold mb-1 sm:mb-2 text-foreground">{{ stall?.name || 'Unknown Stall' }}</h1>
+            <p v-if="stall?.description" class="text-sm sm:text-base text-muted-foreground mb-3 sm:mb-4 max-w-2xl mx-auto px-2">
               {{ stall.description }}
             </p>
 
             <!-- Stall Stats -->
-            <div class="flex justify-center gap-8 mt-6">
+            <div class="flex justify-center gap-4 sm:gap-8 mt-3 sm:mt-6">
               <div class="text-center">
-                <div class="text-2xl font-bold text-primary">{{ productCount }}</div>
-                <div class="text-sm text-muted-foreground">Products</div>
+                <div class="text-lg sm:text-2xl font-bold text-primary">{{ productCount }}</div>
+                <div class="text-xs sm:text-sm text-muted-foreground">Products</div>
               </div>
               <div class="text-center">
-                <div class="text-2xl font-bold text-foreground">{{ stall?.currency || 'sats' }}</div>
-                <div class="text-sm text-muted-foreground">Currency</div>
+                <div class="text-lg sm:text-2xl font-bold text-foreground">{{ stall?.currency || 'sats' }}</div>
+                <div class="text-xs sm:text-sm text-muted-foreground">Currency</div>
               </div>
               <div v-if="stall?.shipping?.length" class="text-center">
-                <div class="text-2xl font-bold text-foreground">{{ stall.shipping.length }}</div>
-                <div class="text-sm text-muted-foreground">Shipping Zones</div>
+                <div class="text-lg sm:text-2xl font-bold text-foreground">{{ stall.shipping.length }}</div>
+                <div class="text-xs sm:text-sm text-muted-foreground">Shipping Zones</div>
               </div>
             </div>
 
             <!-- Categories -->
-            <div v-if="stallCategories.length > 0" class="mt-6">
-              <div class="flex flex-wrap justify-center gap-2">
+            <div v-if="stallCategories.length > 0" class="mt-3 sm:mt-6">
+              <div class="flex flex-wrap justify-center gap-1 sm:gap-2">
                 <Badge
                   v-for="category in stallCategories"
                   :key="category"
                   variant="secondary"
-                  class="cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
+                  class="text-xs sm:text-sm px-2 py-1 cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
                   @click="toggleCategoryFilter(category)"
                   :class="{ 'bg-primary text-primary-foreground': selectedCategories.includes(category) }"
                 >
@@ -76,7 +76,7 @@
     </div>
 
     <!-- Search and Filter Bar -->
-    <div class="mb-6 flex flex-col sm:flex-row gap-4">
+    <div class="mb-4 sm:mb-6 flex flex-col sm:flex-row gap-2 sm:gap-4">
       <div class="flex-1">
         <FuzzySearch
           :data="stallProducts"