From 2212c6db17c0a7d67accd3c3ba883fa57d5eb74f Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Thu, 29 May 2025 13:21:22 +0300
Subject: [PATCH] feat: enhance layout styles for better responsiveness and
 visual consistency

---
 public/global.css            | 3 +++
 src/components/Header.svelte | 4 ++--
 src/components/List.svelte   | 9 +--------
 src/pages/Home.svelte        | 7 +++++++
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/public/global.css b/public/global.css
index 30fba41..85f239b 100644
--- a/public/global.css
+++ b/public/global.css
@@ -56,6 +56,9 @@
 :global(body) {
   background: var(--color-bg);
   color: var(--color-text);
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 body {
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index da47b76..c4be254 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1183,7 +1183,7 @@
   }
 
   .selected-brand {
-    background: #2196F3;
+    background: #27ae60;
     color: #fff;
     border: none;
     border-radius: 8px;
@@ -1202,7 +1202,7 @@
   }
 
   .selected-brand:hover {
-    background: #1976D2;
+    background: #219150;
   }
 
   .selected-brand .close {
diff --git a/src/components/List.svelte b/src/components/List.svelte
index c8765bc..3af0890 100644
--- a/src/components/List.svelte
+++ b/src/components/List.svelte
@@ -73,14 +73,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, 200px);
     gap: 1rem;
-    justify-content: space-between;
-  }
-
-  @media (max-width: 600px) {
-    .compact-view {
-      grid-template-columns: repeat(auto-fill, 160px);
-      gap: 0.75rem;
-    }
+    justify-content: space-evenly;
   }
 
   .no-results {
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
index 0fb3d62..9ac2a0d 100644
--- a/src/pages/Home.svelte
+++ b/src/pages/Home.svelte
@@ -227,10 +227,17 @@
 </div>
 
 <style>
+  .container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
   main {
     padding: 0 1rem 2rem 1rem;
     max-width: 1400px;
     margin: 0 auto;
     width: 100%;
+    flex: 1;
   }
 </style>