From 6c06a2075aedf134e1ccdb056ac241796d404ca7 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 8 Sep 2025 23:45:21 +0200
Subject: [PATCH] Refactor MarketDashboard component for improved layout and
 responsiveness

- Adjust padding and margins for better spacing and visual hierarchy.
- Enhance tab navigation with improved overflow handling and responsive design.
- Update button styles for better accessibility and consistency across different screen sizes.

These changes enhance the user experience on the Market Dashboard, making it more intuitive and visually appealing.
---
 src/modules/market/views/MarketDashboard.vue | 46 ++++++++++----------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/modules/market/views/MarketDashboard.vue b/src/modules/market/views/MarketDashboard.vue
index f545e7a..0a2b0f7 100644
--- a/src/modules/market/views/MarketDashboard.vue
+++ b/src/modules/market/views/MarketDashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto px-4 py-8">
+  <div class="container mx-auto px-2 sm:px-4 py-4 sm:py-8">
     <!-- Page Header -->
     <div class="mb-8">
       <h1 class="text-3xl font-bold text-foreground">Market Dashboard</h1>
@@ -9,27 +9,29 @@
     </div>
 
     <!-- Dashboard Tabs -->
-    <div class="mb-6">
-      <nav class="flex space-x-8 border-b border-border">
-        <button
-          v-for="tab in tabs"
-          :key="tab.id"
-          @click="activeTab = tab.id"
-          :class="[
-            'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
-            activeTab === tab.id
-              ? 'border-primary text-primary'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
-          ]"
-        >
-          <div class="flex items-center space-x-2">
-            <component :is="tab.icon" class="w-4 h-4" />
-            <span>{{ tab.name }}</span>
-            <Badge v-if="tab.badge" variant="secondary" class="text-xs">
-              {{ tab.badge }}
-            </Badge>
-          </div>
-        </button>
+    <div class="mb-6 relative">
+      <nav class="border-b border-border overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+        <div class="flex space-x-4 sm:space-x-8 min-w-max">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            @click="activeTab = tab.id"
+            :class="[
+              'py-2 px-1 sm:px-2 border-b-2 font-medium text-xs sm:text-sm transition-colors whitespace-nowrap',
+              activeTab === tab.id
+                ? 'border-primary text-primary'
+                : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
+            ]"
+          >
+            <div class="flex items-center space-x-1.5 sm:space-x-2">
+              <component :is="tab.icon" class="w-4 h-4 flex-shrink-0" />
+              <span>{{ tab.name }}</span>
+              <Badge v-if="tab.badge" variant="secondary" class="text-xs ml-1">
+                {{ tab.badge }}
+              </Badge>
+            </div>
+          </button>
+        </div>
       </nav>
     </div>