ilia/stork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix phone layout so name columns scroll sideways
CI / secret-scan (pull_request) Successful in 34s
Details
CI / python-ci (pull_request) Successful in 1m23s
Details

Browse Source 
Keep columns side-by-side with horizontal snap-scroll instead of
stacking the second column under the first on small screens.
This commit is contained in:
ilia
2026-08-07 14:58:13 -04:00
parent 50a3a4ea57
commit 427544e06b
2 changed files with 46 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+14 -2
View File
@@ -137,8 +137,20 @@
color: var(--muted); font-size: 0.92rem; color: var(--muted); font-size: 0.92rem;
} }
.who a { color: var(--accent); font-weight: 600; text-decoration: none; } .who a { color: var(--accent); font-weight: 600; text-decoration: none; }
.boards { display: grid; gap: 0.85rem; margin-bottom: 0.85rem; } .boards {
@media (min-width: 860px) { .boards { grid-template-columns: 1fr 1fr; align-items: start; } } display: flex; gap: 0.85rem; margin-bottom: 0.85rem;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
padding-bottom: 0.25rem;
}
.boards > section {
flex: 0 0 auto;
width: min(18.5rem, calc(100vw - 2.5rem));
scroll-snap-align: start;
}
@media (min-width: 860px) {
.boards > section { flex: 1 1 0; width: auto; min-width: 16rem; }
}
.col-head { .col-head {
display: flex; align-items: baseline; justify-content: space-between; display: flex; align-items: baseline; justify-content: space-between;
gap: 0.5rem; margin-bottom: 0.35rem; padding-bottom: 0.45rem; gap: 0.5rem; margin-bottom: 0.35rem; padding-bottom: 0.45rem;
static/v2.html
+32 -9
View File
@@ -111,24 +111,47 @@
.who a { color: var(--ink); } .who a { color: var(--ink); }
.boards-row { .boards-row {
display: flex; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem; display: flex; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem;
min-width: 0;
} }
/* Always side-by-side; swipe/scroll sideways on phone instead of stacking. */
.boards { .boards {
display: grid; gap: 1rem; flex: 1; min-width: 0; display: flex; gap: 1rem; flex: 1; min-width: 0;
grid-template-columns: 1fr; overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 0.35rem;
scrollbar-width: thin;
} }
@media (min-width: 700px) { .boards .sheet {
.boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } margin-bottom: 0;
flex: 0 0 auto;
width: min(18.5rem, calc(100vw - 5.25rem));
max-width: 22rem;
scroll-snap-align: start;
} }
@media (min-width: 1100px) { @media (min-width: 860px) {
.boards.cols-3, .boards.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .boards.cols-2 .sheet {
flex: 1 1 0;
width: auto;
min-width: 16rem;
max-width: none;
}
.boards.cols-3 .sheet,
.boards.cols-4 .sheet {
flex: 1 1 0;
width: auto;
min-width: 14rem;
max-width: none;
}
} }
.boards .sheet { margin-bottom: 0; }
.add-col { .add-col {
flex: 0 0 auto; flex: 0 0 auto;
align-self: stretch; align-self: stretch;
min-width: 3rem; min-width: 2.75rem;
writing-mode: horizontal-tb; writing-mode: horizontal-tb;
background: transparent; background: var(--sheet);
color: var(--muted); color: var(--muted);
border: 1px dashed var(--rule); border: 1px dashed var(--rule);
font-size: 1.6rem; font-size: 1.6rem;