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

@@ -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>
+          <div className="voiced-fields">
-            <Column sm={4} md={4} lg={5}>
+            <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>
+            </div>
-            <Column sm={4} md={4} lg={5}>
+            <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>
+            </div>
-            <Column sm={4} md={8} lg={6}>
+            <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>
+            </div>
-            <Column sm={4} md={8} lg={8}>
+            <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>
+            </div>
-            <Column sm={4} md={8} lg={16}>
+            <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>
+            </div>
-            <Column sm={4} md={4} lg={5}>
+            <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>
+            </div>
-            <Column sm={4} md={4} lg={5}>
+            <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>
+            </div>
-            <Column sm={4} md={8} lg={6}>
+            <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>
+            </div>
-            <Column sm={4} md={8} lg={16}>
+            <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>
+            </div>
-          </Grid>
+          </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}