style: position sticky in the DealDetails component #283
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@khanark is attempting to deploy a commit to the Learn Build Teach Team on Vercel. A member of the Team first needs to authorize it. |
jamesqquick
requested changes
Sep 23, 2024
| @@ -11,7 +11,7 @@ interface DealDetailsProps { | |||
| } | |||
| export default function DealDetails({ deal }: DealDetailsProps) { | |||
| return ( | |||
| <div className="text-white"> | |||
| <div className="sticky top-0 pt-2 text-white"> | |||
There was a problem hiding this comment.
Unfortunately, we can't add this directly to the DealDeatils component because it is used on the individual deal page route as well. Could you look to move sticky to the parent container inside of the /deals/add route?
There was a problem hiding this comment.
You'll also need to add items-start class to the containing div as well as a little buffer on the top using top-10
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Changing the position to sticky for the component improves the UX. Whenever the user scrolls to the bottom when filling the form, the information on the right sticks with the process itself, being related to the form.
Screenshot
PR Requirements
Descriptiongives a good representation of the changes madeIssuesection