fix(demo): make demo pages responsive and mobile friendly - #130
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
📋 Review Summary
This pull request improves responsive styling across the demo application, fixing layout overflow and viewport clipping on mobile viewports. Key enhancements include flex-wrapping controls in the expressive demo component, setting box-sizing and overflow safeguards, providing responsive snackbar positioning to prevent overlap with the bottom navigation bar on mobile, and adding viewport media queries for date and time picker demo pages.
🔍 General Feedback
- The responsive styling improvements significantly enhance the demo experience on small screens and mobile viewports.
- Introducing
--md-snackbar-bottom: 96px;on narrow viewports cleanly prevents the snackbar from occluding or overlapping with<md-nav-bar>.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 26,030 |
| Input Tokens (cached) | 346,224 (⚡ 93.0% cached) |
| Thinking / Reasoning Tokens | 53 |
| Output Tokens | 166 |
| Total Session Tokens | 372,473 |
| Cost (uncached input) | $0.0195 |
| Cost (cached input) | $0.0260 |
| Cost (thinking / reasoning) | $0.0002 |
| Cost (response output) | $0.0006 |
| Estimated Total Cost | $0.0463 |
Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
material | 5eec742 | Commit Preview URL Branch Preview URL |
Sep 16 2026, 08:19 PM |
1 participant
Description
Fixes layout overflow and elements getting clipped on mobile devices across the demo pages.
Key Changes
.layout-container(width: 100%; min-width: 0;),.content-container(flex: 1; min-width: 0; width: 100%;), and constrainedmd-carousel(max-width: 100%; min-width: 0;) so flex items properly shrink on mobile viewports.box-sizing: border-boxto prevent container padding from overflowing the 100% viewport width.<md-search>in.search-containerwith 1rem horizontal padding and max-width 1200px to align with.maincontent.overflow-wrap: break-wordto ensure long URLs wrap properly on narrow screens..flexw(flex-wrap: wrap) on the switch/checkbox/radio/snack/dialog controls and icon button cluster inexpressive-component.js.max-width: 100%tomd-card.--md-snackbar-bottomCSS variable support tomd-snackbar, positioning it at96pxon compact screens (< 600px) to clear the bottom navigation bar.16px 12pxon< 600px) todate-picker-demo.htmlandtime-picker-demo.htmlso 328px pickers fit on 360px–375px mobile viewports without horizontal scrollbars.Verification
Verified on headless Chromium across mobile (320px, 360px, 375px, 412px), tablet (768px), and desktop (1200px) viewports with zero horizontal scrolling.