Midnight Sheet
Full-height mobile sheet with a drag handle.
Live preview · real tokens, not a screenshot
When to pick it
Designed phone-first rather than shrunk down. It takes the full viewport, puts the composer above the keyboard, and behaves like a native sheet — because on a phone a floating 380px card is just a small, awkward app.
How it is built
Uses 100dvh rather than 100vh so the sheet does not jump when mobile browser chrome collapses, and env(safe-area-inset-bottom) so the composer clears the home indicator.
Accessibility
Body scroll is locked behind the sheet. The drag handle is decorative and the real close control is a labelled button.
Every design in this gallery states that it is an AI assistant at the start of the conversation and honours prefers-reduced-motion. Neither is configurable, because both are obligations rather than preferences.
Good fit for
- Mobile-first sites
- Ecommerce
- Apps
- High mobile traffic
Source code
Take Midnight Sheet anywhere.
You can deploy this design through ChatBrace on any plan, including the free trial — that never changes. A paid plan also gets you the standalone HTML, CSS and JavaScript for it, to drop into a project of your own with or without ChatBrace behind it.
Seven designs ship their source to everyone, no account needed.
Put it on your site
before you finish your coffee.
A hundred free messages, no card, and a playground to try it in before you touch a single line of your own markup.