- Notifications
You must be signed in to change notification settings - Fork5.5k
Update: Improved hover styles to Watch Page#4677
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:main
Are you sure you want to change the base?
Uh oh!
There was an error while loading.Please reload this page.
Conversation
facebook-github-bot commentedJul 14, 2025
Thank you for your pull request and welcome to our community. Action RequiredIn order to mergeany pull request (code, docs, etc.), werequire contributors to sign ourContributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign athttps://code.facebook.com/cla.If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, thepull request will be tagged with If you have received this in error or have any questions, please contact us atcla@meta.com. Thanks! |
✅ Deploy Preview forreact-native ready!
To edit notification comments on pull requests, go to yourNetlify project configuration. |
facebook-github-bot commentedJul 14, 2025
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
Simek left a comment
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.
Thanks for the changes, this looks good, just small suggestions.
Would be also nice to switch to column layout a bit earlier (matching breakpoint which is responsible for hiding top bar content -max-width: 996px).
| .videoContainer { | ||
| border:1px solidvar(--home-border); | ||
| /*border: 1px solid var(--home-border); */ |
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.
Let's retain the border for the container.
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.
Sure, no problem. I'll remove it for a cleaner look but totally okay keeping the border if you think it's important for layout clarity.
| flex-direction: column; | ||
| gap:1rem; | ||
| max-width:400px; | ||
| max-width:500px; |
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.
Ideally, we should also set properaspect-ratio to ensure that there are no black bars when manipulating the viewport.
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.
Makes sense. I’ll experiment with a couple ofaspect-ratio settings and test how it behaves on various viewports will push an update soon.
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.
Thanks! 👍
Simek commentedOct 8, 2025
Hey@tusharpardhe18, are you still interested in working on those improvements? |
Description
Enhanced the Watch section UI and styling:
Updated the call-to-action message with a direct link to the latest React Native talks.
Improved responsiveness by modifying the
max-widthandheightof.videoand.videoContainer.Added hover and light theme-specific styles to improve visual feedback and accessibility.
These changes improve user experience and maintain visual consistency across themes.
How to Test