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

feat(FN-2582): widen board columns and align mobile snap centering

Browse Source 
- Increase dashboard board column fixed width to 300px in styles and related expectations
- Update mobile board snap-centering behavior to match wider column sizing
- Adjust column fixed-width and board mobile tests to reflect the new layout measurements
This commit is contained in:
Fusion
2026-04-26 09:03:00 -07:00
committed by gsxdsm
parent 58d63db4e8
commit 5450080d45
3 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/dashboard/app/__tests__/column-fixed-width.test.ts
View File

@@ -36,20 +36,20 @@ describe("column fixed-width CSS", () => {
}); });
describe("desktop .board grid template", () => { describe("desktop .board grid template", () => {
it("uses repeat(6, minmax(260px, 1fr)) for 6 columns", () => { it("uses repeat(6, minmax(300px, 1fr)) for 6 columns", () => {
expect(css).toContain( expect(css).toContain(
"grid-template-columns: repeat(6, minmax(260px, 1fr))", "grid-template-columns: repeat(6, minmax(300px, 1fr))",
); );
}); });
}); });
describe("mobile .board > .column", () => { describe("mobile .board > .column", () => {
it("has a fixed 280px width constraint", () => { it("has a fixed 300px width constraint", () => {
// Accept either `width: 280px` or both min-width + max-width: 280px // Accept either `width: 300px` or both min-width + max-width: 300px
const hasFix = const hasFix =
mobileBlock.includes("width: 280px") || mobileBlock.includes("width: 300px") ||
(mobileBlock.includes("min-width: 280px") && (mobileBlock.includes("min-width: 300px") &&
mobileBlock.includes("max-width: 280px")); mobileBlock.includes("max-width: 300px"));
expect(hasFix).toBe(true); expect(hasFix).toBe(true);
}); });
}); });

8
packages/dashboard/app/components/__tests__/board-mobile.test.tsx
View File

@@ -133,18 +133,18 @@ describe("Board and Column mobile CSS", () => {
expectRuleToContain(mobileSection, ".board", "scroll-behavior: smooth;"); expectRuleToContain(mobileSection, ".board", "scroll-behavior: smooth;");
}); });
it("contains .board > .column width: 280px in the mobile media block", () => { it("contains .board > .column width: 300px in the mobile media block", () => {
const css = loadAllAppCss(); const css = loadAllAppCss();
const mobileSection = getMainMobileSection(css); const mobileSection = getMainMobileSection(css);
expectRuleToContain(mobileSection, ".board > .column", "width: 280px;"); expectRuleToContain(mobileSection, ".board > .column", "width: 300px;");
}); });
it("contains .board > .column min-width: 280px in the mobile media block", () => { it("contains .board > .column min-width: 300px in the mobile media block", () => {
const css = loadAllAppCss(); const css = loadAllAppCss();
const mobileSection = getMainMobileSection(css); const mobileSection = getMainMobileSection(css);
expectRuleToContain(mobileSection, ".board > .column", "min-width: 280px;"); expectRuleToContain(mobileSection, ".board > .column", "min-width: 300px;");
}); });
it("does not force .column-header min-height in the mobile media block", () => { it("does not force .column-header min-height in the mobile media block", () => {

8
packages/dashboard/app/styles.css
View File

@@ -478,7 +478,7 @@ body {
/* === Board === */ /* === Board === */
.board { .board {
display: grid; display: grid;
grid-template-columns: repeat(6, minmax(260px, 1fr)); grid-template-columns: repeat(6, minmax(300px, 1fr));
gap: var(--column-gap); gap: var(--column-gap);
padding: var(--board-padding); padding: var(--board-padding);
height: 100%; height: 100%;
@@ -2774,7 +2774,7 @@ input[type="range"]:focus-visible {
overflow-y: hidden; overflow-y: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
scroll-padding-inline: calc(50% - 140px); scroll-padding-inline: calc(50% - 150px);
scroll-behavior: smooth; scroll-behavior: smooth;
scrollbar-width: none; scrollbar-width: none;
padding: var(--space-md); padding: var(--space-md);
@@ -2788,8 +2788,8 @@ input[type="range"]:focus-visible {
} }
.board > .column { .board > .column {
width: 280px; width: 300px;
min-width: 280px; min-width: 300px;
flex-shrink: 0; flex-shrink: 0;
scroll-snap-align: center; scroll-snap-align: center;
} }