Update Settings Layout- Remove y spacing and update break for Separator #165
Conversation
This file contains hidden or 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
The space-y was not necessary on smaller screens since we are using a Separator component. I also updated the separator to hide on lg and above since the container element changes to flex row at that breakpoint.
There was a problem hiding this comment.
Pull Request Overview
This PR refines the Settings layout by removing redundant vertical spacing on smaller screens and adjusting when the Separator is hidden to align with the switch to a horizontal layout at larger breakpoints.
- Removed default
space-yutilities on the main container and rely on the Separator for spacing. - Changed the Separator’s hide breakpoint from
md:hiddentolg:hiddento match the flex-row layout atlg.
Comments suppressed due to low confidence (1)
resources/js/layouts/settings/Layout.vue:49
- [nitpick] Previously the container used
space-y-8(2rem) for vertical gaps butmy-6here is 1.5rem. Confirm ifmy-6provides the intended spacing or ifmy-8is needed for consistency.
<Separator class="my-6 lg:hidden" />
Comment on lines
32
to
34
| <div class="flex flex-col lg:flex-row lg:space-y-0 lg:space-x-12"> | ||
| <aside class="w-full max-w-xl lg:w-48"> | ||
| <nav class="flex flex-col space-y-1 space-x-0"> |
There was a problem hiding this comment.
[nitpick] Consider using Tailwind's gap utilities (e.g., gap-y-6 lg:gap-x-12) instead of separate space- classes and an explicit Separator for spacing consistency and cleaner markup.
Suggested change
| <div class="flex flex-col lg:flex-row lg:space-y-0 lg:space-x-12"> | |
| <aside class="w-full max-w-xl lg:w-48"> | |
| <nav class="flex flex-col space-y-1 space-x-0"> | |
| <div class="flex flex-col lg:flex-row gap-y-6 lg:gap-x-12"> | |
| <aside class="w-full max-w-xl lg:w-48"> | |
| <nav class="flex flex-col gap-y-1"> |
Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
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.
The space-y was not necessary on smaller screens since we are using a Separator component. I also updated the separator to hide on lg and above since the container element changes to flex row at that breakpoint.
Before
After Updates