From 9748de428626a09b04992f5a4b61a469a55e8fde Mon Sep 17 00:00:00 2001
From: Aran Roig <aranseraroig@gmail.com>
Date: Sun, 22 Mar 2026 01:59:30 +0100
Subject: [PATCH] repsonsive 2

---
 frontend/app/components/Sprite.vue            | 14 +++++++----
 frontend/app/components/parts/PageHeader.vue  | 10 +++++++-
 frontend/app/components/parts/TableHeader.vue | 24 +++++++++++++++----
 .../parts/site_options/SiteOptions.vue        |  4 ++++
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/Sprite.vue b/frontend/app/components/Sprite.vue
index 93bd77f..ca576dd 100644
--- a/frontend/app/components/Sprite.vue
+++ b/frontend/app/components/Sprite.vue
@@ -33,13 +33,17 @@ onMounted(() => {
     position: absolute;
     z-index: 1;
     width: 1300px;
-
-    @media screen and (max-width: 900px) {
-        width: 650px;
-    }
-
+    
     @media screen and (max-width: 1200px) and (min-width: 900px) {
         width: 975px;
     }
+
+    @media screen and (max-width: 900px) and (min-width: 600px) {
+        width: 650px;
+    }
+
+    @media screen and (max-width: 600px){
+        width: 425px;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/app/components/parts/PageHeader.vue b/frontend/app/components/parts/PageHeader.vue
index 0153bdc..fc6e44c 100644
--- a/frontend/app/components/parts/PageHeader.vue
+++ b/frontend/app/components/parts/PageHeader.vue
@@ -6,7 +6,7 @@ import SiteOptions from './site_options/SiteOptions.vue';
 <template>
     <div class="header">
         <div class="container">
-            <div class="header-container">
+            <div class="header-container website">
                 <h1>ARANROIG.COM</h1>
                 <HeaderLinks></HeaderLinks>
             </div>
@@ -28,6 +28,14 @@ import SiteOptions from './site_options/SiteOptions.vue';
     justify-content: space-between;
 }
 
+.header-container {
+    &.website {
+        @media screen and (max-width: 600px) {
+            margin-top: 20px;
+        }
+    }
+}
+
 .header-container {
     position:relative;
     margin-bottom: 20px;
diff --git a/frontend/app/components/parts/TableHeader.vue b/frontend/app/components/parts/TableHeader.vue
index 772230e..8d897ed 100644
--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -39,7 +39,7 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="header">
-        <div class="header-container">
+        <div class="header-container website">
                 <h1 class="title">{{ displayedText }}</h1>
                 <HeaderLinks></HeaderLinks>
         </div>
@@ -53,9 +53,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
-.header-conainer {
-    position:relative;
-}
 .header {
     position: relative;
     margin-top: 30px;
@@ -64,6 +61,16 @@ onBeforeUnmount(() => {
     justify-content: space-between;
 }
 
+.header-container {
+    
+    &.website {
+        z-index: 200;
+        @media screen and (max-width: 600px) {
+            margin-top: 20px;
+        }
+    }
+}
+
 .undertable {
     position: relative;
     left: -200px;
@@ -71,6 +78,7 @@ onBeforeUnmount(() => {
     margin-left: -425px;
     margin-bottom: 25px;
     user-select: none;
+    pointer-events: none;
 
     @media screen and (max-width: 1200px) and (min-width: 900px) {
         left: -50px;
@@ -78,11 +86,17 @@ onBeforeUnmount(() => {
         margin-top: 350px;
     }
 
-    @media screen and (max-width: 900px) {
+    @media screen and (max-width: 900px) and (min-width: 600px) {
         left: 70px;
         bottom: 50px;
         margin-top: 250px;
     }
+
+    @media screen and (max-width: 600px) {
+        left: 150px;
+        bottom: 70px;
+        margin-top: 250px;
+    }
 }
 
 .web-links {
diff --git a/frontend/app/components/parts/site_options/SiteOptions.vue b/frontend/app/components/parts/site_options/SiteOptions.vue
index f49ad7d..330a424 100644
--- a/frontend/app/components/parts/site_options/SiteOptions.vue
+++ b/frontend/app/components/parts/site_options/SiteOptions.vue
@@ -15,5 +15,9 @@ import ThemeSelector from './ThemeSelector.vue';
     display: flex;
     justify-content: right;
     width: 400px;
+
+    @media screen and (max-width: 600px) {
+        margin-top: -10px;
+    }
 }
 </style>
\ No newline at end of file