feat: reorganize filter display and improve layout for selected tags and brands

src/components/Header.svelte

@@ -483,6 +483,7 @@
         {/if}
       </div>
 
+      <div class="selected-filters">
         {#each selectedTags as tagText}
           <button
             class="selected-tag"
@@ -549,6 +550,7 @@
           </button>
         {/if}
       </div>
+    </div>
     <div class="view-toggle">
       <div class="view-mode-group button-group">
         <button
@@ -734,10 +736,10 @@
   }
 
   .filter-section {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.3rem;
-    align-items: center;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    align-items: flex-start;
     position: relative;
   }
 
@@ -746,9 +748,9 @@
     color: #fff;
     border: none;
     border-radius: 8px;
-    padding: 0.2em 0.8em 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
+    padding: 0.1em 0.8em;
+    font-size: 0.75em;
+    font-weight: 300;
     letter-spacing: 0.02em;
     cursor: pointer;
     display: flex;
@@ -778,9 +780,9 @@
     color: var(--color-text);
     border: none;
     border-radius: 8px;
-    padding: 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
+    padding: 0.1em 0.8em;
+    font-size: 0.75em;
+    font-weight: 300;
     display: flex;
     align-items: center;
     gap: 0.4em;
@@ -812,6 +814,7 @@
   }
 
   .filter-dropdown {
+    grid-column: 1;
     position: relative;
     display: inline-block;
   }
@@ -1219,6 +1222,17 @@
     opacity: 1;
   }
 
+  .selected-filters {
+    grid-column: 2;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    align-items: flex-end;
+    min-height: 2.5rem;
+    max-height: 5rem;
+    overflow: hidden;
+  }
+
   @media (max-width: 700px) {
     .header-row {
       display: grid;
@@ -1245,5 +1259,28 @@
       padding-top: 0;
       justify-self: start;
     }
+
+    .header-controls {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-rows: auto auto;
+      gap: 1rem;
+      margin: 1rem 0;
+    }
+
+    .search-bar {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .view-toggle {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .filter-section {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
   }
 </style>