Repository navigation
fix: improve visual separation between prompt and task list - #20427
Conversation
Add a border separator and increased padding to clearly distinguish the 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 <[email protected]>
|
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-6 pt-6 border-t border-border flex justify-between" |
There was a problem hiding this comment.
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.
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.
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.
Added pt-8 pb-8.
PS. I'm not a tailwindcss wizard, so I'm definitely open to alternative ideas.
mtojek
changed the title
|
@aslilac feel free to retake a look. Thanks! |
| /> | ||
| {aiTemplatesQuery.isSuccess && ( | ||
| <section> | ||
| <section className="pt-8 pb-8"> |
There was a problem hiding this comment.
| <section className="pt-8 pb-8"> | |
| <section className="py-8"> |
jsyk, there are shorthands for "padding along the y-axis on both ends" and "padding along the x-axis on both ends"
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 with Claude Code