button support for small screens

themes/gallo/layouts/partials/buttons.html

@@ -4,7 +4,7 @@
 <a href="{{ .url }}"
   ><button
     type="button"
-    class="px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg focus:ring-4 focus:outline-none hover:bg-gray-800 transition-all duration-200"
+    class="px-4 py-4 sm:py-2 sm:px-3 text-xs font-medium text-center text-white bg-black rounded-lg focus:ring-4 focus:outline-none hover:bg-gray-800 transition-all duration-200"
   >
     {{ .text }}
   </button>

themes/gallo/layouts/partials/rental-catalog.html

@@ -6,12 +6,12 @@
     class="flex gap-2 items-center px-4 border border-gray-200 rounded-lg focus:outline-none"
     onclick="window.location.href = '/catalog'"
   >
-    <span class="text-sm p-2 font-medium text-gray-900">All</span>
+    <span class="text-xs p-2 font-medium text-gray-900">All</span>
   </button>
   {{ $uniqueCategories := slice }} {{ range .Params.catalog }} {{ if not (in
   $uniqueCategories .cat) }} {{ $uniqueCategories = $uniqueCategories | append
   .cat }}
-  <div class="flex gap-2 items-center px-4 border border-gray-200 rounded-lg">
+  <div class="flex gap-2 items-center px-3 py-2 border border-gray-200 rounded-lg">
     <input
       id="radio-button-{{ .cat }}"
       type="radio"
@@ -21,7 +21,7 @@
     />
     <label
       for="radio-button-{{ .cat }}"
-      class="noselect text-sm p-2 font-medium text-gray-900"
+      class="noselect text-xs p-1 sm:p-0 font-medium text-gray-900"
       >{{ .cat }}</label
     >
   </div>
@@ -67,12 +67,12 @@
         </div>
         {{ end }} {{ if ne .deliveryPickup "" }}
         <div class="flex flex-row justify-between">
-          <strong>+ Delivery/Pickup:</strong>
+          <strong>+ Pickup  & Delivery:</strong>
           <span>{{ .deliveryPickup }}</span>
         </div>
         {{ end }} {{ if ne .installBreakdown "" }}
         <div class="flex flex-row justify-between">
-          <strong>+ Install/Breakdown:</strong>
+          <strong>+ Setup & Breakdown:</strong>
           <span>{{ .installBreakdown }}</span>
         </div>
         {{ end }} {{ if ne .purchaseCost "" }}
@@ -170,12 +170,12 @@
                     </div>
                     {{ end }} {{ if ne .deliveryPickup "" }}
                     <div class="flex flex-row justify-between">
-                      <strong>Delivery/Pickup:</strong>
+                      <strong>Pickup  & Delivery:</strong>
                       <span>{{ .deliveryPickup }}</span>
                     </div>
                     {{ end }} {{ if ne .installBreakdown "" }}
                     <div class="flex flex-row justify-between">
-                      <strong>Install/Breakdown:</strong>
+                      <strong>Setup & Breakdown:</strong>
                       <span>{{ .installBreakdown }}</span>
                     </div>
                     {{ end }} {{ if ne .purchaseCost "" }}