-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New UI ✨ #131
New UI ✨ #131
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
<main className="ss-h-full ss-w-full ss-overflow-auto ss-m-auto"> | ||
<div | ||
className={cx( | ||
'ss-flex ss-flex-col ss-flex-grow ss-m-auto ss-max-w-5xl ss-mb-24 ss-transition-all', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ss-mb-24
Ensures the last piece of content doesnt get clipped as part of the overflow.
Creating the margin pushes the div
up
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is looking great!! Just one comment about readability.
!isOpen && 'ss-w-2/3', | ||
isOpen && 'ss-w-1/2' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this would be more readable as a ternary expression.
isOpen ? `ss-w-1/2' : 'ss-w-2/3'
'ss-hidden ss-absolute lg:ss-block hover:ss-text-action ss-ml-1 ss-p-1 ss-transition-all ss-top-3 ss-right-3', | ||
!isOpen && 'ss--rotate-90', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same comment as above!
Preview
Summary
This PR does the following
Chevron
intoBottom
icon per design specmax-width
of main contentWhy
Quick explanation for the last one, when talking to @benjamin-gage we were discussing that the main reason for full-screen in the first place was so that someone can have more pleasant usage with
LiveComponent
.Since now it links to Codesandbox, a fully equipped online IDE. Having full screen for reading content would likely just make the documentation harder to read.