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

fix(planning): remove extra mobile and tablet pane padding

Browse Source 
Flush question and plan-review surfaces on phone and tablet so workspace gutters, scroll padding, and nested card chrome no longer stack as dead space.
This commit is contained in:
gsxdsm
2026-07-21 18:44:48 -07:00
parent d486bf49dd
commit 483c33a323
2 changed files with 57 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1664,8 +1664,11 @@ its refinement menu remain reachable at the bottom of bounded desktop and mobile
/*
FNXC:PlanningMode 2026-07-21-09:15:
Desktop Planning panes already own their framed surfaces, so their scroll content must sit flush and their action rows must share a compact baseline. Scope these overrides to Planning's pane wrappers and desktop breakpoint so shared Mission/Milestone interview classes and compact safe-area padding retain their existing presentation.
FNXC:PlanningMode 2026-07-21-18:41:
Tablet (769–1024) keeps the same two-pane shell as desktop but previously fell below the 1025px flush gate, so the right plan pane still stacked scroll padding + card chrome. Lower the gate to 769px so tablet inherits the flush pane treatment; phone (≤768) keeps its own mobile flush block.
*/
@media (min-width: 1025px) {
@media (min-width: 769px) {
.planning-question-pane .planning-question-scroll,
.planning-plan-pane .planning-plan-scroll {
padding: 0;
@@ -2213,14 +2216,13 @@ mobile and desktop offer the same View task / Return to sessions choices.
}
/*
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.
FNXC:PlanningMode 2026-07-21-18:34:
Mobile question and plan-review panes were double-inset: workspace gutter + scroll padding + nested card chrome on top of the pane frame. Drop the outer gutter and pane chrome so content sits flush edge-to-edge like desktop, keep a light tab strip inset, and leave readable content padding on the question panel / plan document only. 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);
gap: 0;
padding: 0;
}
.planning-question-pane {
@@ -2240,6 +2242,7 @@ mobile and desktop offer the same View task / Return to sessions choices.
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xs);
margin: var(--space-sm) var(--space-sm) 0;
padding: var(--space-xs);
border: solid var(--btn-border-width) var(--border);
border-radius: var(--radius-lg);
@@ -2287,9 +2290,33 @@ 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);
border: none;
border-radius: 0;
box-shadow: none;
}
/*
FNXC:PlanningMode 2026-07-21-18:34:
Scope flush scroll overrides to Planning's pane wrappers so shared Mission/Milestone interview
classes keep their existing mobile view-scroll padding.
*/
.planning-question-pane .planning-question-scroll,
.planning-plan-pane .planning-plan-scroll {
padding: 0;
}
.planning-question-pane .planning-question-panel {
background: var(--surface);
border: none;
border-radius: 0;
padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.planning-plan-pane .planning-plan-document {
width: 100%;
padding: var(--space-lg);
border-radius: 0;
box-shadow: none;
}
/* FNXC:PlanningMode 2026-06-22-15:30: this legacy full-viewport sheet sizing

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

@@ -7,7 +7,8 @@ const PLANNING_CSS_PATH = resolve(__dirname, "..", "PlanningModeModal.css");
const TABLET_SUMMARY_ACTIONS_QUERY = "@media (min-width: 769px) and (max-width: 1024px)";
const MOBILE_ACTIONS_QUERY = "@media (max-width: 768px)";
const MOBILE_PLANNING_SHELL_QUERY = "@media (max-width: 768px), (max-height: 480px)";
const DESKTOP_PLANNING_WORKSPACE_QUERY = "@media (min-width: 1025px)";
/* FNXC:PlanningMode 2026-07-21-18:41: flush pane rules cover tablet + desktop (two-pane shell). */
const DESKTOP_PLANNING_WORKSPACE_QUERY = "@media (min-width: 769px)";
function loadPlanningCss(): string {
return readFileSync(PLANNING_CSS_PATH, "utf-8");
@@ -86,25 +87,31 @@ describe("PlanningModeModal CSS responsive action contract", () => {
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*;/);
// FNXC:PlanningMode 2026-07-21-18:34: mobile question/plan review sit flush — no outer workspace gutter or nested pane chrome.
expect(findRule(mobileCss, ".planning-workspace")).toMatch(/padding\s*:\s*0\s*;/);
expect(findRule(mobileCss, ".planning-workspace")).toMatch(/gap\s*:\s*0\s*;/);
expect(findRule(mobileCss, ".planning-question-pane")).toMatch(/border-right\s*:\s*none\s*;/);
expect(findRule(mobileCss, ".planning-plan-pane,\n .planning-question-pane")).toMatch(/border\s*:\s*none\s*;/);
expect(findRule(mobileCss, ".planning-plan-pane,\n .planning-question-pane")).toMatch(/border-radius\s*:\s*0\s*;/);
expect(findRule(mobileCss, ".planning-question-pane .planning-question-scroll,\n .planning-plan-pane .planning-plan-scroll")).toMatch(/padding\s*:\s*0\s*;/);
expect(findRule(mobileCss, ".planning-question-pane .planning-question-panel")).toMatch(/border\s*:\s*none\s*;/);
expect(findRule(mobileCss, ".planning-plan-pane .planning-plan-document")).toMatch(/padding\s*:\s*var\(--space-lg\)\s*;/);
});
it("keeps desktop planning content flush inside both panes with compact aligned action rows", () => {
it("keeps tablet and desktop planning content flush inside both panes with compact aligned action rows", () => {
const css = loadPlanningCss();
const desktopCss = getMediaBlocks(css, DESKTOP_PLANNING_WORKSPACE_QUERY).join("\n");
const flushScrollRule = findRule(desktopCss, ".planning-question-pane .planning-question-scroll,\n .planning-plan-pane .planning-plan-scroll");
const desktopQuestionPanelRule = findRule(desktopCss, ".planning-question-pane .planning-question-panel");
const desktopPlanDocumentRule = findRule(desktopCss, ".planning-plan-pane .planning-plan-document");
const sharedActionsRule = findRule(desktopCss, ".planning-question-pane .planning-actions,\n .planning-plan-actions");
const sharedButtonsRule = findRule(desktopCss, ".planning-question-pane .planning-actions .btn,\n .planning-plan-actions .btn");
const twoPaneCss = getMediaBlocks(css, DESKTOP_PLANNING_WORKSPACE_QUERY).join("\n");
const flushScrollRule = findRule(twoPaneCss, ".planning-question-pane .planning-question-scroll,\n .planning-plan-pane .planning-plan-scroll");
const questionPanelRule = findRule(twoPaneCss, ".planning-question-pane .planning-question-panel");
const planDocumentRule = findRule(twoPaneCss, ".planning-plan-pane .planning-plan-document");
const sharedActionsRule = findRule(twoPaneCss, ".planning-question-pane .planning-actions,\n .planning-plan-actions");
const sharedButtonsRule = findRule(twoPaneCss, ".planning-question-pane .planning-actions .btn,\n .planning-plan-actions .btn");
expect(flushScrollRule).toMatch(/padding\s*:\s*0\s*;/);
expect(desktopQuestionPanelRule).toMatch(/border\s*:\s*none\s*;/);
expect(desktopQuestionPanelRule).toMatch(/border-radius\s*:\s*0\s*;/);
expect(desktopPlanDocumentRule).toMatch(/width\s*:\s*100%\s*;/);
expect(desktopPlanDocumentRule).toMatch(/box-shadow\s*:\s*none\s*;/);
expect(questionPanelRule).toMatch(/border\s*:\s*none\s*;/);
expect(questionPanelRule).toMatch(/border-radius\s*:\s*0\s*;/);
expect(planDocumentRule).toMatch(/width\s*:\s*100%\s*;/);
expect(planDocumentRule).toMatch(/box-shadow\s*:\s*none\s*;/);
expect(sharedActionsRule).toMatch(/padding\s*:\s*var\(--space-sm\) var\(--space-xl\)\s*;/);
expect(sharedButtonsRule).toMatch(/min-height\s*:\s*calc\(var\(--space-2xl\) \+ var\(--space-sm\)\)\s*;/);