Problem
The current mobile rendering of project pages is rough. On https://makeabilitylab.cs.washington.edu/projects/sidewalk/ at ~430px width:
- The sidebar's auto-fit 140px grid forces unrelated content into 4-column rows above the description: Date (one line of text), Website (URL), Open Code (link), and Research Scientist Lead (avatar + name) all share the same card chrome despite being completely different types of info. The result reads as jumbled.
- Avatar cards (people) sit beside number cards (# Contributors) and text cards (Date) in the same row — no semantic grouping or visual hierarchy.
- The Funding row overflows: three sponsor logos fit in row 1, "Mapillary" gets orphaned to row 2.
- The user has to scroll past ~500px of metadata before reaching the description.
Screenshot of the current state (Jon, 2026-06-14):
(attach screenshot of current /projects/sidewalk/ mobile here when posting)
Context
This work spawned during the #1245 follow-up. Desktop is in good shape after the recent batch:
5472b80 — drop "Former" prefix on ended projects + sidebar overflow fix26f13c4 — hybrid sticky behavior (sidebar scrolls with page until its bottom hits viewport bottom, then pins) + demo seed for visual testing
Mobile still needs design work. We're tracking that here.
WIP
Work in progress on branch 1271-mobile-project-page-redesign. High-level changes already in the branch:
- Restructured
.project-layout to use CSS Grid with grid-template-areas, so the same HTML can produce different orderings on mobile vs desktop without content duplication. .project-sidebar-block uses display: contents on mobile to flatten its 4 children (hero / team / funding / secondary-info) into the page grid; on desktop it reverts to a normal block that occupies the right column.
- Compact "hero strip" above the description on mobile: inline-text row (
Active · 2012–Present · 163 contributors) followed by a row of pill-buttons for the website / code / data links. No more cards.
- Team section moved below the description, de-emphasized: sentence-case "Team" header (no all-caps, no underline), small muted group sub-headers ("PIs / Co-PIs"), each person rendered as a 24px avatar + name inline.
- Funding compressed to "Funded by" inline + small logo row.
- Extended
seed_demo_projects management command to seed sponsor/grant fixtures so the funding case can be visually verified locally.
Open questions / next steps
- Jon hasn't visually signed off on v2 yet — that's the immediate next step. Possible follow-ups based on feedback:
- Hero strip: is the pill-button row the right pattern, or should it lean more towards a dense inline icon row?
- Team for large teams (Sidewalk): does the one-line-per-person layout scale to 10+ leads on mobile, or do we need a different pattern (avatar stack with overflow indicator, horizontal-scroll strip, expandable section)?
- Funding: the inline "Funded by" + logos approach is the lightest possible — does it still feel like funders are properly acknowledged, or should it stay as a small standalone block?
- Tension to resolve: sidebar content brought into the main flow becomes "front-and-center salience" on mobile, but the data is genuinely supporting context (not landmark sections). The current iteration tries to convey "supporting context" via lighter typography; not sure that's enough.
Out of scope
Demo URLs for visual testing
After running docker exec makeabilitylabwebsite-website-1 python manage.py seed_demo_projects on a local container, four cases are seeded:
/project/demo-active-small/ — short main, short sidebar (baseline)/project/demo-active-tall/ — tall main + tall sidebar, active (Sidewalk-like)/project/demo-ended-tall/ — tall main + tall sidebar, ended (Former-prefix test)/project/demo-tall-main-short-sidebar/ — tall main + short sidebar
Use Chrome DevTools "Toggle device toolbar" or resize the window narrow to test the mobile layout.
Problem
The current mobile rendering of project pages is rough. On https://makeabilitylab.cs.washington.edu/projects/sidewalk/ at ~430px width:
Screenshot of the current state (Jon, 2026-06-14):
(attach screenshot of current /projects/sidewalk/ mobile here when posting)
Context
This work spawned during the #1245 follow-up. Desktop is in good shape after the recent batch:
5472b80— drop "Former" prefix on ended projects + sidebar overflow fix26f13c4— hybrid sticky behavior (sidebar scrolls with page until its bottom hits viewport bottom, then pins) + demo seed for visual testingMobile still needs design work. We're tracking that here.
WIP
Work in progress on branch
1271-mobile-project-page-redesign. High-level changes already in the branch:.project-layoutto use CSS Grid withgrid-template-areas, so the same HTML can produce different orderings on mobile vs desktop without content duplication..project-sidebar-blockusesdisplay: contentson mobile to flatten its 4 children (hero / team / funding / secondary-info) into the page grid; on desktop it reverts to a normal block that occupies the right column.Active · 2012–Present · 163 contributors) followed by a row of pill-buttons for the website / code / data links. No more cards.seed_demo_projectsmanagement command to seed sponsor/grant fixtures so the funding case can be visually verified locally.Open questions / next steps
Out of scope
Demo URLs for visual testing
After running
docker exec makeabilitylabwebsite-website-1 python manage.py seed_demo_projectson a local container, four cases are seeded:/project/demo-active-small/— short main, short sidebar (baseline)/project/demo-active-tall/— tall main + tall sidebar, active (Sidewalk-like)/project/demo-ended-tall/— tall main + tall sidebar, ended (Former-prefix test)/project/demo-tall-main-short-sidebar/— tall main + short sidebarUse Chrome DevTools "Toggle device toolbar" or resize the window narrow to test the mobile layout.