fe/src/App.css

@@ -4,17 +4,6 @@
   --color-dark: #000B25;
   --color-bg: #101010;
   --color-accent: #00A4DC;
-  --jf-gradient-color-primary-dark: #003c50;
-  --jf-gradient-color-secondary-dark: #3e2247;
-}
-
-.mobile-keyboard-mock {
-  background-color: gray;
-  width: 100vw;
-  height: 300px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
 }
 
 body {
@@ -22,28 +11,7 @@ body {
   color: white;
 }
 
-.app-container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-header {
-  width: calc(100vw - 30px);
-  margin: 0 auto;
-  display: flex;
-}
-
-main {
-  flex-grow: 1;
-  background: linear-gradient(220deg, var(--jf-gradient-color-secondary-dark), var(--jf-gradient-color-primary-dark));
-}
-
 h1 {
-  font-size: 1.8em;
-  line-height: 1.1;
-  margin: 0;
-  padding: 8px 0;
   background: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
   color: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
   -webkit-background-clip: text;
@@ -52,14 +20,15 @@ h1 {
 
 #root {
   max-width: 1920px;
+  padding: 0 15px 10px;
   text-align: center;
 }
 
 .logo {
   will-change: filter;
   transition: filter 300ms;
-  transform: translateY(4px);
-  margin-right: 2px;
+  transform: translateY(7px);
+  margin-right: 5px;
 }
 
 h1:hover {
@@ -92,14 +61,6 @@ h1:hover {
   color: #888;
 }
 
-.search-bar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  max-width: calc(50% + 15px);
+.app-container {
 
-  input {
-    font-size: 17px;
-  }
 }

fe/src/App.tsx

@@ -17,23 +17,15 @@ function App() {
 
   return (
     <div onClick={handleBackgroundClick} className="app-container">
-      <header>
-        <h1>
-          <img src={jellyfin} className="logo" alt="Jellyfin logo" height="28px" width="28px" />
-          Wishlist
-        </h1>
-        <Search
-          setSearchResults={setSearchResults}
-          searchString={searchString}
-          setSearchString={setSearchString}
-        />
-      </header>
-      <main>
-        <div>
-          content
-        </div>
-      </main>
-      <div className="mobile-keyboard-mock" />
+      <h1>
+        <img src={jellyfin} className="logo" alt="Jellyfin logo" height="50px" width="50px" />
+        Wishlist
+      </h1>
+      <Search
+        setSearchResults={setSearchResults}
+        searchString={searchString}
+        setSearchString={setSearchString}
+      />
     </div>
   )
 }

fe/src/index.css

@@ -24,10 +24,17 @@ a:hover {
 
 body {
   margin: 0;
+  display: flex;
   min-width: 320px;
   min-height: 100vh;
 }
 
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin: 10px 0 15px;
+}
+
 button {
   border-radius: 8px;
   border: 1px solid transparent;