fix(ui): update layout in PAT section to avoid overlaps & overflows #331
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
…ion of ingest form
cyclotruc
approved these changes
Jun 28, 2025
There was a problem hiding this comment.
This is awesome!
Exactly what we needed, nothing more, thanks a lot for your contribution @zamora-carlos
filipchristiansen
pushed a commit
that referenced
this pull request
Jun 28, 2025
…331) * fix(ui): prevent overlaps and overflow by updating layout in PAT section of ingest form * feat(ui): replace native checkbox styles with custom design * fix(ui): add missing cursor-pointer styles to inputs in ingest form * fix(ui): apply top margin to example repositories section if token is present
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
In the PAT section, the
Get your tokenlink overlaps the sample-repo buttons. TheNewbadge and the PAT input also overflow due to the use ofposition: absolute. This pull request updates the styles in that section by removing absolute positioning while preserving a similar layout.Closes #328
Changes
flexlayout with CSSgridfor more flexibilityGrid behavior
The grid layout is applied to the
#controlsRowelement, which contains three child components: Pattern type selector, max file size slider, and PAT section.Default:
grid-cols-1)gap-6between itemssmscreens:3:2width ratio (grid-cols-[3fr_2fr])gap-x-10)lgscreens:5:4:4width ratio (grid-cols-[5fr_4fr_4fr])gap-y-0) to avoid unnecessary bottom spacingScreenshots
The images were taken in Google Chrome, but I also verified that the layout looks the same in Safari. I included the UI with the checkbox both checked and unchecked.
Small screens
Medium screens
Large screens