[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);