feat: enhance cart layout and styling for improved user experience

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"

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;
-  }
 }

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>

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;

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;