From 66a39b22910d56a64d7dbc5f3fc6e8fe6598105b Mon Sep 17 00:00:00 2001 From: Xavier Karma Date: Tue, 6 Oct 2026 09:35:02 +0530 Subject: [PATCH 1/6] Fix clipped text in the invoice form The saved-client box showed "Timber Media Pv" for "Timber Media Pvt Ltd": the form sat on a Carbon Grid nested in a Column, whose tracks came out much narrower than the page grid, so the combo box was about 230 px wide at the default window size and the date, GSTIN and PO fields were just as tight. The fields now sit on a plain 12-column CSS grid (.voiced-fields), the client fields use the full width, place of supply gets its own row, and the line type select is wide enough for "Rate x quantity". Claude-Session: https://claude.ai/code/session_01PZypiWDfMkDTeEPeXjRhW5 --- src/styles/carbon.scss | 27 +++++++++++++++++++++++ src/views/NewInvoice.tsx | 46 ++++++++++++++++++++-------------------- 2 files changed, 50 insertions(+), 23 deletions(-) diff --git a/src/styles/carbon.scss b/src/styles/carbon.scss index 1cfed4c..55c7553 100644 --- a/src/styles/carbon.scss +++ b/src/styles/carbon.scss @@ -213,6 +213,33 @@ body { margin-bottom: 2rem; } +// The invoice form's fields sit on a plain 12-column grid. Carbon's nested gives a column only as wide as the +// outer grid's tracks, which left dates, GSTINs and the saved-client box too narrow to show their text. +.voiced-fields { + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: 1rem; + align-items: start; +} + +.voiced-field { + grid-column: span 12; + min-width: 0; +} + +@for $n from 1 through 12 { + .voiced-field--#{$n} { + grid-column: span $n; + } +} + +@media (max-width: 1000px) { + // A narrow window: each of the three date/number fields still needs room for its text. + .voiced-field--4 { + grid-column: span 6; + } +} + .voiced-stack > * + * { margin-top: 1.5rem; } diff --git a/src/views/NewInvoice.tsx b/src/views/NewInvoice.tsx index 9469253..41c3bd1 100644 --- a/src/views/NewInvoice.tsx +++ b/src/views/NewInvoice.tsx @@ -800,8 +800,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv - - +
+
- - +
+
setDueDate(e.target.value)} /> - - +
+
- +
- +
Create client - - +
+
- - +
+