From 0a5323520f16eb9f32f8d3990af3950d09b1198a Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Tue, 29 Sep 2026 14:25:53 +0200
Subject: [PATCH] feat(web): stack entry fields in one column and let dates
 fill the row

The write panel is narrow, so an entry's fields now take the whole
column. Start and end dates still share a line and now span it, with
Present below. A new entry's badge just says Draft.
---
 .../resume/editor/write/dates-field.tsx       | 25 +++++++++++--------
 .../resume/editor/write/entry-card.tsx        |  6 ++---
 .../features/resume/editor/write/fields.tsx   |  2 +-
 .../resume/editor/write/write-panel.test.tsx  |  4 +--
 tests/e2e/specs/section-editing.spec.ts       |  4 +--
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/features/resume/editor/write/dates-field.tsx b/apps/web/src/features/resume/editor/write/dates-field.tsx
index 1cdbe3e15..24082124e 100644
--- a/apps/web/src/features/resume/editor/write/dates-field.tsx
+++ b/apps/web/src/features/resume/editor/write/dates-field.tsx
@@ -49,7 +49,7 @@ function MonthYearInput({
 	const formatted = value ? formatYearMonth(value, { locale, format }) : "";
 
 	return (
-		<div className="relative w-[132px]">
+		<div className="relative min-w-0 flex-1">
 			<Icon
 				name="calendar_month"
 				size={18}
@@ -109,7 +109,7 @@ export function DatesField({ dates, single = false, locale, format, onChange, cl
 				{single ? <Trans>Date</Trans> : <Trans>Dates</Trans>}
 			</legend>
 
-			<div className="flex flex-wrap items-center gap-2">
+			<div className="flex items-center gap-2">
 				<MonthYearInput
 					label={single ? t`Date` : t`Start`}
 					value={dates.start}
@@ -134,18 +134,23 @@ export function DatesField({ dates, single = false, locale, format, onChange, cl
 							onCommit={(end) => onChange({ ...current, end })}
 							onInvalid={setInvalidFor("end")}
 						/>
-						{/* biome-ignore lint/a11y/noLabelWithoutControl: Base UI's Switch is the control; wrapping it in a label is its documented pattern. */}
-						<label className="flex cursor-pointer items-center gap-2 p-1 text-sm">
-							<Switch
-								checked={dates.present}
-								onCheckedChange={(present) => onChange({ ...current, present, end: present ? null : dates.end })}
-							/>
-							<Trans>Present</Trans>
-						</label>
 					</>
 				)}
 			</div>
 
+			{!single && (
+				<>
+					{/* biome-ignore lint/a11y/noLabelWithoutControl: Base UI's Switch is the control; wrapping it in a label is its documented pattern. */}
+					<label className="flex w-fit cursor-pointer items-center gap-2 p-1 text-sm">
+						<Switch
+							checked={dates.present}
+							onCheckedChange={(present) => onChange({ ...current, present, end: present ? null : dates.end })}
+						/>
+						<Trans>Present</Trans>
+					</label>
+				</>
+			)}
+
 			<div id={`${id}-note`}>
 				{hasError ? (
 					<p className="flex items-start gap-1 text-danger-text text-xs leading-4">
diff --git a/apps/web/src/features/resume/editor/write/entry-card.tsx b/apps/web/src/features/resume/editor/write/entry-card.tsx
index 5cdab8a6a..fb4f7cb00 100644
--- a/apps/web/src/features/resume/editor/write/entry-card.tsx
+++ b/apps/web/src/features/resume/editor/write/entry-card.tsx
@@ -142,7 +142,7 @@ export function EntryCard({ section, entryId, index, count, page, locked, onMove
 						</span>
 						{draft && (
 							<Badge variant="neutral" className="shrink-0">
-								<Trans>Draft · not printed</Trans>
+								<Trans>Draft</Trans>
 							</Badge>
 						)}
 						{entry.hidden && (
@@ -171,7 +171,7 @@ export function EntryCard({ section, entryId, index, count, page, locked, onMove
 					<CollapsibleContent>
 						<fieldset
 							disabled={locked}
-							className="m-0 grid min-w-0 grid-cols-2 gap-x-3 gap-y-2.5 border-0 border-line border-t px-3 pt-3 pb-3.5"
+							className="m-0 grid min-w-0 gap-y-2.5 border-0 border-line border-t px-3 pt-3 pb-3.5"
 						>
 							{fields}
 						</fieldset>
@@ -237,7 +237,7 @@ function PhoneEntryScreen({ section, title, locked, onBack, onDelete, children }
 			</div>
 			<fieldset
 				disabled={locked}
-				className="m-0 grid min-w-0 flex-1 auto-rows-min grid-cols-2 gap-x-3 gap-y-3 overflow-y-auto border-0 p-4 [&_input]:h-11"
+				className="m-0 grid min-w-0 flex-1 auto-rows-min gap-y-3 overflow-y-auto border-0 p-4 [&_input]:h-11"
 			>
 				{children}
 			</fieldset>
diff --git a/apps/web/src/features/resume/editor/write/fields.tsx b/apps/web/src/features/resume/editor/write/fields.tsx
index 2155643cb..bc54c2eb2 100644
--- a/apps/web/src/features/resume/editor/write/fields.tsx
+++ b/apps/web/src/features/resume/editor/write/fields.tsx
@@ -167,7 +167,7 @@ export function MoreOptions({ children }: MoreOptionsProps) {
 				<Trans>More options</Trans>
 			</CollapsibleTrigger>
 			<CollapsibleContent hiddenUntilFound>
-				<div className="grid grid-cols-2 gap-x-3 gap-y-2.5 pt-3">{children}</div>
+				<div className="grid gap-y-2.5 pt-3">{children}</div>
 			</CollapsibleContent>
 		</Collapsible>
 	);
diff --git a/apps/web/src/features/resume/editor/write/write-panel.test.tsx b/apps/web/src/features/resume/editor/write/write-panel.test.tsx
index b907a84a0..509df6d96 100644
--- a/apps/web/src/features/resume/editor/write/write-panel.test.tsx
+++ b/apps/web/src/features/resume/editor/write/write-panel.test.tsx
@@ -95,12 +95,12 @@ describe("WritePanel", () => {
 
 		fireEvent.click(within(experience).getByRole("button", { name: "Add experience" }));
 
-		await waitFor(() => expect(within(experience).getByText("Draft · not printed")).toBeInTheDocument());
+		await waitFor(() => expect(within(experience).getByText("Draft", { exact: true })).toBeInTheDocument());
 		expect(document.activeElement).toHaveAttribute("data-entry-field", "position");
 
 		fireEvent.change(within(experience).getByRole("textbox", { name: "Company" }), { target: { value: "Lumen" } });
 
-		expect(within(experience).queryByText("Draft · not printed")).not.toBeInTheDocument();
+		expect(within(experience).queryByText("Draft", { exact: true })).not.toBeInTheDocument();
 		expect(data().sections.experience.items.at(-1)).toMatchObject({ company: "Lumen" });
 	});
 
diff --git a/tests/e2e/specs/section-editing.spec.ts b/tests/e2e/specs/section-editing.spec.ts
index 0276cb3b3..a349739cf 100644
--- a/tests/e2e/specs/section-editing.spec.ts
+++ b/tests/e2e/specs/section-editing.spec.ts
@@ -12,7 +12,7 @@ test("adds an experience item and persists it across reloads", async ({ authPage
 
 	// The new draft opens in place with its first field focused; it saves as you type.
 	const entry = page.locator("#sidebar-experience [data-entry-id]").last();
-	await expect(entry.getByText("Draft · not printed")).toBeVisible();
+	await expect(entry.getByText("Draft", { exact: true })).toBeVisible();
 	await expect(entry.getByRole("textbox", { name: "Position" })).toBeFocused();
 
 	const savePromise = page.waitForResponse((response) => {
@@ -26,7 +26,7 @@ test("adds an experience item and persists it across reloads", async ({ authPage
 	await savePromise;
 
 	// With a company it's no longer a draft, and its card reads "company · …"
-	await expect(entry.getByText("Draft · not printed")).toHaveCount(0);
+	await expect(entry.getByText("Draft", { exact: true })).toHaveCount(0);
 	await expect(page.getByText(company).filter({ visible: true }).first()).toBeVisible();
 
 	// And it survives a full reload