root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(planning): remove extra padding around interview panes

Browse Source 
Make the question/plan workspace flush edge-to-edge on desktop with a single column divider, while keeping a compact card inset on mobile.
This commit is contained in:
gsxdsm
2026-07-21 16:59:44 -07:00
parent 4eb532f24e
commit 515d77cea8
2 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/dashboard/app/components/PlanningModeModal.css
View File

@@ -1043,16 +1043,21 @@ An empty footer must NOT reserve vertical space or paint its divider band. When
}
/* Question View */
/*
FNXC:PlanningMode 2026-07-21-16:47:
The interview workspace no longer insets the question/plan panes with outer padding or inter-pane gap.
That gutter read as dead space around the framed cards; panes now sit flush edge-to-edge with a single column divider, matching Missions split layout and the desktop flush rules below.
*/
.planning-workspace {
position: relative;
display: grid;
grid-template-areas: "question plan";
grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
gap: var(--space-lg);
gap: 0;
flex: 1;
min-width: 0;
min-height: 0;
padding: var(--space-lg);
padding: 0;
overflow: hidden;
background: color-mix(in srgb, var(--card) 40%, var(--surface));
}
@@ -1068,10 +1073,10 @@ An empty footer must NOT reserve vertical space or paint its divider band. When
min-width: 0;
min-height: 0;
overflow: hidden;
border: solid var(--btn-border-width) color-mix(in srgb, var(--border) 82%, transparent);
border-radius: var(--radius-xl);
border: none;
border-radius: 0;
background: var(--surface);
box-shadow: var(--shadow-sm);
box-shadow: none;
}
.planning-plan-pane {
@@ -1085,6 +1090,7 @@ An empty footer must NOT reserve vertical space or paint its divider band. When
.planning-question-pane {
grid-area: question;
border-right: solid var(--btn-border-width) color-mix(in srgb, var(--border) 82%, transparent);
}
.planning-workspace--generating > .planning-plan-pane,
@@ -2206,12 +2212,21 @@ mobile and desktop offer the same View task / Return to sessions choices.
padding: var(--space-lg);
}
/*
FNXC:PlanningMode 2026-07-21-16:47:
Mobile keeps a compact card inset and rounded panes because only one pane is visible at a time;
clear the desktop column divider so a solo question/plan card is not edged by a right border.
*/
.planning-workspace {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-md);
padding: var(--space-md);
}
.planning-question-pane {
border-right: none;
}
.planning-workspace--mobile-tab-question,
.planning-workspace--mobile-tab-plan {
grid-template-areas:
@@ -2272,7 +2287,9 @@ mobile and desktop offer the same View task / Return to sessions choices.
.planning-plan-pane,
.planning-question-pane {
border: solid var(--btn-border-width) color-mix(in srgb, var(--border) 82%, transparent);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
/* FNXC:PlanningMode 2026-06-22-15:30: this legacy full-viewport sheet sizing

8
packages/dashboard/app/components/__tests__/PlanningModeModal.css.test.ts
View File

@@ -74,13 +74,21 @@ describe("PlanningModeModal CSS responsive action contract", () => {
const css = loadPlanningCss();
const desktopRule = findRule(css, ".planning-workspace");
expect(desktopRule).toMatch(/grid-template-areas\s*:\s*"question plan"\s*;/);
// FNXC:PlanningMode 2026-07-21-16:47: interview panes sit flush — no outer workspace gutter or inter-pane gap.
expect(desktopRule).toMatch(/padding\s*:\s*0\s*;/);
expect(desktopRule).toMatch(/gap\s*:\s*0\s*;/);
expect(findRule(css, ".planning-plan-pane")).toMatch(/grid-area\s*:\s*plan\s*;/);
expectSomeRule(css, ".planning-question-pane", /grid-area\s*:\s*question\s*;/);
expectSomeRule(css, ".planning-question-pane", /border-right\s*:\s*solid var\(--btn-border-width\)/);
expect(findRule(css, ".planning-plan-pane,\n.planning-question-pane")).toMatch(/border-radius\s*:\s*0\s*;/);
const mobileCss = getMediaBlocks(css, MOBILE_ACTIONS_QUERY).join("\n");
expect(findRule(mobileCss, ".planning-workspace--mobile-tab-question,\n .planning-workspace--mobile-tab-plan")).toMatch(/"tabs"\s*"content"/);
expect(findRule(mobileCss, ".planning-workspace-tabs")).toMatch(/display\s*:\s*grid\s*;/);
expect(findRule(mobileCss, ".planning-workspace--mobile-tab-question .planning-plan-pane,\n .planning-workspace--mobile-tab-plan .planning-question-pane")).toMatch(/display\s*:\s*none\s*;/);
// Mobile restores a compact card inset because only one pane is visible at a time.
expect(findRule(mobileCss, ".planning-workspace")).toMatch(/padding\s*:\s*var\(--space-md\)\s*;/);
expect(findRule(mobileCss, ".planning-question-pane")).toMatch(/border-right\s*:\s*none\s*;/);
});
it("keeps desktop planning content flush inside both panes with compact aligned action rows", () => {