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

src/components/Header.svelte

@@ -483,71 +483,73 @@
         {/if}
       </div>
 
-      {#each selectedTags as tagText}
+      <div class="selected-filters">
-        <button
+        {#each selectedTags as tagText}
-          class="selected-tag"
+          <button
-          aria-label={`Remove tag: ${getTagObj(tagText).text}`}
+            class="selected-tag"
-          on:click={() => removeTag(getTagObj(tagText).text)}
+            aria-label={`Remove tag: ${getTagObj(tagText).text}`}
-        >
+            on:click={() => removeTag(getTagObj(tagText).text)}
-          {getTagObj(tagText).text}
-          <span class="close">&times;</span>
-        </button>
-      {/each}
-
-      {#each selectedBrands as brand}
-        <button
-          class="selected-brand"
-          aria-label={`Remove brand: ${brand}`}
-          on:click={() => removeBrand(brand)}
-        >
-          {brand}
-          <span class="close">&times;</span>
-        </button>
-      {/each}
-
-      {#if compactMode}
-        <button
-          class="compact-indicator"
-          on:click={() => setCompactMode(false)}
-          aria-label="Disable group by brand"
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            {getTagObj(tagText).text}
-              d="M10 11L3 11"
+            <span class="close">&times;</span>
-              stroke="currentColor"
+          </button>
-              stroke-width="1.5"
+        {/each}
-              stroke-linecap="round"
+
-            />
+        {#each selectedBrands as brand}
-            <path
+          <button
-              d="M10 16H3"
+            class="selected-brand"
-              stroke="currentColor"
+            aria-label={`Remove brand: ${brand}`}
-              stroke-width="1.5"
+            on:click={() => removeBrand(brand)}
-              stroke-linecap="round"
+          >
-            />
+            {brand}
-            <path
+            <span class="close">&times;</span>
-              d="M14 13.5L16.1 16L20 11"
+          </button>
-              stroke="currentColor"
+        {/each}
-              stroke-width="1.5"
+
-              stroke-linecap="round"
+        {#if compactMode}
-              stroke-linejoin="round"
+          <button
-            />
+            class="compact-indicator"
-            <path
+            on:click={() => setCompactMode(false)}
-              d="M3 6L13.5 6M20 6L17.75 6"
+            aria-label="Disable group by brand"
-              stroke="currentColor"
+          >
-              stroke-width="1.5"
+            <svg
-              stroke-linecap="round"
+              width="14"
-            />
+              height="14"
-          </svg>
+              viewBox="0 0 24 24"
-          Group by brand
+              fill="none"
-          <span class="close">&times;</span>
+              xmlns="http://www.w3.org/2000/svg"
-        </button>
+            >
-      {/if}
+              <path
+                d="M10 11L3 11"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+              <path
+                d="M10 16H3"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+              <path
+                d="M14 13.5L16.1 16L20 11"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M3 6L13.5 6M20 6L17.75 6"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+            </svg>
+            Group by brand
+            <span class="close">&times;</span>
+          </button>
+        {/if}
+      </div>
     </div>
     <div class="view-toggle">
       <div class="view-mode-group button-group">
@@ -734,10 +736,10 @@
   }
 
   .filter-section {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: auto 1fr;
-    gap: 0.3rem;
+    gap: 0.5rem;
-    align-items: center;
+    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;
+    padding: 0.1em 0.8em;
-    font-size: 0.85em;
+    font-size: 0.75em;
-    font-weight: 500;
+    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;
+    padding: 0.1em 0.8em;
-    font-size: 0.85em;
+    font-size: 0.75em;
-    font-weight: 500;
+    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>