Moved Cancel and Save buttons positions to bottom #378
Conversation
WalkthroughThe changes made in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant GuideTemplate
User->>GuideTemplate: View Guide
GuideTemplate->>User: Display Guide with Option Buttons
User->>GuideTemplate: Interact with Option Buttons
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
frontend/src/templates/GuideTemplate/GuideTemplate.module.scss (1)
48-48: Yo dawg, I heard you like robust layouts!While the margin works, here's a more bulletproof way to stick those buttons to the bottom, no matter the content height. It's like mom's spaghetti - it never fails!
Consider this flex layout approach:
.container { + display: flex; + flex-direction: column; + min-height: 100%; .popup { + display: flex; + flex-direction: column; + flex: 1; } .content { + flex: 1; } .optionButtons { display: flex; justify-content: flex-end; - margin-top: 4rem; gap: 1rem; + margin-top: auto; } }This way, the buttons will always stick to the bottom, regardless of the content height. No more sweaty palms worrying about spacing!
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
frontend/src/templates/GuideTemplate/GuideTemplate.module.scss(1 hunks)
🔇 Additional comments (1)
frontend/src/templates/GuideTemplate/GuideTemplate.module.scss (1)
48-48: Yo, the margin change looks good for now!
The increased margin-top pushes those buttons down like gravity, just what we needed. It's a simple fix that gets the job done.
|
Can you please send a screenshot too? |
|
Sure @gorkem-bwl, after the change it looks like this. 
|
|
All the gaps here should be the same. Please fix the bottom gap and we're good to go! 
|
|
Hey @gorkem-bwl, fixed the bottom gap! (I assume this is what you meant) 
|
Please move the Cancel/Save buttons up to the purple line and we're done here! 
|
|
Sure, this is how it looks now. 
@gorkem-bwl - Next time let's decide the final UI and then will do the change rather than hopping frequently |
You are right - shouldn't have happened. Thanks for the heads up. |
|
It seems that this issue is already solved in #306 However, thank you for your time |
|
Cool, thanks for letting me know. |
Describe your changes
Moved Cancel and Save buttons positions to bottom in Create Hint Page while onboarding
Issue number
Fixes the issue #370
Please ensure all items are checked off before requesting a review: