From 6d49224d44dc24c67b984b06969dc9a9c38309a6 Mon Sep 17 00:00:00 2001
From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com>
Date: Tue, 23 Sep 2025 10:37:29 -0500
Subject: [PATCH] Improve mobile table and search input UI

Hides the 'entradas' label on small screens, reduces the max width of the search input for mobile, adds text-xs and break-all classes to mobile table rows for better readability, and adjusts spacing in action buttons for a more compact layout.
---
 resources/views/components/ver-entrada.blade.php |  2 +-
 resources/views/livewire/show-clientes.blade.php | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/views/components/ver-entrada.blade.php b/resources/views/components/ver-entrada.blade.php
index 624371f..0e94c9c 100755
--- a/resources/views/components/ver-entrada.blade.php
+++ b/resources/views/components/ver-entrada.blade.php
@@ -7,6 +7,6 @@
             <option value="50">50</option>
             <option value="100">100</option>
         </select>
-        <p class="text-xs md:text-sm my-auto">entradas</p>
+        <p class="text-xs md:text-sm my-auto hidden md:block">entradas</p>
     </div>
 
diff --git a/resources/views/livewire/show-clientes.blade.php b/resources/views/livewire/show-clientes.blade.php
index c73528a..4f4906f 100755
--- a/resources/views/livewire/show-clientes.blade.php
+++ b/resources/views/livewire/show-clientes.blade.php
@@ -48,9 +48,9 @@
 
         <div class="flex justify-between">
             <x-ver-entrada />
-            <div class="relative text-sm max-w-[200px] lg:w-auto my-2 flex lg:hidden">
+            <div class="relative text-sm max-w-[150px] lg:w-auto my-2 flex lg:hidden">
                 <input id="buscar" type="search" wire:model="buscar" placeholder="Buscar"
-                    class=" shadow-sm border-2 active:border-neutral-200 focus:ring-0 border-neutral-200 max-w-[200px] lg:w-auto rounded-md pr-7 py-1 m-auto focus:border-neutral-300  focus:outline-none focus:shadow-outline">
+                    class=" shadow-sm border-2 active:border-neutral-200 focus:ring-0 border-neutral-200 max-w-[150px] lg:w-auto rounded-md pr-7 py-1 m-auto focus:border-neutral-300  focus:outline-none focus:shadow-outline">
                 <svg class="w-5 absolute top-2 right-3" xmlns="http://www.w3.org/2000/svg" version="1.1"
                     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="w-4 absolute"
                     x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512;rotate: 90deg;"
@@ -83,14 +83,14 @@
             </x-slot>
             <x-slot name="tbody">
                 @foreach ($clientes as $cliente)
-                    <tr class="table-row lg:hidden border-gray-200 text-left" x-data="{ extraInfo: false, openOption: false, isOpen1: false, isOpen2: false }">
+                    <tr class="table-row lg:hidden border-gray-200 text-left text-xs" x-data="{ extraInfo: false, openOption: false, isOpen1: false, isOpen2: false }">
                         <td @click="extraInfo = true" class="relative">
                             <div class="flex justify-between items-start gap-2">
                                 <div>
                                     <p class="font-semibold">
                                         {{ $cliente->nombre_cliente ?? ($cliente->cliente->name ?? '') }}
                                     </p>
-                                    <p>
+                                    <p class="break-all">
                                         @if (!empty($cliente->cuentas_obsoletas->unique()))
                                             @foreach ($cliente->cuentas_obsoletas->unique() as $cuenta)
                                                 {{ $cuenta->correo }} <br>
@@ -116,7 +116,7 @@
                                         @endif
                                     </p>
                                 </div>
-                                <div class="flex justify-between gap-2">
+                                <div class="flex justify-between gap-1">
                                     <div>
                                         <p class="font-semibold capitalize">
                                             {{ $cliente->estado ?? '' }}