fix(demo): make the page responsive and follow the theme control - #59
Conversation
Two problems, both in the demo's own chrome. styles.css had no @media query at all. The sidebar was a hard 240px that could not shrink, so on a 375px phone the editor got ~135px and the editor's own Save/Cancel controls were off-screen entirely. The sidebar now overlays the editor below 768px with a dismissable backdrop, and App.tsx starts it closed at those widths via matchMedia. The Light/Dark control drove options.theme but the page around it was hardcoded: html/body light, topbar and sidebar dark, preview card white. Switching to dark produced a dark editor in light chrome, and switching to light still left a permanently dark sidebar. All chrome colours now come from CSS custom properties keyed off a data-theme attribute that App.tsx sets from the same theme state the editor gets. Verified at 375x812 and 1280x800.
|
@sidgaikwad is attempting to deploy a commit to the Unlayer Team on Vercel. A member of the Team first needs to authorize it. |
|
In landscape mobile view, the saved preview grows taller than the viewport and its Close/Download controls disappear above the screen. Please constrain the preview height and keep its header accessible. |
The preview panel is anchored to the bottom of the screen with no height bound, so an image taller than the viewport grew upward and took the header with it. In landscape on a phone (667x375) the panel was 477px tall and its top sat at -110px, putting Download and Close off-screen with no way to dismiss it. Bound the panel to the viewport, make it a flex column, pin the header so it never shrinks, and let the image take the remaining space with object-fit: contain so it scales instead of overflowing. dvh with a vh fallback, so mobile browser chrome is accounted for. Verified at 667x375, 667x300, 375x812 and 1280x800.
|
Good catch — reproduced and fixed in Reproduced at 667×375 (iPhone SE landscape, which is under the 768px breakpoint so the full-width panel rules apply): The panel is anchored Fix: bound the panel to the viewport and let the image absorb the difference.
Verified across four viewports, measuring the real geometry rather than eyeballing:
Close and Download were individually confirmed inside the viewport in the landscape cases. On desktop the image still measures an aspect ratio of exactly CSS-only change, +19 lines; demo typecheck, build and Prettier all clean. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
3 participants
Fixes #39.
1. The demo was not responsive
styles.csscontained no@mediaquery at all..sidebarwas a hardwidth: 240px; flex-shrink: 0, so on a 375px phone the editor got ~135px — and becauseuseState(true)opened the sidebar by default, the first paint on mobile was the broken one.Before (375×812): sidebar occupied ~64% of the viewport, the editor was a sliver, and the editor's own Save/Cancel controls were off-screen entirely.
After (same viewport): sidebar starts closed, editor gets the full 375px, tool rail and Save/Cancel all reachable.
Below 768px the sidebar now overlays the editor (
position: absolute,min(280px, 85vw)) with a dismissable backdrop, rather than squeezing it.App.tsxstarts it closed at those widths viamatchMedia, keyed to the same breakpoint.Measured in the running demo:
falsetrueabsolute(overlay)static(in flow)display: noneDesktop layout is unchanged.
2. The theme control didn't theme the page
The Light/Dark selector drove
options.theme, but the surrounding page was hardcoded —html/bodylight,.topbarand.sidebardark,.previewwhite. Switching to dark gave a dark editor inside light chrome; switching to light still left a permanently dark sidebar. Since the demo is what people look at to judge whether theming works, it undersold it.All chrome colours now come from CSS custom properties keyed off a
data-themeattribute thatApp.tsxsets from the samethemestate the editor receives:Verification
Ran against the live demo at both viewports;
tsc --noEmitandvite buildclean; Prettier clean.