feat(KB-167): add mobile scroll-snap CSS to board columns

- Add scroll-snap-type: x mandatory to .board in ≤768px media query
- Set scroll-snap-align: start and flex-shrink: 0 on .column for swipe navigation
- Enable -webkit-overflow-scrolling: touch for smooth iOS scrolling
- Add mobile-scroll-snap test suite asserting snap rules inside @media block
This commit is contained in:
Dustin Byrne
2026-03-28 09:56:10 -04:00
parent 38eb44b982
commit 01e1bdab3c
2 changed files with 56 additions and 0 deletions

View File

@@ -1300,6 +1300,23 @@ html, body {
On narrow viewports (≤768px) the modal goes full-screen, action buttons wrap,
and spacing is reduced to stay usable on screens as small as 320px. */
@media (max-width: 768px) {
/* Board: horizontal scroll-snap for swipe-between-columns */
.board {
display: flex;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 12px;
gap: 12px;
}
.board > .column {
min-width: 280px;
flex-shrink: 0;
scroll-snap-align: start;
}
.modal-overlay {
padding-top: 0;
align-items: stretch;