fix(data-entry): Use CSS Grid to prevent Mod Plata/Total overlap

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>
This commit is contained in:
2025-12-30 19:46:47 +02:00
parent 4a886f0b64
commit 77d74a9ea0

View File

@@ -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 {