Refactor attribute filter bar styling and layout for improved usability

assets/css/catbar.css

@@ -146,45 +146,72 @@
 
 .attrbar {
     width: 100%;
-    background-color: var(--bg-card, #1f2937);
+    background-color: rgb(45, 59, 80); /* Same as catbar background */
-    border-bottom: 1px solid var(--border-subtle, #2f3c52);
+    padding: 0 0 16px 0;
-    padding: 12px 0;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .attrbar__inner {
     display: flex;
     justify-content: center;
     align-items: center;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 16px;
+    width: 100%;
 }
 
 .attr-filter-form {
     display: flex;
     flex-wrap: wrap;
-    gap: 15px;
+    gap: 16px;
-    align-items: center;
+    align-items: flex-end; /* Align inputs and labels beautifully */
     justify-content: center;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
 }
 
 .attr-filter-item {
     display: flex;
-    align-items: center;
+    flex-direction: column; /* Stack label and select */
-    gap: 8px;
+    align-items: flex-start;
-    font-size: 0.9rem;
+    gap: 6px;
+    font-size: 0.85rem;
     color: var(--text-secondary, #cbd5e1);
     font-family: var(--font-family);
+    flex: 1 1 180px; /* Grid-like flexibility */
+    max-width: 250px;
+}
+
+.attr-filter-item label {
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.05em;
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .attr-filter-item select {
-    padding: 6px 10px;
+    width: 100%;
-    border: 1px solid var(--border-default, #5e6075);
+    padding: 10px 14px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: var(--radius-md, 5px);
-    background-color: var(--bg-input, #1e2537);
+    background-color: rgba(25, 30, 40, 0.5); /* Semi transparent dark */
     color: var(--text-primary, #ffffff);
     cursor: pointer;
-    font-size: 0.85rem;
+    font-size: 0.9rem;
     font-family: var(--font-family);
-    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
+    transition: all var(--transition-fast, 150ms ease);
+    appearance: none; /* modern look */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.6)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 16px;
+}
+
+.attr-filter-item select:hover {
+    background-color: rgba(25, 30, 40, 0.8);
+    border-color: rgba(255, 255, 255, 0.3);
 }
 
 .attr-filter-item select:focus {
@@ -198,21 +225,48 @@
     color: var(--text-primary, #ffffff);
 }
 
+.attr-filter-action {
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 2px; /* optical alignment with inputs */
+}
+
 .attr-filter-reset {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     font-size: 0.85rem;
-    color: var(--color-danger, #d92d20);
+    font-weight: 600;
+    color: var(--text-invert, #ffffff);
     text-decoration: none;
-    padding: 6px 12px;
+    padding: 10px 16px;
-    border: 1px solid var(--color-danger, #d92d20);
+    border: none;
     border-radius: var(--radius-md, 5px);
-    background-color: transparent;
+    background-color: var(--color-danger, #d92d20);
     transition: all var(--transition-fast, 150ms ease);
     font-family: var(--font-family);
-    margin-left: 10px;
+    height: 40px; /* match select height */
 }
 
 .attr-filter-reset:hover {
-    background-color: var(--color-danger, #d92d20);
+    background-color: #b91c1c; /* slightly darker danger */
-    color: var(--text-invert, #ffffff);
+    transform: translateY(-1px);
     box-shadow: 0 4px 12px var(--color-danger-soft, rgba(217, 45, 32, 0.2));
 }
+
+@media (max-width: 768px) {
+    .attr-filter-item {
+        flex: 1 1 45%;
+        max-width: none;
+    }
+
+    .attr-filter-action {
+        width: 100%;
+        justify-content: center;
+        margin-top: 8px;
+    }
+
+    .attr-filter-reset {
+        width: 100%;
+    }
+}

attrbar.php

@@ -35,18 +35,6 @@ if ($catId) {
         $attributes[] = $row;
     }
     $stmtAttr->close();
-} else {
-    // If no category selected, just fall back
-    $resAttr = $conn->query("
-        SELECT a.attributeID, a.name, a.unit, a.dataType
-        FROM attributes a
-        ORDER BY a.name LIMIT 5
-    ");
-    if ($resAttr) {
-        while ($row = $resAttr->fetch_assoc()) {
-            $attributes[] = $row;
-        }
-    }
 }
 ?>
 
@@ -138,12 +126,12 @@ if ($catId) {
                 }
             }
             if ($hasActiveFilter): ?>
+                <div class="attr-filter-action">
                     <a href="index.php<?= isset($_GET['category']) ? '?category='.urlencode($_GET['category']) : '' ?>" class="attr-filter-reset">Filter zurücksetzen</a>
+                </div>
             <?php endif; ?>
         </form>
     </div>
 </div>
 <?php endif; ?>
 
-
-