18 style improvement

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;
@@ -81,6 +84,7 @@ body {
 
 .driver-detail-nav {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -91,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 {
@@ -159,6 +166,80 @@ 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%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    margin: 0;
+    max-height: calc(100dvh - 2rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    box-shadow: 0 1rem 3rem rgb(0 0 0 / 50%);
+  }
+}
+
+@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;
@@ -245,4 +326,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;
+}

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={

src/components/DriverCard.tsx

@@ -27,12 +27,9 @@ interface DriverCardProps {
 
 export default function DriverCard({
     driver,
-    teamStanding,
-    teamStandingsPending,
-    teamStandingsError, 
     isFavorite,
     onToggleFavorite,
-    isSelected, 
+    isSelected,
     onSelect
 }: DriverCardProps) {
 
@@ -58,15 +55,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>
     )
 }

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,25 +35,16 @@ export default function DriverDetail({
 }: DriverDetailProps) {
 
     return (
-        <div className="driver-detail">
-            <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 className={`driver-detail${isOpen ? ' driver-detail-open' : ''}`}
+            style={{ border: `3px solid #${driver?.team_colour}` }}>
+            <button
+                type="button"
+                className="driver-detail-close driver-detail-close-top"
+                onClick={onClose}
+                aria-label="Close driver details"
+            >
+                ×
+            </button>
 
             {isLoading ? (
                 <p>Loading driver...</p>
@@ -66,7 +61,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,13 +93,32 @@ export default function DriverDetail({
                                 {teamStandingsPending
                                     ? 'Loading...'
                                     : teamStandingsError
-                                    ? 'Unavailable'
-                                    : teamStanding?.points_current ?? 'Unavailable'}
+                                        ? 'Unavailable'
+                                        : teamStanding?.points_current ?? 'Unavailable'}
                             </span>
                         </div>
                     </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>
     )
 }