fix: mobile responsiveness final

.github/workflows/api-tests.yml

@@ -4,7 +4,7 @@ name: API Tests on Supabase DB
 
 on:
   workflow_dispatch:
-    branches: [ "main" ]
+    branches: ["main"]
 
 permissions:
   contents: read
@@ -13,7 +13,7 @@ permissions:
 jobs:
   api-tests:
     runs-on: ubuntu-latest
-    
+
     env: # makes env vars available to all steps
       DATABASE_URL: ${{ secrets.DATABASE_URL }}
 
@@ -32,11 +32,9 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: pnpm install --frozen-lockfile
 
-
       - name: Create .env for db package
         run: echo "DATABASE_URL=${DATABASE_URL}" > packages/db/.env
       - name: Create .env for api package
         run: echo "DATABASE_URL=${DATABASE_URL}" > packages/api/.env
 
-
       - run: pnpm run test:api

.github/workflows/check-types.yml

@@ -4,11 +4,11 @@ name: Type Checking
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
   workflow_dispatch:
-    branches: [ "main" ]
+    branches: ["main"]
 
 permissions:
   contents: read

apps/docs/app/page.module.css

@@ -68,7 +68,10 @@
   padding: 0 20px;
   font-family: var(--font-geist-sans);
   border: 1px solid transparent;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -96,7 +99,10 @@ button.secondary {
   padding: 0 20px;
   font-family: var(--font-geist-sans);
   border: 1px solid transparent;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
   cursor: pointer;
   display: flex;
   align-items: center;

apps/docs/tsconfig.json

@@ -14,7 +14,5 @@
     "next.config.js",
     ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

apps/web/app/globals.css

@@ -47,91 +47,113 @@
 }
 
 @keyframes spin {
-	100% { transform: rotate(360deg); }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes slideUp {
-	from {
-		transform: translateY(100px);
-		opacity: 0;
-	}
-
-	to {
-		transform: translateY(0);
-		opacity: 1;
-	}
+  from {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 @keyframes fadeIn {
-	from {
-		opacity: 0;
-		transform: scale(0.95);
-	}
-
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 @keyframes fadeUp {
-	from {
-		opacity: 0;
-		transform: translateY(20px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes pulse {
-	0% {
-		opacity: 1;
-	}
+  0% {
+    opacity: 1;
+  }
 
-	50% {
-		opacity: 0.4;
-	}
+  50% {
+    opacity: 0.4;
+  }
 
-	100% {
-		opacity: 1;
-	}
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes scrollText {
-    0%, 20% { 
-        transform: translateX(0); 
-    }
-    80%, 100% {
-        transform: translateX(min(0px, calc(-100% + 100cqw))); 
-    }
+  0%,
+  20% {
+    transform: translateX(0);
+  }
+  80%,
+  100% {
+    transform: translateX(min(0px, calc(-100% + 100cqw)));
+  }
 }
 
 @keyframes extrudeRight {
-	from { opacity: 0; transform: translateX(-15px) scale(0.9); }
-	to { opacity: 1; transform: translateX(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateX(-15px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
 }
 
 @keyframes pulseGlow {
-	0% { box-shadow: 0 0 15px var(--shadow-glow), inset 0 0 10px var(--shadow-glow); }
-	100% { box-shadow: 0 0 25px var(--shadow-glow), inset 0 0 15px var(--shadow-glow); }
+  0% {
+    box-shadow:
+      0 0 15px var(--shadow-glow),
+      inset 0 0 10px var(--shadow-glow);
+  }
+  100% {
+    box-shadow:
+      0 0 25px var(--shadow-glow),
+      inset 0 0 15px var(--shadow-glow);
+  }
 }
 
 @keyframes radarPing {
-	0% {
-		transform: scale(0.8);
-		opacity: 0.8;
-	}
-	100% {
-		transform: scale(4.5);
-		opacity: 0;
-	}
+  0% {
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(4.5);
+    opacity: 0;
+  }
 }
 
 @keyframes slideRight {
-	from { transform: translateX(-100%); }
-	to { transform: translateX(0); }
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @theme {
@@ -144,15 +166,15 @@
   --color-base: var(--bg-base);
   --color-panel: var(--bg-panel);
   --color-panel-hover: var(--bg-panel-hover);
-  
+
   --color-primary: var(--text-primary);
   --color-secondary: var(--text-secondary);
   --color-border-color: var(--border-color);
-  
+
   --color-neon-blue: var(--neon-blue);
   --color-neon-red: var(--neon-red);
   --color-neon-yellow: var(--neon-yellow);
-  
+
   --color-status-success: var(--status-success);
   --color-status-warning: var(--status-warning);
   --color-status-danger: var(--status-danger);
@@ -168,7 +190,8 @@
 
   --animate-pan: autoPan 20s linear infinite;
   --animate-scroll-text: scrollText 5s ease-in-out infinite alternate;
-  --animate-slide-up: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+  --animate-slide-up: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
   --animate-fade-in: fadeIn 0.2s ease-out forwards;
   --animate-fade-up: fadeUp 0.3s ease-out forwards;
   --animate-pulse-glow: pulseGlow 2s infinite alternate;
@@ -178,71 +201,71 @@
 }
 
 body {
-	background-color: var(--bg-base);
-	color: var(--text-primary);
-	transition:
-		background-color 0.3s ease,
-		color 0.3s ease;
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-	font-family: var(--font-chakra), sans-serif;
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: var(--font-chakra), sans-serif;
 }
 
 p {
-	font-family: var(--font-nunito), sans-serif;
+  font-family: var(--font-nunito), sans-serif;
 }
 
 .map-container {
-	width: 100vw;
-	height: 100vh;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 0;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
 }
 
 .tactical-panel {
-    @apply bg-panel backdrop-blur-md border border-border-color rounded-2xl text-primary shadow-[0_8px_32px_rgba(0,0,0,0.15)] transition-colors duration-300;
+  @apply bg-panel backdrop-blur-md border border-border-color rounded-2xl text-primary shadow-[0_8px_32px_rgba(0,0,0,0.15)] transition-colors duration-300;
 }
 
 .tactical-button {
-    @apply bg-panel border border-border-color text-primary rounded-lg font-chakra font-semibold cursor-pointer transition-all duration-200 hover:bg-panel-hover hover:-translate-y-[2px] active:translate-y-[1px];
+  @apply bg-panel border border-border-color text-primary rounded-lg font-chakra font-semibold cursor-pointer transition-all duration-200 hover:bg-panel-hover hover:-translate-y-[2px] active:translate-y-[1px];
 }
 
 .tactical-button:hover {
-	background: var(--bg-panel-hover);
-	transform: translateY(-2px);
+  background: var(--bg-panel-hover);
+  transform: translateY(-2px);
 }
 
 .tactical-button:active {
-	transform: translateY(1px);
+  transform: translateY(1px);
 }
 
 .tactical-button-primary {
-    @apply bg-neon-blue/15 border border-neon-blue text-neon-blue shadow-[0_0_10px_var(--shadow-glow)] rounded-lg font-chakra font-semibold cursor-pointer transition-all duration-200 hover:bg-neon-blue hover:text-base hover:shadow-[0_0_20px_var(--color-neon-blue)] active:translate-y-[1px];
+  @apply bg-neon-blue/15 border border-neon-blue text-neon-blue shadow-[0_0_10px_var(--shadow-glow)] rounded-lg font-chakra font-semibold cursor-pointer transition-all duration-200 hover:bg-neon-blue hover:text-base hover:shadow-[0_0_20px_var(--color-neon-blue)] active:translate-y-[1px];
 }
 
 .tactical-button-primary:hover {
-	background: var(--neon-blue);
-	color: var(--bg-base);
-	box-shadow: 0 0 20px var(--neon-blue);
+  background: var(--neon-blue);
+  color: var(--bg-base);
+  box-shadow: 0 0 20px var(--neon-blue);
 }
 
 .no-scrollbar::-webkit-scrollbar {
-	display: none;
+  display: none;
 }
 
 .icon-button,
 .control-button {
-    @apply w-11 h-11 bg-panel backdrop-blur-md border border-border-color rounded-xl text-primary flex items-center justify-center cursor-pointer transition-transform duration-100 font-chakra active:scale-95;
+  @apply w-11 h-11 bg-panel backdrop-blur-md border border-border-color rounded-xl text-primary flex items-center justify-center cursor-pointer transition-transform duration-100 font-chakra active:scale-95;
 }
 
 .icon-button:active,
 .control-button:active {
-	transform: scale(0.92);
+  transform: scale(0.92);
 }
 
 .control-button {
-    @apply border-none rounded-none;
-}
+  @apply border-none rounded-none;
+}