Closed rortan134 closed 1 month ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
zenstack-new-site | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Aug 11, 2024 2:27pm |
The changes focus on enhancing the responsive design of the .docItemCol
class in the styles.module.css
file. A hardcoded max-width
has been replaced with a flexible CSS variable, improving maintainability and adaptability across different screen sizes. Additionally, the introduction of margin: 0 auto;
allows for better horizontal centering of the column, contributing to an overall improved layout.
Files | Change Summary |
---|---|
src/theme/DocItem/Layout/... |
Updated .docItemCol class to use a flexible CSS variable for max-width and added centering styles. |
sequenceDiagram
participant User
participant Browser
participant CSS
User->>Browser: Resizes window
Browser->>CSS: Applies media query for widths > 997px
CSS->>Browser: Sets max-width to --readableMaxWidth
CSS->>Browser: Centers .docItemCol with margin: 0 auto;
Browser->>User: Displays updated layout
src/theme/DocItem/Layout/styles.module.css (2)
`9-9`: **LGTM!** Using a CSS variable for `max-width` enhances flexibility and maintainability. The `!important` flag ensures the style is applied as intended. --- `10-10`: **LGTM!** Adding `margin: 0 auto;` effectively centers the `.docItemCol` element horizontally, enhancing the layout's aesthetics.
This is what Stripe uses btw
Hi @rortan134 , thanks for the PR and sorry for the delay.
I feel it looks better on my MBP (upper one is with your change).
On a 4K display (browser scaled to 120%), it looks a bit too narrow to me:
How do you feel about it?
Before
After
Summary by CodeRabbit