From 20b65fd15ef8ef249b14c324a2033c6b1dc3a508 Mon Sep 17 00:00:00 2001
From: BinarySandia04 <aranseraroig@gmail.com>
Date: Wed, 10 Jun 2026 18:45:59 +0200
Subject: [PATCH] More responsiveness

---
 frontend/app/components/parts/HeaderLinks.vue |  1 +
 frontend/app/components/parts/TableHeader.vue | 11 ++++++++++-
 frontend/app/pages/index.vue                  | 10 +++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/parts/HeaderLinks.vue b/frontend/app/components/parts/HeaderLinks.vue
index bf27d7c..9bb2ca8 100644
--- a/frontend/app/components/parts/HeaderLinks.vue
+++ b/frontend/app/components/parts/HeaderLinks.vue
@@ -132,6 +132,7 @@ function getToPath(targetKey: string): string {
         justify-content: center;
         min-height: 36px;
         padding: 6px 8px;
+        white-space: nowrap;
     }
 }
 
diff --git a/frontend/app/components/parts/TableHeader.vue b/frontend/app/components/parts/TableHeader.vue
index f930b31..693af86 100644
--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -124,6 +124,11 @@ const preloadImages = (imageArray) => {
     user-select: none;
     display: flex;
     justify-content: space-between;
+
+    @media screen and (max-width: 670px) {
+        flex-direction: column;
+        gap: 8px;
+    }
 }
 
 .header-container {
@@ -153,7 +158,11 @@ const preloadImages = (imageArray) => {
     }
 
     @media screen and (max-width: 600px) {
-        margin-top: -240px;
+        margin-top: -300px;
+    }
+
+    @media screen and (max-width: 480px) {
+        margin-top: -340px;
     }
 }
 
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index 57d1c2c..b8b6f6e 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -373,7 +373,15 @@ const sectionTargets = {
   }
 
   @media screen and (max-width: 900px) {
-    margin-top: 60px;
+    margin-top: 100px;
+  }
+
+  @media screen and (max-width: 600px) {
+      margin-top: 140px;
+  }
+
+  @media screen and (max-width: 480px) {
+      margin-top: 180px;
   }
 }