From d3c1e206357b983100bdf9a94e3a8649153dd600 Mon Sep 17 00:00:00 2001
From: Leandro Hernan Rojas <leandro.rojas@saludlab.com.ar>
Date: Fri, 29 Aug 2025 19:18:05 -0300
Subject: [PATCH] Update UI Selector Scan Item

---
 .../Stock/Shared/StockItemSelectorModal.razor | 65 ++++++++++---------
 .../Shared/StockItemSelectorModal.razor.css   | 12 ++++
 2 files changed, 46 insertions(+), 31 deletions(-)
 create mode 100644 phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor.css

diff --git a/phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor b/phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor
index bdcf47c..b918372 100644
--- a/phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor
+++ b/phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor
@@ -15,7 +15,7 @@
     <button type="button" class="btn-close" aria-label="Close" @onclick="Cancel"></button>
 </div>
 
-<div class="modal-body" style="zoom:0.8;">
+<div class="modal-body" style="zoom:0.9;">
     <div class="mb-3">
         <label for="scan" class="form-label">Escanear o ingresar código</label>
         <div class="input-group">
@@ -44,38 +44,41 @@
             Último escaneado: <strong>@last.ProductName</strong> | Lote <strong>@last.Batch</strong> | Venc: <strong>@last.Expiration?.ToShortDateString()</strong>
         </div>
     }
-    <table class="table table-sm table-bordered">
-        <thead class="table-light">
-            <tr>
-                <th>Producto</th>
-                <th>Lote</th>
-                <th>Serial</th>
-                <th>Vencimiento</th>
-                <th>Disponible</th>
-                <th>Cantidad a usar</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var item in StockList)
-            {
+    <div class="stockselector-table-wrap" style="zoom:80%">
+        <table class="table table-sm table-bordered stockselector-table">
+            <thead class="table-light">
                 <tr>
-                    <td>@item.ProductName</td>
-                    <td>@item.Batch</td>
-                    <td>@item.Serial</td>
-                    <td>@item.Expiration?.ToShortDateString()</td>
-                    <td>@item.Available.ToString("N2", CultureInfo.CurrentCulture)</td>
-                    <td>
-                        <input type="number"
-                            value="@(item.Selected.ToString("G29"))"
-                            @onchange="@(n => item.Selected = decimal.Parse(n.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture))"
-                            min="0"
-                            max="@(item.Available.ToString("G29"))"
-                            class="form-control form-control-sm" />
-                    </td>
+                    <th class="text-left align-middle">Producto</th>
+                    <th class="text-center align-middle">Lote</th>
+                    <th class="text-center align-middle">Serial</th>
+                    <th class="text-center align-middle">Vencimiento</th>
+                    <th class="text-center align-middle">Disponible</th>
+                    <th class="text-center align-middle">Cantidad a usar</th>
                 </tr>
-            }
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+                @foreach (var item in StockList)
+                {
+                    <tr>
+                        <td>@item.ProductName</td>
+                        <td class="text-center align-middle">@item.Batch</td>
+                        <td class="text-center align-middle">@item.Serial</td>
+                        <td class="text-center align-middle">@item.Expiration?.ToShortDateString()</td>
+                        <td class="text-center align-middle">@item.Available.ToString("N2", CultureInfo.CurrentCulture)</td>
+                        <td>
+                            <input type="number"
+                                   value="@(item.Selected.ToString("G29"))"
+                                   @onchange="@(n => item.Selected = decimal.Parse(n.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture))"
+                                   min="0"
+                                   max="@(item.Available.ToString("G29"))"
+                                   class="form-control form-control-sm" />
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+
+    </div>
 </div>
 
 <div class="modal-footer">
diff --git a/phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor.css b/phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor.css
new file mode 100644
index 0000000..c6d5ad4
--- /dev/null
+++ b/phronCare.UIBlazor/Pages/Stock/Shared/StockItemSelectorModal.razor.css
@@ -0,0 +1,12 @@
+.stockselector-table-wrap {
+    height: 30vh; /* 30% de la altura visible del navegador */
+    overflow-y: auto; /* genera el scrollbar vertical */
+}
+
+/* Sticky header */
+.stockselector-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: #f8f9fa; /* mismo color que .table-light */
+}