From 06d29be056ed7e111ad0becd90d607577e5beca0 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 1 Jul 2026 16:56:29 -0300
Subject: [PATCH] feat: enhance cart layout and styling for improved user
 experience

---
 .../store-header/store-header.component.html  |  4 ++--
 .../store-header/store-header.component.scss  | 16 +--------------
 .../reutilizables-test-page.component.html    | 20 ++++++++++---------
 .../reutilizables-test-page.component.scss    |  6 ++++++
 .../components/cart/cart.component.scss       |  6 ++++--
 5 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.html b/src/app/core/layout/store-layout/store-header/store-header.component.html
index 61883d5..2b901c5 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.html
@@ -15,8 +15,8 @@
         }
       </div>
 
-      <div class="d-flex flex-row align-items-center gap-3 ms-auto store-layout__actions-group">
-        <div class="input-group store-layout__search" role="search">
+      <div class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap w-100 justify-content-between justify-content-md-end">
+        <div class="input-group store-layout__search flex-grow-1" role="search">
           <label class="visually-hidden" for="store-search-input">Buscar productos</label>
           <input
             id="store-search-input"
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss
index 69da165..3f63201 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss
@@ -42,11 +42,7 @@
 
 .store-layout__search {
   width: min(100%, 24rem);
-  min-width: 18rem;
-}
-
-.store-layout__actions-group {
-  flex-wrap: nowrap;
+  min-width: 0;
 }
 
 .store-layout__search-input {
@@ -111,14 +107,4 @@
   .store-layout__brand-slot {
     min-width: 0;
   }
-
-  .store-layout__actions-group {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .store-layout__search {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
 }
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
index 0947756..1c59d49 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
@@ -225,15 +225,17 @@
         </div>
 
         @if (cartVisible) {
-          <app-cart
-            [showClose]="true"
-            [items]="cartMockItems"
-            [subtotal]="366000"
-            [discount]="66000"
-            [total]="300000"
-            [backgroundColor]="cartBackgroundColor"
-            (closed)="hideCart()"
-          />
+          <div class="cart-showcase__viewport">
+            <app-cart
+              [showClose]="true"
+              [items]="cartMockItems"
+              [subtotal]="366000"
+              [discount]="66000"
+              [total]="300000"
+              [backgroundColor]="cartBackgroundColor"
+              (closed)="hideCart()"
+            />
+          </div>
         }
       </div>
     </div>
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
index 97ed775..f1586fd 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
@@ -68,6 +68,12 @@ h1 {
   justify-items: start;
 }
 
+.cart-showcase__viewport {
+  width: 100%;
+  max-width: 370px;
+  height: 360px;
+}
+
 .cart-showcase__header {
   width: 100%;
   display: flex;
diff --git a/src/app/shared/components/cart/cart.component.scss b/src/app/shared/components/cart/cart.component.scss
index 249b2a6..240b94c 100644
--- a/src/app/shared/components/cart/cart.component.scss
+++ b/src/app/shared/components/cart/cart.component.scss
@@ -2,12 +2,14 @@
   display: block;
   width: 100%;
   max-width: 370px;
+  height: 100%;
 }
 
 .cart {
   display: grid;
-  gap: 0.75rem;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   width: 100%;
+  height: 100%;
   color: #666666;
   border-radius: 0;
   overflow: hidden;
@@ -48,7 +50,7 @@
   &__items {
     display: grid;
     gap: 8px;
-    max-height: 254px;
+    min-height: 0;
     padding: 0 0 0 24px;
     overflow-y: auto;
     scrollbar-color: #d5d5d5 transparent;