Improve styling - WIP

fe/src/App.css

@@ -19,9 +19,8 @@ h1 {
 }
 
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  max-width: 1920px;
+  padding: 0 15px 10px;
   text-align: center;
 }
 
@@ -61,3 +60,7 @@ h1:hover {
 .read-the-docs {
   color: #888;
 }
+
+.app-container {
+
+}

fe/src/App.tsx

@@ -11,10 +11,14 @@ function App() {
   const [itemChoiceByUser, setItemChoiceByUser]  = useState({});
   const [count, setCount] = useState(0)
 
+  const handleBackgroundClick = () =>{
+    console.log("clicked");
+  }
+
   return (
-    <>
+    <div onClick={handleBackgroundClick} className="app-container">
       <h1>
-      <img src={jellyfin} className="logo" alt="Jellyfin logo" height="50px" width="50px" />
+        <img src={jellyfin} className="logo" alt="Jellyfin logo" height="50px" width="50px" />
         Wishlist
       </h1>
       <Search
@@ -22,7 +26,7 @@ function App() {
         searchString={searchString}
         setSearchString={setSearchString}
       />
-    </>
+    </div>
   )
 }
 

fe/src/index.css

@@ -25,7 +25,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -33,6 +32,7 @@ body {
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+  margin: 10px 0 15px;
 }
 
 button {
@@ -53,16 +53,3 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}