From 77d74a9ea0d9d0d2d1f290bd934b5ce359771c30 Mon Sep 17 00:00:00 2001
From: Marius Mutu <mmarius28@gmail.com>
Date: Tue, 30 Dec 2025 19:46:47 +0200
Subject: [PATCH] fix(data-entry): Use CSS Grid to prevent Mod Plata/Total
 overlap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed from flexbox to CSS Grid layout for precise column control:
- grid-template-columns: 150px 200px auto (TOTAL, MOD PLATA, CARD)
- column-gap: 3rem ensures clear separation
- Fixed widths prevent any possibility of overlap

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../views/receipts/ReceiptCreateView.vue      | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/modules/data-entry/views/receipts/ReceiptCreateView.vue b/src/modules/data-entry/views/receipts/ReceiptCreateView.vue
index 0dde6e6..318d369 100644
--- a/src/modules/data-entry/views/receipts/ReceiptCreateView.vue
+++ b/src/modules/data-entry/views/receipts/ReceiptCreateView.vue
@@ -342,7 +342,7 @@
             <div class="form-group values-section">
               <!-- Row 1: TOTAL + Mod Plata + Payment details -->
               <div class="values-row-inline">
-                <div class="value-item">
+                <div class="value-item value-item-total">
                   <label>TOTAL *</label>
                   <InputNumber
                     v-model="form.amount"
@@ -353,7 +353,7 @@
                     class="input-compact"
                   />
                 </div>
-                <div class="value-item">
+                <div class="value-item value-item-payment">
                   <label>Mod Plata</label>
                   <Dropdown
                     v-model="form.payment_mode"
@@ -2404,11 +2404,13 @@ const submitForReview = async () => {
   padding: 0.5rem 0.75rem;
 }
 
+/* CSS Grid layout for precise column control - PREVENTS OVERLAP */
 .values-row-inline {
-  display: flex;
-  align-items: flex-end;
-  gap: 0.75rem;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 150px 200px auto;
+  column-gap: 3rem;
+  row-gap: 0.5rem;
+  align-items: start;
 }
 
 .value-item {
@@ -2417,6 +2419,15 @@ const submitForReview = async () => {
   gap: 0.2rem;
 }
 
+/* Explicit widths for inputs */
+.value-item-total {
+  width: 150px;
+}
+
+.value-item-payment {
+  width: 200px;
+}
+
 .value-item label {
   font-size: 0.75rem;
   font-weight: 500;
@@ -2429,7 +2440,15 @@ const submitForReview = async () => {
 }
 
 .dropdown-payment {
-  min-width: 160px;
+  width: 180px;  /* Fixed width to prevent overlap */
+}
+
+:deep(.dropdown-payment) {
+  width: 180px !important;
+}
+
+:deep(.dropdown-payment .p-dropdown) {
+  width: 100% !important;
 }
 
 .payment-method-item {