[ui] make the grid good

crates/lanspread-tauri-deno-ts/src/App.css

@@ -2,16 +2,41 @@ body {
   background-color: #000313;
   font-family: Arial, sans-serif;
   color: #D5DBFE;
+  margin: 0;
+  padding: 0;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #000313;
+  z-index: 1000;
+  padding-top: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+h1.align-center {
+  margin: 0;
+  padding: 10px 0;
+}
+
+.main-header {
+  width: 100%;
 }
 
 .grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Changed from 220px to 140px */
-  gap: 20px;
+  margin-top: 160px; /* Adjust based on your header height */
   padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
 }
 
 .item {
+  display: flex;
+  flex-direction: column;
   background: linear-gradient(to bottom, black, #000938);
   color: white;
   border: 1px solid #444;
@@ -62,6 +87,7 @@ body {
 }
 
 .play-button {
+  margin-top: auto;
   margin-bottom: 2px;
   padding: 15px 30px;
   background: linear-gradient(45deg, #09305a, #37529c);

crates/lanspread-tauri-deno-ts/src/App.tsx

@@ -74,21 +74,22 @@ const App = () => {
     // Rest of your component remains the same
     return (
         <main className="container">
-            <h1 className="align-center">SoftLAN Launcher</h1>
-            <div className="main-header">
-                {/* Search input */}
-                <div className="search-container">
-                    <input
-                        type="text"
-                        placeholder="Search games..."
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        className="search-input"
-                    />
-                </div></div>
+            <div className="fixed-header">
+                <h1 className="align-center">SoftLAN Launcher</h1>
+                <div className="main-header">
+                    <div className="search-container">
+                        <input
+                            type="text"
+                            placeholder="Search games..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="search-input"
+                        />
+                    </div>
+                </div>
+            </div>
             <div className="grid-container">
                 {filteredGames.map((item) => {
-                    // Convert the thumbnail bytes to base64
                     const uint8Array = new Uint8Array(item.thumbnail);
                     const binaryString = uint8Array.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
                     const thumbnailUrl = `data:image/jpeg;base64,${btoa(binaryString)}`;