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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user