From 084a7661875d44a280318de80f68e19a7ce24061 Mon Sep 17 00:00:00 2001
From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com>
Date: Thu, 16 Oct 2025 16:13:26 -0500
Subject: [PATCH] Update category selection UI for mobile responsiveness

Refactored the selected category display to improve mobile responsiveness by adjusting container classes and image sizing. Added category name display below images for mobile view. These changes enhance the user experience on smaller screens.
---
 .../views/livewire/show-promociones.blade.php  | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/resources/views/livewire/show-promociones.blade.php b/resources/views/livewire/show-promociones.blade.php
index 64e239c..914a5ea 100755
--- a/resources/views/livewire/show-promociones.blade.php
+++ b/resources/views/livewire/show-promociones.blade.php
@@ -52,15 +52,8 @@
             }"
             class="w-full"
         >
-            <div x-show="seleccionada"
-                x-transition
-                class="mb-6 bg-white shadow rounded-2xl overflow-hidden transform transition-all duration-300 max-w-4xl m-auto">
-                <img :src="seleccionada.imagen"
-                    class="w-full h-24 sm:h-36 md:h-56 object-cover object-center"
-                    alt="imagen de categoría seleccionada">
-                <div class="p-4 text-center">
-                    <h2 class="text-xl font-semibold text-gray-800" x-text="seleccionada.nombre"></h2>
-                </div>
+            <div x-show="seleccionada" x-transition class="md:hidden bg-white shadow rounded-2xl overflow-hidden transform transition-all duration-300 w-40 xs:w-5 sm:w-60 m-auto">
+                <img :src="seleccionada.imagen" class="w-full object-cover object-center" alt="imagen de categoría seleccionada">
             </div>
 
             <div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
@@ -75,9 +68,10 @@
                                 $wire.set('categorian', '{{ $categoria1->nombre }}')
                             "
                         >
-                            <img src="{{ asset($categoria1->imagen) }}"
-                                class="w-full h-12 md:h-32 object-cover object-center"
-                                alt="imagen de {{ $categoria1->nombre }}">
+                            <img src="{{ asset($categoria1->imagen) }}" class="w-full h-12 md:h-full object-cover object-center" alt="imagen de {{ $categoria1->nombre }}">
+                            <div class="p-2 text-center md:hidden">
+                                <h2 class="text-xs font-semibold text-gray-800">{{ $categoria1->nombre }}</h2>
+                            </div>
                         </div>
                     @endforeach
                 </div>