From afc6522b47232d94d70955a6112f4bc6596b1b98 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Wed, 16 Sep 2026 15:19:24 +0200
Subject: [PATCH 1/3] feat: Added style to inputs, and border color on
 DriverDetail component

---
 src/App.css                     | 40 +++++++++++++++++++++++++++++++++
 src/components/DriverCard.tsx   | 13 ++---------
 src/components/DriverDetail.tsx |  9 ++++----
 3 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/App.css b/src/App.css
index 1d1a421..6fcedab 100644
--- a/src/App.css
+++ b/src/App.css
@@ -159,6 +159,22 @@ body {
   border-top: 1px solid grey;
 }
 
+@media (max-width: 1050px) {
+  .driver-detail {
+    box-sizing: border-box;
+    width: min(440px, calc(100% - 2rem));
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    margin: 0;
+    max-height: calc(100dvh - 2rem);
+    overflow-y: auto;
+    box-shadow: 0 1rem 3rem rgb(0 0 0 / 50%);
+  }
+}
+
 .meeting-list {
   width: 100%;
   max-width: 760px;
@@ -245,4 +261,28 @@ body {
   color: white;
 }
 
+input,
+select,
+button {
+  background-color: #15151e;
+  color: white;
+
+  border: 1px solid #6b6b75;
+  border-radius: 6px;
 
+  padding: 8px 12px;
+  font-size: 1rem;
+  margin: 4px;
+  outline: none;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: #545bd7;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #8a8a94;
+}
diff --git a/src/components/DriverCard.tsx b/src/components/DriverCard.tsx
index 67c688e..c7dcb0c 100644
--- a/src/components/DriverCard.tsx
+++ b/src/components/DriverCard.tsx
@@ -29,10 +29,10 @@ export default function DriverCard({
     driver,
     teamStanding,
     teamStandingsPending,
-    teamStandingsError, 
+    teamStandingsError,
     isFavorite,
     onToggleFavorite,
-    isSelected, 
+    isSelected,
     onSelect
 }: DriverCardProps) {
 
@@ -58,15 +58,6 @@ export default function DriverCard({
             <h1 style={{ color: `#${driver.team_colour}` }}>{driver.number}</h1>
             <h2>{driver.name}</h2>
             <img style={{ backgroundColor: `#${driver.team_colour}` }} src={driver.headshot_url ? driver.headshot_url : DEFAULT_AVATAR_URL} alt={driver.name} />
-            <p>{driver.points_current}</p>
-            <p>{driver.position_current}</p>
-            <p>
-                Team points: {teamStandingsPending
-                    ? 'Loading...'
-                    : teamStandingsError
-                        ? 'Could not load points'
-                        : teamStanding?.points_current ?? 'Unavailable'}
-            </p>
         </div>
     )
 }
diff --git a/src/components/DriverDetail.tsx b/src/components/DriverDetail.tsx
index 79e5fcd..be9412a 100644
--- a/src/components/DriverDetail.tsx
+++ b/src/components/DriverDetail.tsx
@@ -31,7 +31,8 @@ export default function DriverDetail({
 }: DriverDetailProps) {
 
     return (
-        <div className="driver-detail">
+        <div className="driver-detail"
+            style={{ border: `3px solid #${driver?.team_colour}` }}>
             <div className="driver-detail-nav">
                 <button
                     type="button"
@@ -66,7 +67,7 @@ export default function DriverDetail({
                         src={driver.headshot_url ? driver.headshot_url : DEFAULT_AVATAR_URL}
                         alt={driver.name}
                         onError={(event) => { event.currentTarget.src = DEFAULT_AVATAR_URL }}
-                    />
+                    />  
 
                     <div className="driver-detail-heading">
                         <h2 className="driver-detail-name">{driver.name}</h2>
@@ -98,8 +99,8 @@ export default function DriverDetail({
                                 {teamStandingsPending
                                     ? 'Loading...'
                                     : teamStandingsError
-                                    ? 'Unavailable'
-                                    : teamStanding?.points_current ?? 'Unavailable'}
+                                        ? 'Unavailable'
+                                        : teamStanding?.points_current ?? 'Unavailable'}
                             </span>
                         </div>
                     </div>

From 90afa8a8ff988b0ea2ea539e1f5086ded029ab93 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Wed, 16 Sep 2026 15:20:02 +0200
Subject: [PATCH 2/3] bug: fixed zoomed in on mibile

---
 src/App.css | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 6fcedab..985e9cc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,8 +11,9 @@ body {
   color: white;
   font-family: "Titillium Web", sans-serif;
 
-  height: 90px;
-  width: 500px;
+  box-sizing: border-box;
+  min-height: 114px;
+  width: calc(100% - 18px);
 
   display: flex;
   justify-content: space-between;
@@ -53,7 +54,9 @@ body {
   flex-direction: column;
   align-items: flex-start;
 
-  width: fit-content;
+  width: 542px;
+  max-width: 100%;
+  min-width: 0;
 }
 .header {
   align-self: center;
@@ -175,6 +178,32 @@ body {
   }
 }
 
+@media (max-width: 540px) {
+  .driver-card {
+    gap: 0.5rem;
+  }
+
+  .driver-card h1 {
+    font-size: 32px;
+  }
+
+  .driver-card h2 {
+    min-width: 0;
+    font-size: 18px;
+    overflow-wrap: anywhere;
+  }
+
+  .driver-card img {
+    height: 64px;
+    flex-shrink: 0;
+  }
+
+  .driver-card .favorite-button {
+    padding: 0.25rem;
+    margin: 0;
+  }
+}
+
 .meeting-list {
   width: 100%;
   max-width: 760px;

From 8ac3d2653b793795aa32398372f71d349fb4f9e5 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Wed, 16 Sep 2026 15:36:32 +0200
Subject: [PATCH 3/3] feat: enhance driver detail component with close button

---
 src/App.css                     | 38 +++++++++++++++++++++++-
 src/App.tsx                     |  4 +++
 src/components/DriverCard.tsx   |  3 --
 src/components/DriverDetail.tsx | 51 +++++++++++++++++++++------------
 4 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index 985e9cc..f456afc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -84,6 +84,7 @@ body {
 
 .driver-detail-nav {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -94,8 +95,11 @@ body {
   border: 1px solid grey;
   border-radius: 10px;
   color: white;
-  font-size: 1rem;
+  font-size: 1.1rem;
+  font-weight: 600;
   cursor: pointer;
+  width: 130px;
+  height: 40px;
 }
 
 .driver-detail-nav-button:disabled {
@@ -162,9 +166,40 @@ body {
   border-top: 1px solid grey;
 }
 
+.driver-detail-close {
+  display: none;
+}
+
+.driver-detail-close-top {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font-size: 28px;
+  cursor: pointer;
+}
+
 @media (max-width: 1050px) {
+  body:has(.driver-detail-open) {
+    overflow: hidden;
+  }
+
+  .driver-detail:not(.driver-detail-open) {
+    display: none;
+  }
+
+  .driver-detail-close {
+    display: inline-block;
+  }
+
   .driver-detail {
     box-sizing: border-box;
+    padding-top: 3.5rem;
     width: min(440px, calc(100% - 2rem));
     position: fixed;
     top: 50%;
@@ -174,6 +209,7 @@ body {
     margin: 0;
     max-height: calc(100dvh - 2rem);
     overflow-y: auto;
+    overscroll-behavior: contain;
     box-shadow: 0 1rem 3rem rgb(0 0 0 / 50%);
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 7312224..e853d34 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -142,6 +142,7 @@ function App() {
   // Detail panel selection: Previous/Next step through the currently filtered
   // list only, so it stays in sync with whatever the left list is showing.
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
   const clampedIndex = filteredDrivers.length
     ? Math.min(selectedIndex, filteredDrivers.length - 1)
     : 0;
@@ -153,6 +154,7 @@ function App() {
     );
     if (index !== -1) {
       setSelectedIndex(index);
+      setIsDetailOpen(true);
     }
   }
 
@@ -237,6 +239,8 @@ function App() {
         </div>
 
         <DriverDetail
+          isOpen={isDetailOpen}
+          onClose={() => setIsDetailOpen(false)}
           isLoading={driversWithStandingsPending}
           isError={driversWithStandingsError}
           driver={
diff --git a/src/components/DriverCard.tsx b/src/components/DriverCard.tsx
index c7dcb0c..2c47c8a 100644
--- a/src/components/DriverCard.tsx
+++ b/src/components/DriverCard.tsx
@@ -27,9 +27,6 @@ interface DriverCardProps {
 
 export default function DriverCard({
     driver,
-    teamStanding,
-    teamStandingsPending,
-    teamStandingsError,
     isFavorite,
     onToggleFavorite,
     isSelected,
diff --git a/src/components/DriverDetail.tsx b/src/components/DriverDetail.tsx
index be9412a..b562bb1 100644
--- a/src/components/DriverDetail.tsx
+++ b/src/components/DriverDetail.tsx
@@ -5,6 +5,8 @@ import type { DriverProps } from './DriverCard'
 const DEFAULT_AVATAR_URL = 'https://canvas.ntnu.no/images/messages/avatar-50.png'
 
 interface DriverDetailProps {
+    isOpen: boolean;
+    onClose: () => void;
     driver?: DriverProps;
     teamStanding?: TeamStandings;
     teamStandingsPending: boolean;
@@ -18,6 +20,8 @@ interface DriverDetailProps {
 }
 
 export default function DriverDetail({
+    isOpen,
+    onClose,
     driver,
     teamStanding,
     teamStandingsPending,
@@ -31,26 +35,16 @@ export default function DriverDetail({
 }: DriverDetailProps) {
 
     return (
-        <div className="driver-detail"
+        <div className={`driver-detail${isOpen ? ' driver-detail-open' : ''}`}
             style={{ border: `3px solid #${driver?.team_colour}` }}>
-            <div className="driver-detail-nav">
-                <button
-                    type="button"
-                    className="driver-detail-nav-button"
-                    onClick={onPrev}
-                    disabled={!hasPrev}
-                >
-                    Previous
-                </button>
-                <button
-                    type="button"
-                    className="driver-detail-nav-button"
-                    onClick={onNext}
-                    disabled={!hasNext}
-                >
-                    Next
-                </button>
-            </div>
+            <button
+                type="button"
+                className="driver-detail-close driver-detail-close-top"
+                onClick={onClose}
+                aria-label="Close driver details"
+            >
+                ×
+            </button>
 
             {isLoading ? (
                 <p>Loading driver...</p>
@@ -106,6 +100,25 @@ export default function DriverDetail({
                     </div>
                 </>
             )}
+            <div className="driver-detail-nav">
+                <button
+                    type="button"
+                    className="driver-detail-nav-button"
+                    onClick={onPrev}
+                    disabled={!hasPrev}
+                >
+                    ← 
+                    Previous
+                </button>
+                <button
+                    type="button"
+                    className="driver-detail-nav-button"
+                    onClick={onNext}
+                    disabled={!hasNext}
+                >
+                    Next →
+                </button>
+            </div>
         </div>
     )
 }