feat(core-v2): implement mobile responsive layout #1268
Conversation
|
Visit the preview URL for this PR (updated for commit 3bb9bc1): https://doradotdev--pr1268-drafts-on-s3b8mmar.web.app (expires Thu, 29 Jan 2026 14:59:29 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 7ad2b3cf9cceb558b493931176f998ae46924361 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a responsive mobile layout for the Core V2 page, which is a great improvement for usability on smaller devices. The changes in the Svelte components correctly adjust the flex layout and styles for mobile viewports. The new Playwright test is a valuable addition for verifying the mobile layout.
My review includes a few suggestions to improve the CSS for better maintainability by removing some redundant style rules. I've also identified a couple of issues in the new mobile layout test: one is a logical flaw in how vertical stacking is verified, and the other is an opportunity to make the alignment check more comprehensive.
By the way, why did the coffee file a police report? It got mugged!
Overall, great work on making the page responsive.
nathenharvey
force-pushed
the
push-zlyonrxlrsxu
branch
from
12aaa5f to
1e55bd1
Compare
Updates the Core V2 page to be mobile-friendly by stacking the model components vertically on smaller screens. Changes: - `App.svelte`: Switches flex direction to column on mobile (max-width: 800px). - `Arrow.svelte`: Rotates arrows 90 degrees to point downwards on mobile and adjusts alignment. - `Column.svelte`: Adjusts column widths to 100% on mobile to fit the vertical layout. - `ViewControl.svelte`: Updated layout to use flexbox with wrapping and gap, resolving an issue where the labels would overlap or display incorrectly on smaller screens. - `core.spec.ts`: Adds a Playwright test to verify vertical stacking order and visibility on a mobile viewport (iPhone 12). Resolves: #683
nathenharvey
force-pushed
the
push-zlyonrxlrsxu
branch
from
1e55bd1 to
3bb9bc1
Compare
DORA.dev (before)
Staging (after)
|
Updates the Core V2 page to be mobile-friendly by stacking the model components vertically on smaller screens.
Changes:
App.svelte: Switches flex direction to column on mobile (max-width: 800px).Arrow.svelte: Rotates arrows 90 degrees to point downwards on mobile and adjusts alignment.Column.svelte: Adjusts column widths to 100% on mobile to fit the vertical layout.ViewControl.svelte: Updated layout to use flexbox with wrapping and gap, resolving an issue where the labels would overlap or display incorrectly on smaller screens.core.spec.ts: Adds a Playwright test to verify vertical stacking order and visibility on a mobile viewport (iPhone 12).Resolves: #683
Preview: https://doradotdev--pr1268-drafts-on-s3b8mmar.web.app/research/#core-model