fix(ui): give EmptyState a bounded outline instead of floating text - #87
Merged
Conversation
On a QHD screen the content area is enormous, so two lines of muted text centred in it read as a rendering failure rather than as an empty list — scanning from the left you see nothing, then stray grey text somewhere near the middle. It is now a dashed-outline panel spanning the content width, with an icon chip and a title in normal text (the hint stays muted). The eye gets something that obviously belongs there. Optional icon and action props are added, so a page with an obvious next step can put it in the placeholder. Existing props are unchanged, so all 17 call sites keep working untouched.
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the shared EmptyState UI component so empty-list views read as an intentional placeholder on wide screens, rather than “floating” muted text that can resemble a rendering failure.
Changes:
- Redesigned
EmptyStateinto a bounded dashed-outline panel with a default icon chip and clearer title styling. - Expanded
EmptyStateprops to optionally accept a customiconand anactionslot (while keeping existing call sites compatible). - Regenerated
web/distassets to reflect the UI change.
Reviewed changes
Copilot reviewed 1 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| web/src/components/ui.tsx | Reworks EmptyState markup/styles and adds optional icon/action props with a default Lucide icon. |
| web/dist/index.html | Updates hashed asset references after rebuilding the frontend bundle. |
| web/dist/assets/index-yRfiesog.css | Removes the previous hashed CSS asset from dist. |
| web/dist/assets/index-B-n6FhZu.css | Adds the new hashed CSS asset containing the updated Tailwind output. |
| web/dist/assets/CodeEditor-DLkC4cLO.js | Updates the import to the newly hashed main bundle filename after rebuild. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
Summary
On a QHD screen the empty states read as a rendering failure, not as an empty
list: two lines of muted text centred in a very large content area, with nothing
framing them. Scanning from the left you see blank space, then stray grey text
somewhere near the middle.
EmptyStateis now a dashed-outline panel spanning the content width, with an iconchip and the title in normal text (the hint stays muted).
Before / after on a 2560-wide viewport (Alerts → Webhooks):
Type of change
Checklist
go test -short ./...andgo vet ./...passgofmtgate is clean — N/A in effect (no Go changes) but verifiedcd web && npx tsc --noEmit)web/distdocs/and added aCHANGELOG.mdentry — N/A (presentation-only；no behaviour or API change, nothing for a user to act on)
Notes for reviewers
One component, 17 call sites, no signature break.
iconandactionare addedas optional props, so every existing
<EmptyState title hint />keeps workinguntouched —
tscover the whole app confirms it. Theactionslot is there so apage with an obvious next step can put the button inside the placeholder later;
nothing uses it yet.
On tests: this is pure presentation — there's no logic to assert, and the repo
has no component-rendering harness (Vitest runs in node, no jsdom/RTL). Adding one
just for this felt disproportionate. What I did instead was verify it the way the
bug was reported: rendered at 2560×1440 in a real browser and compared
screenshots before and after. If you'd like a rendering harness set up, say so and
I'll do it as its own piece of work rather than smuggling it in here.
Why a dashed outline rather than a solid card: a solid
cardreads as contentthat failed to load; the dashed border is the conventional "nothing here yet"
affordance and stays visually distinct from real cards on the same page.