From 072a985ba07c3cc90b9ab508a3427a2a21bcf3b0 Mon Sep 17 00:00:00 2001
From: henry <dev@henrystuifzand.nl>
Date: Sun, 15 Mar 2026 06:49:47 +0100
Subject: [PATCH] Make application responsive for mobile and tablet

Breakpoints at 600px (tablet) and 420px (mobile):
- Header: smaller emblem and title on mobile
- StandingsTable: hide DV/DT/Vorm at 600px, also W/D/L at 420px
- TeamMatchesModal: bottom sheet on mobile, hide matchday column
- CompetitionPicker: smaller buttons, hide country label on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.module.css                          | 20 ++++++++-
 src/components/CompetitionPicker.module.css | 23 +++++++++-
 src/components/StandingsTable.module.css    | 46 +++++++++++++++++++-
 src/components/TeamMatchesModal.module.css  | 48 +++++++++++++++++++++
 4 files changed, 132 insertions(+), 5 deletions(-)

diff --git a/src/App.module.css b/src/App.module.css
index 8600eaf..80e55e9 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -8,15 +8,16 @@
   display: flex;
   align-items: center;
   gap: 1.25rem;
-  padding: 2rem 0 1.75rem;
+  padding: 1.5rem 0;
   border-bottom: 2px solid #e87722;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .emblem {
   width: 64px;
   height: 64px;
   object-fit: contain;
+  flex-shrink: 0;
 }
 
 .title {
@@ -35,3 +36,18 @@
 .main {
   width: 100%;
 }
+
+@media (max-width: 600px) {
+  .emblem {
+    width: 44px;
+    height: 44px;
+  }
+
+  .title {
+    font-size: 1.25rem;
+  }
+
+  .season {
+    font-size: 0.78rem;
+  }
+}
diff --git a/src/components/CompetitionPicker.module.css b/src/components/CompetitionPicker.module.css
index f126e71..e5f7fe7 100644
--- a/src/components/CompetitionPicker.module.css
+++ b/src/components/CompetitionPicker.module.css
@@ -1,7 +1,6 @@
 .nav {
   overflow-x: auto;
-  margin-bottom: 2rem;
-  /* hide scrollbar but keep scrollability */
+  margin-bottom: 1.5rem;
   scrollbar-width: none;
 }
 .nav::-webkit-scrollbar { display: none; }
@@ -66,3 +65,23 @@
 .btn.active .country {
   color: #e87722;
 }
+
+@media (max-width: 600px) {
+  .btn {
+    min-width: 64px;
+    padding: 0.5rem 0.6rem;
+  }
+
+  .emblem {
+    width: 22px;
+    height: 22px;
+  }
+
+  .name {
+    font-size: 0.62rem;
+  }
+
+  .country {
+    display: none;
+  }
+}
diff --git a/src/components/StandingsTable.module.css b/src/components/StandingsTable.module.css
index f546478..996a829 100644
--- a/src/components/StandingsTable.module.css
+++ b/src/components/StandingsTable.module.css
@@ -86,7 +86,7 @@
   align-items: center;
   gap: 0.6rem;
   text-align: left !important;
-  min-width: 180px;
+  min-width: 140px;
 }
 
 .crest {
@@ -145,3 +145,47 @@
   padding-top: 1rem;
   border-top: 1px solid #1f1f1f;
 }
+
+/*
+  Column order in thead/tbody:
+  1=pos  2=team  3=G  4=W  5=D  6=L  7=DV  8=DT  9=DS  10=Ptn  11=Vorm
+*/
+
+/* Tablet: hide DV, DT, Vorm */
+@media (max-width: 600px) {
+  .table th:nth-child(7),
+  .table td:nth-child(7),
+  .table th:nth-child(8),
+  .table td:nth-child(8),
+  .table th:nth-child(11),
+  .table td:nth-child(11) {
+    display: none;
+  }
+
+  .table th,
+  .table td {
+    padding: 0.6rem 0.5rem;
+  }
+}
+
+/* Mobile: also hide W, D, L */
+@media (max-width: 420px) {
+  .table th:nth-child(4),
+  .table td:nth-child(4),
+  .table th:nth-child(5),
+  .table td:nth-child(5),
+  .table th:nth-child(6),
+  .table td:nth-child(6) {
+    display: none;
+  }
+
+  .team {
+    min-width: 110px;
+  }
+
+  .table th,
+  .table td {
+    padding: 0.55rem 0.35rem;
+    font-size: 0.8rem;
+  }
+}
diff --git a/src/components/TeamMatchesModal.module.css b/src/components/TeamMatchesModal.module.css
index d688019..9a691ad 100644
--- a/src/components/TeamMatchesModal.module.css
+++ b/src/components/TeamMatchesModal.module.css
@@ -196,3 +196,51 @@
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+/* Mobile: full-screen modal, compact match rows */
+@media (max-width: 600px) {
+  .backdrop {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .modal {
+    max-width: 100%;
+    max-height: 92vh;
+    border-radius: 16px 16px 0 0;
+    border-bottom: none;
+  }
+
+  .header {
+    padding: 1rem 1rem;
+  }
+
+  .teamInfo h2 {
+    font-size: 1rem;
+  }
+
+  .body {
+    padding: 1rem;
+  }
+
+  /* Compact match grid: hide matchday column */
+  .matchRow {
+    grid-template-columns: 48px 1fr 52px 1fr;
+    gap: 0.35rem;
+    padding: 0.5rem 0.5rem;
+    font-size: 0.78rem;
+  }
+
+  .matchday {
+    display: none;
+  }
+
+  .miniCrest {
+    width: 14px;
+    height: 14px;
+  }
+
+  .score {
+    font-size: 0.82rem;
+  }
+}