dont float tesla switch

Author: quicklywilliam

src/App.jsx

@@ -99,10 +99,14 @@ function App() {
 
   return (
     <div className="app">
-      <NoTeslaToggle enabled={noTesla} onChange={handleNoTeslaToggle} />
       <header>
-        <h1>Used EV Finder</h1>
-        <p>Compare used electric vehicle prices from multiple dealers and track changes over time.</p>
+        <div className="header-content">
+          <div>
+            <h1>Used EV Finder</h1>
+            <p>Compare used electric vehicle prices from multiple dealers and track changes over time.</p>
+          </div>
+          <NoTeslaToggle enabled={noTesla} onChange={handleNoTeslaToggle} />
+        </div>
       </header>
       <main className="container">
         {!selectedModel ? (

src/components/NoTeslaToggle.css

@@ -1,8 +1,4 @@
 .no-tesla-toggle {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
   background: white;
   padding: 1rem 1.5rem;
   border-radius: 8px;

src/index.css

@@ -17,6 +17,13 @@ header {
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}
+
 header h1 {
   font-size: 2rem;
   margin-bottom: 0.5rem;