- Notifications
You must be signed in to change notification settings - Fork1.1k
fix: improve visual separation between prompt and task list#20427
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
Uh oh!
There was an error while loading.Please reload this page.
Conversation
Add a border separator and increased padding to clearly distinguishthe task prompt form from the filter controls (tabs and user dropdown)below it. This resolves confusion about which section the filters belong to.Fixes#20423🤖 Generated with [Claude Code](https://claude.com/claude-code)Co-Authored-By: Claude <noreply@anthropic.com>
github-actionsbot commentedOct 22, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
All contributors have signed the CLA ✍️ ✅ |
I have read the CLA Document and I hereby sign the CLA |
@bartekgatzcoder could you please add some screenshots to the description? |
| {permissions.viewDeploymentConfig&&( | ||
| <section | ||
| className="mt-6 flex justify-between" | ||
| className="mt-6pt-6 border-t border-borderflex justify-between" |
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.
The border is not doing anything, and I don't think having a border would improve anything visually. If we decide to increase the spacing between the two sections, we should only use padding for that and not both margin and padding.
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.
It does look better, tho. Please see the screenshots.
This is dev.coder.com
And this is from the workspace the Claude worked in on this ticket:
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.
we should only use padding for that and not both margin and padding.
big agree. the extra spacing does look a little better but bruno is also still correct about the border classes not doing anything here.
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.
Addedpt-8 pb-8.
PS. I'm not a tailwindcss wizard, so I'm definitely open to alternative ideas.
@aslilac feel free to retake a look. Thanks! |
| /> | ||
| {aiTemplatesQuery.isSuccess&&( | ||
| <section> | ||
| <sectionclassName="pt-8 pb-8"> |
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.
| <sectionclassName="pt-8 pb-8"> | |
| <sectionclassName="py-8"> |
jsyk, there are shorthands for "padding along the y-axis on both ends" and "padding along the x-axis on both ends"
1b6556c intomainUh oh!
There was an error while loading.Please reload this page.
Summary
This PR improves the visual separation between the task prompt form and the task list by adding a border separator and increased padding to the controls section.
Changes
border-t border-borderto create a faint horizontal line separatorpt-6to increase spacing above the filter controlsThis makes it clear that the filter widgets (tabs for "All tasks"/"Waiting for input" and the user combobox) belong to the task list below, not the prompt form above.
Before/After
The issue screenshot showed the filters appearing visually closer to the prompt than to the task list they actually control. This change adds the visual separator as suggested in the mockup.
Testing
Fixes#20423
🤖 Generated withClaude Code