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 c3275ce876
commit e89fc73bd7
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", () => {
it("uses repeat(6, minmax(260px, 1fr)) for 6 columns", () => {
it("uses repeat(6, minmax(300px, 1fr)) for 6 columns", () => {
expect(css).toContain(
"grid-template-columns: repeat(6, minmax(260px, 1fr))",
"grid-template-columns: repeat(6, minmax(300px, 1fr))",
);
});
});
describe("mobile .board > .column", () => {
it("has a fixed 280px width constraint", () => {
// Accept either `width: 280px` or both min-width + max-width: 280px
it("has a fixed 300px width constraint", () => {
// Accept either `width: 300px` or both min-width + max-width: 300px
const hasFix =
mobileBlock.includes("width: 280px") ||
(mobileBlock.includes("min-width: 280px") &&
mobileBlock.includes("max-width: 280px"));
mobileBlock.includes("width: 300px") ||
(mobileBlock.includes("min-width: 300px") &&
mobileBlock.includes("max-width: 300px"));
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;");
});
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 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 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", () => {

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

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