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

feat(KB-170): CSS scroll-snap center alignment for board columns

Browse Source 
- Change scroll-snap-align from start to center on columns (desktop and mobile)
- Add scroll-snap-type: x proximity and scroll-padding-inline on desktop .board
- Add scroll-padding-inline: calc(50% - 140px) in mobile media query
- Restructure scroll-snap tests into desktop and mobile describe blocks
- Update all test assertions to expect center alignment instead of start
This commit is contained in:
Dustin Byrne
2026-03-28 10:07:39 -04:00
parent b286ee5a2b
commit b5f0e24c4c
2 changed files with 53 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/dashboard/app/__tests__/mobile-scroll-snap.test.ts
View File

@@ -7,33 +7,56 @@ const css = readFileSync(
"utf-8",
);
describe("mobile scroll-snap CSS", () => {
it("contains scroll-snap-type: x mandatory", () => {
expect(css).toContain("scroll-snap-type: x mandatory");
describe("scroll-snap CSS", () => {
describe("base (desktop) styles", () => {
it("contains scroll-snap-type: x proximity on .board", () => {
expect(css).toContain("scroll-snap-type: x proximity");
});
it("contains scroll-snap-align: center on .column", () => {
// The base .column rule should include scroll-snap-align: center
const columnBlockMatch = css.match(/\.column\s*\{[^}]*\}/);
expect(columnBlockMatch).not.toBeNull();
expect(columnBlockMatch![0]).toContain("scroll-snap-align: center");
});
it("contains scroll-padding-inline on .board", () => {
expect(css).toContain("scroll-padding-inline");
});
});
it("contains scroll-snap-align: start", () => {
expect(css).toContain("scroll-snap-align: start");
});
it("contains -webkit-overflow-scrolling: touch", () => {
expect(css).toContain("-webkit-overflow-scrolling: touch");
});
it("contains flex-shrink: 0", () => {
expect(css).toContain("flex-shrink: 0");
});
it("scroll-snap rules are inside a @media block", () => {
// Extract all @media blocks and verify snap rules exist within one
const mediaBlockRegex = /@media\s*\([^)]*max-width:\s*768px[^)]*\)\s*\{/g;
const mediaStart = css.search(mediaBlockRegex);
expect(mediaStart).toBeGreaterThanOrEqual(0);
// Get the content after the media query opening
describe("mobile @media (max-width: 768px)", () => {
// Extract the mobile media block for scoped assertions
const mediaStart = css.search(
/@media\s*\([^)]*max-width:\s*768px[^)]*\)\s*\{/,
);
const afterMedia = css.slice(mediaStart);
// Find the scroll-snap-type within this media block
expect(afterMedia).toContain("scroll-snap-type: x mandatory");
expect(afterMedia).toContain("scroll-snap-align: start");
it("contains scroll-snap-type: x mandatory", () => {
expect(css).toContain("scroll-snap-type: x mandatory");
});
it("contains scroll-snap-align: center (not start)", () => {
expect(afterMedia).toContain("scroll-snap-align: center");
expect(afterMedia).not.toContain("scroll-snap-align: start");
});
it("contains -webkit-overflow-scrolling: touch", () => {
expect(css).toContain("-webkit-overflow-scrolling: touch");
});
it("contains flex-shrink: 0", () => {
expect(css).toContain("flex-shrink: 0");
});
it("contains scroll-padding-inline in the media block", () => {
expect(afterMedia).toContain("scroll-padding-inline");
});
it("scroll-snap rules are inside a @media block", () => {
expect(mediaStart).toBeGreaterThanOrEqual(0);
expect(afterMedia).toContain("scroll-snap-type: x mandatory");
expect(afterMedia).toContain("scroll-snap-align: center");
});
});
});

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

@@ -176,6 +176,8 @@ body {
height: calc(100vh - 57px);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scroll-padding-inline: 50%;
scrollbar-color: var(--border) transparent;
scrollbar-width: thin;
}
@@ -201,6 +203,7 @@ body {
min-width: 260px;
min-height: 0;
transition: border-color 0.2s;
scroll-snap-align: center;
}
.column.drag-over {
@@ -1520,6 +1523,7 @@ body {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-inline: calc(50% - 140px);
padding: 12px;
gap: 12px;
}
@@ -1527,7 +1531,7 @@ body {
.board > .column {
min-width: 280px;
flex-shrink: 0;
scroll-snap-align: start;
scroll-snap-align: center;
}
/* Reduce header padding to reclaim horizontal space */