From dc427f598140454c14852ac7dd485cd8f81624de Mon Sep 17 00:00:00 2001
From: Aran Roig <aranseraroig@gmail.com>
Date: Sun, 22 Mar 2026 01:46:36 +0100
Subject: [PATCH] Responsive?

---
 frontend/app/components/Sprite.vue            | 15 +++++++++++----
 frontend/app/components/parts/TableHeader.vue | 14 +++++++++++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Sprite.vue b/frontend/app/components/Sprite.vue
index ed9902a..93bd77f 100644
--- a/frontend/app/components/Sprite.vue
+++ b/frontend/app/components/Sprite.vue
@@ -1,8 +1,7 @@
 <template>
 <img ref="sprite" v-show="loaded"
     class="sprite pixelated"
-    :src="props.path" 
-    :width="props.width">
+    :src="props.path">
 </template>
 
 <script setup lang="ts">
@@ -13,8 +12,7 @@ const props = defineProps<{
   top?: string,
   right?: string,
   left?: string,
-  bottom?: string,
-  width: string
+  bottom?: string
 }>();
 
 const sprite = ref(null);
@@ -34,5 +32,14 @@ onMounted(() => {
 .sprite {
     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;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/app/components/parts/TableHeader.vue b/frontend/app/components/parts/TableHeader.vue
index d450649..772230e 100644
--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -44,7 +44,7 @@ onBeforeUnmount(() => {
                 <HeaderLinks></HeaderLinks>
         </div>
         <div class="undertable">
-            <Sprite :path="spritePath" bottom="-141px" left="-75px" width="1300"></Sprite> 
+            <Sprite :path="spritePath" bottom="-141px" left="-75px"></Sprite> 
         </div>
         <div class="header-container">
             <SiteOptions></SiteOptions>
@@ -71,6 +71,18 @@ onBeforeUnmount(() => {
     margin-left: -425px;
     margin-bottom: 25px;
     user-select: none;
+
+    @media screen and (max-width: 1200px) and (min-width: 900px) {
+        left: -50px;
+        bottom: 20px;
+        margin-top: 350px;
+    }
+
+    @media screen and (max-width: 900px) {
+        left: 70px;
+        bottom: 50px;
+        margin-top: 250px;
+    }
 }
 
 .web-links {