feat: US-012 - Responsive behaviour for mobile and tablet constellation · f48d98b7fc - portfolio

feat: US-012 - Responsive behaviour for mobile and tablet constellation

- Add mobile-specific layout constants (MOBILE_ROLE_WIDTH=80, smaller skill radii)
- Use window.innerWidth for mobile breakpoint detection (container overflows on mobile)
- Reduce timelineX, padding, spacing, and force simulation parameters on mobile
- Truncate role pill labels and skill labels on narrow viewports
- Reduce charge/collision/link-distance forces for tighter mobile layout
- Fix CSS grid overflow: add min-width:0 and overflow:hidden to .pathway-graph-sticky
- MOBILE_FALLBACK_HEIGHT adjusted to 380px (within 360-400px spec)
- Legend wraps gracefully via existing flex-wrap

This commit is contained in:

Andy Charlwood

2026-02-16 03:22:21 +00:00

parent 408cd9573c

commit f48d98b7fc

2 changed files with 73 additions and 42 deletions

									
										src/index.css
									
		+6
		
												View File
												
				@@ -367,6 +367,12 @@ html {

				  display: grid;

				  grid-template-columns: 1fr;

				  gap: 16px;

				  min-width: 0;

				}

				.pathway-graph-sticky {

				  min-width: 0;

				  overflow: hidden;

				}

				.chronology-stream {