From 08afafe6bdf47efae909688869c2c7098873cdad Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Fri, 12 Jun 2026 12:01:12 +0100
Subject: [PATCH] Make Petrol/Diesel pills equal width, drop the Petrol icon

Switch the fuel-pill group to a 2-column grid with full-width centered
buttons so both pills are identical size, and remove the fuel icon so
the two read as a clean matched pair.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 resources/js/components/PostSearchFilters.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/PostSearchFilters.vue b/resources/js/components/PostSearchFilters.vue
index 41fc05a..75af93e 100644
--- a/resources/js/components/PostSearchFilters.vue
+++ b/resources/js/components/PostSearchFilters.vue
@@ -1,18 +1,17 @@
 <template>
     <div ref="popoverRoot">
         <div class="flex flex-wrap items-center gap-2 md:gap-2.5 py-2 border-b border-zinc-200">
-            <div class="flex items-center gap-2 md:gap-2.5" role="radiogroup" aria-label="Fuel">
+            <div class="grid grid-cols-2 gap-2 md:gap-2.5" role="radiogroup" aria-label="Fuel">
                 <button
                     v-for="fuel in PRIMARY_FUELS"
                     :key="fuel.value"
                     :aria-checked="fuelType === fuel.value"
                     :class="{ 'is-active': fuelType === fuel.value }"
-                    class="pill !rounded-xl"
+                    class="pill !rounded-xl w-full justify-center"
                     role="radio"
                     type="button"
                     @click="fuelType = fuel.value"
                 >
-                    <iconify-icon v-if="fuel.icon" :icon="fuel.icon" class="text-sm opacity-70"></iconify-icon>
                     <span class="text-sm font-medium">{{ fuel.label }}</span>
                 </button>
             </div>
@@ -168,13 +167,14 @@ const DEFAULTS = Object.freeze({
     sort: 'reliable',
 })
 
-// The two everyday fuels are surfaced as quick pills outside the popover;
-// everything else in the shared FUEL_TYPES source stays under "More fuels".
+// The two everyday fuels are surfaced as equal-width quick pills outside the
+// popover; everything else in the shared FUEL_TYPES source stays under
+// "More fuels".
 const PRIMARY_FUEL_VALUES = Object.freeze(['e10', 'b7_standard'])
 
 const PRIMARY_FUELS = Object.freeze([
-    { value: 'e10', label: 'Petrol', icon: 'lucide:fuel' },
-    { value: 'b7_standard', label: 'Diesel', icon: null },
+    { value: 'e10', label: 'Petrol' },
+    { value: 'b7_standard', label: 'Diesel' },
 ])
 
 const SECONDARY_FUELS = FUEL_TYPES.filter((fuel) => !PRIMARY_FUEL_VALUES.includes(fuel.value))