change: changed tests to fit the new implementation and some small css…

src/App.css

@@ -6,15 +6,17 @@
 }
 
 html {
-  background-color: #D13B3B;
+  background-color: #f5f0e6;
 }
 
+
 body {
   /**background-color: #272745;*/
   background-color: #f5f0e6 ;
   color: white;
   font-family: "Titillium Web", sans-serif;
   margin: 0;
+  min-height: 100%;
 }
 
 button:hover {
@@ -82,6 +84,12 @@ button:hover {
   justify-content: center;
 }
 
+.no-drivers-message {
+  color: #000;
+  width: 100%;
+  text-align: center;
+}
+
 .standing-drivers {
   display: flex;
   flex-direction: column;

src/App.tsx

@@ -141,7 +141,7 @@ function App() {
             : driversWithStandingsError
               ? "Could not load drivers."
               : filteredDrivers.length === 0
-                ? "No drivers match your filters."
+                ? <p className="no-drivers-message">No drivers match your filters.</p>
                 : filteredDrivers.map((driver) => (
                     <DriverCard
                       key={driver.driver_number}

src/components/DriverDetail.test.tsx

@@ -44,9 +44,9 @@ test('shows an error', () => {
   expect(screen.getByText('Could not load driver details.')).toBeInTheDocument()
 })
 
-test('handles no driver', () => {
-  render(<DriverDetail {...props} driver={undefined} />)
-  expect(screen.getByText('No driver selected.')).toBeInTheDocument()
+test('renders nothing when no driver is selected', () => {
+  const { container } = render(<DriverDetail {...props} driver={undefined} />)
+  expect(container).toBeEmptyDOMElement()
 })
 
 test('shows team loading', () => {