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

src/views/NewInvoice.tsx

@@ -800,8 +800,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
         </Column>
 
         <Column sm={4} md={8} lg={9} className="voiced-stack">
-          <Grid narrow>
-            <Column sm={4} md={4} lg={5}>
+          <div className="voiced-fields">
+            <div className="voiced-field voiced-field--4">
               <TextInput
                 id="invoiceDate"
                 disabled={locked}
@@ -813,8 +813,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                   setDueDate(addDays(e.target.value, settings.paymentTermsDays));
                 }}
               />
-            </Column>
-            <Column sm={4} md={4} lg={5}>
+            </div>
+            <div className="voiced-field voiced-field--4">
               <TextInput
                 id="dueDate"
                 disabled={locked}
@@ -823,12 +823,12 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                 value={dueDate}
                 onChange={(e) => setDueDate(e.target.value)}
               />
-            </Column>
-            <Column sm={4} md={8} lg={6}>
+            </div>
+            <div className="voiced-field voiced-field--4">
               <TextInput id="invoiceNumber" labelText="Invoice number" value={issued?.number ?? number} readOnly />
-            </Column>
+            </div>
 
-            <Column sm={4} md={8} lg={8}>
+            <div className="voiced-field voiced-field--12">
               <ComboBox
                 id="savedClient"
                 disabled={locked}
@@ -853,8 +853,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
               >
                 Create client
               </Button>
-            </Column>
-            <Column sm={4} md={8} lg={8}>
+            </div>
+            <div className="voiced-field voiced-field--12">
               <TextInput
                 id="clientName"
                 disabled={locked}
@@ -865,8 +865,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                   setClientId(null);
                 }}
               />
-            </Column>
-            <Column sm={4} md={8} lg={16}>
+            </div>
+            <div className="voiced-field voiced-field--12">
               <TextArea
                 id="clientAddress"
                 disabled={locked}
@@ -875,8 +875,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                 value={clientAddress}
                 onChange={(e) => setClientAddress(e.target.value)}
               />
-            </Column>
-            <Column sm={4} md={4} lg={5}>
+            </div>
+            <div className="voiced-field voiced-field--5">
               <TextInput
                 id="clientGstin"
                 disabled={locked}
@@ -886,8 +886,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                 invalid={Boolean(clientGstinError)}
                 invalidText={clientGstinError}
               />
-            </Column>
-            <Column sm={4} md={4} lg={5}>
+            </div>
+            <div className="voiced-field voiced-field--7">
               <TextInput
                 id="poNumber"
                 disabled={locked}
@@ -895,8 +895,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                 value={poNumber}
                 onChange={(e) => setPoNumber(e.target.value)}
               />
-            </Column>
-            <Column sm={4} md={8} lg={6}>
+            </div>
+            <div className="voiced-field voiced-field--12">
               <Select
                 id="placeOfSupply"
                 disabled={locked}
@@ -908,8 +908,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                   <SelectItem key={s.code} value={s.code} text={`${s.code} — ${s.name}`} />
                 ))}
               </Select>
-            </Column>
-            <Column sm={4} md={8} lg={16}>
+            </div>
+            <div className="voiced-field voiced-field--12">
               <Toggle
                 id="saveClient"
                 disabled={locked}
@@ -917,8 +917,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                 toggled={saveClient}
                 onToggle={setSaveClient}
               />
-            </Column>
-          </Grid>
+            </div>
+          </div>
 
           <div>
             <h3 style={{ marginBottom: "0.75rem" }}>Line items</h3>
@@ -969,7 +969,7 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
                     />
                   </div>
                 ) : null}
-                <div style={{ flex: "0 1 150px" }}>
+                <div style={{ flex: "0 1 180px" }}>
                   <Select
                     id={`mode-${index}`}
                     disabled={locked}