More responsiveness

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;
     }
 }
 

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;
     }
 }
 

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;
   }
 }