fix(ui): refine kanna-inspired menu and chat polish#614
Open
StanGirard wants to merge 2 commits intomainfrom
Open
fix(ui): refine kanna-inspired menu and chat polish#614StanGirard wants to merge 2 commits intomainfrom
StanGirard wants to merge 2 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 10 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="web/src/index.css">
<violation number="1" location="web/src/index.css:292">
P2: The new `.kanna-panel` base styles override warning `border-*`/`bg-*` utilities, so reconnect/disconnect banners lose their warning tint.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Comment on lines
292
to
296
| .kanna-panel { | ||
| border: 1px solid var(--color-cc-border); | ||
| border-radius: 14px; | ||
| background: color-mix(in srgb, var(--color-cc-card) 94%, var(--color-cc-bg) 6%); | ||
| } |
There was a problem hiding this comment.
P2: The new .kanna-panel base styles override warning border-*/bg-* utilities, so reconnect/disconnect banners lose their warning tint.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At web/src/index.css, line 292:
<comment>The new `.kanna-panel` base styles override warning `border-*`/`bg-*` utilities, so reconnect/disconnect banners lose their warning tint.</comment>
<file context>
@@ -281,7 +281,18 @@
+ background-size: 18px 18px;
+}
+
+.kanna-panel {
+ border: 1px solid var(--color-cc-border);
+ border-radius: 14px;
</file context>
Suggested change
| .kanna-panel { | |
| border: 1px solid var(--color-cc-border); | |
| border-radius: 14px; | |
| background: color-mix(in srgb, var(--color-cc-card) 94%, var(--color-cc-bg) 6%); | |
| } | |
| .kanna-panel { | |
| border-radius: 14px; | |
| } |
Contributor
Greptile SummaryThis PR applies a second visual polish pass to the Kanna-inspired redesign: it overhauls the colour palette to a cooler blue-grey tone, tightens sidebar density, redesigns the TopBar workspace tabs from a bottom-border indicator to a pill/box style, adds a dot-grain texture to the chat canvas, and bumps the sidebar width from 260 px to 288 px. All changes are UI-only with no backend, WebSocket, or state-management impact.
Confidence Score: 3/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
CSS["index.css\n.kanna-panel (no @layer)\nborder + background shorthand"]
TW["Tailwind @layer utilities\nborder-cc-warning/20\nbg-cc-warning/5"]
CASCADE{"CSS Cascade\nunlayered > @layer utilities"}
BANNER["Warning Banners in ChatView\nCLI-disconnected\nWebSocket-reconnecting"]
RESULT_BAD["⚠️ Warning colour\noverride silently lost"]
RESULT_OK["✅ .kanna-panel inside\n@layer components\nTailwind wins"]
CSS -->|"wins cascade"| CASCADE
TW -->|"loses cascade"| CASCADE
CASCADE -->|"current behaviour"| BANNER
BANNER --> RESULT_BAD
CSS -.->|"fix: wrap in @layer components"| RESULT_OK
Prompt To Fix All With AIThis is a comment left during a code review.
Path: web/src/components/ChatView.tsx
Line: 62
Comment:
**`.kanna-panel` CSS cascade overrides warning-state Tailwind utilities**
`.kanna-panel` is defined **outside any `@layer`** in `index.css`, which in Tailwind v4 means it sits in the "unlayered" scope and has higher cascade priority than any Tailwind utility inside `@layer utilities`. This causes two concrete problems on both warning banners (this line and line 102):
1. `kanna-panel`'s `border: 1px solid var(--color-cc-border)` overrides `border-cc-warning/20` — the warning-tinted border colour is never applied.
2. `kanna-panel`'s `background: color-mix(...)` overrides `bg-cc-warning/5` — the warning background tint is never applied.
As a result, the "CLI disconnected" and "WebSocket reconnecting" banners are visually indistinguishable from any other `kanna-panel` card. The comment at line 316 of `index.css` (`"Wrapped in @layer base so Tailwind utilities can override it"`) shows the team is already aware of this pattern — `.kanna-panel` should follow the same approach if you want Tailwind overrides to win.
**Fix option A — define `.kanna-panel` inside `@layer components`** (Tailwind utilities will then override it):
```css
@layer components {
.kanna-panel {
border: 1px solid var(--color-cc-border);
border-radius: 14px;
background: color-mix(in srgb, var(--color-cc-card) 94%, var(--color-cc-bg) 6%);
}
}
```
**Fix option B — remove the `border` and `background` properties from `.kanna-panel`** and apply them only via Tailwind classes at each call-site (keeping `border-radius` in the class).
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: web/src/components/Sidebar.tsx
Line: 488
Comment:
**Inconsistent app name across the UI**
The sidebar header was shortened to `"Companion"` but `"The Companion"` is still used in at least four other surfaces:
- `web/src/components/LoginPage.tsx` (h1 text + `HomePage.test.tsx` assertions at lines 345, 1156)
- `web/src/components/HomePage.tsx` (hero text + alt attribute)
- `web/src/components/MessageFeed.tsx` (empty-state copy)
- `web/src/components/DockerUpdateDialog.tsx` (two notification strings)
The existing `LoginPage.test.tsx:50` (`getByText("The Companion")`) and `HomePage.test.tsx:345/1156` will keep passing because they query those other components, but a user navigating between the sidebar and the home/login pages will see two different names. Either update all surfaces or revert this one.
How can I resolve this? If you propose a fix, please make it concise.Last reviewed commit: "fix(ui): refine kann..." |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| {/* CLI disconnected / reconnecting / error banner */} | ||
| {showCliBanner && ( | ||
| <div className="px-4 py-2.5 bg-gradient-to-r from-cc-warning/8 to-cc-warning/4 border-b border-cc-warning/15 flex items-center justify-center gap-3 animate-[fadeSlideIn_0.3s_ease-out]"> | ||
| <div className="mx-3.5 mt-2.5 px-3.5 py-2 kanna-panel border-cc-warning/20 bg-cc-warning/5 flex items-center justify-center gap-3 animate-[fadeSlideIn_0.3s_ease-out]"> |
Contributor
There was a problem hiding this comment.
.kanna-panel CSS cascade overrides warning-state Tailwind utilities
.kanna-panel is defined outside any @layer in index.css, which in Tailwind v4 means it sits in the "unlayered" scope and has higher cascade priority than any Tailwind utility inside @layer utilities. This causes two concrete problems on both warning banners (this line and line 102):
kanna-panel'sborder: 1px solid var(--color-cc-border)overridesborder-cc-warning/20— the warning-tinted border colour is never applied.kanna-panel'sbackground: color-mix(...)overridesbg-cc-warning/5— the warning background tint is never applied.
As a result, the "CLI disconnected" and "WebSocket reconnecting" banners are visually indistinguishable from any other kanna-panel card. The comment at line 316 of index.css ("Wrapped in @layer base so Tailwind utilities can override it") shows the team is already aware of this pattern — .kanna-panel should follow the same approach if you want Tailwind overrides to win.
Fix option A — define .kanna-panel inside @layer components (Tailwind utilities will then override it):
@layer components {
.kanna-panel {
border: 1px solid var(--color-cc-border);
border-radius: 14px;
background: color-mix(in srgb, var(--color-cc-card) 94%, var(--color-cc-bg) 6%);
}
}Fix option B — remove the border and background properties from .kanna-panel and apply them only via Tailwind classes at each call-site (keeping border-radius in the class).
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/ChatView.tsx
Line: 62
Comment:
**`.kanna-panel` CSS cascade overrides warning-state Tailwind utilities**
`.kanna-panel` is defined **outside any `@layer`** in `index.css`, which in Tailwind v4 means it sits in the "unlayered" scope and has higher cascade priority than any Tailwind utility inside `@layer utilities`. This causes two concrete problems on both warning banners (this line and line 102):
1. `kanna-panel`'s `border: 1px solid var(--color-cc-border)` overrides `border-cc-warning/20` — the warning-tinted border colour is never applied.
2. `kanna-panel`'s `background: color-mix(...)` overrides `bg-cc-warning/5` — the warning background tint is never applied.
As a result, the "CLI disconnected" and "WebSocket reconnecting" banners are visually indistinguishable from any other `kanna-panel` card. The comment at line 316 of `index.css` (`"Wrapped in @layer base so Tailwind utilities can override it"`) shows the team is already aware of this pattern — `.kanna-panel` should follow the same approach if you want Tailwind overrides to win.
**Fix option A — define `.kanna-panel` inside `@layer components`** (Tailwind utilities will then override it):
```css
@layer components {
.kanna-panel {
border: 1px solid var(--color-cc-border);
border-radius: 14px;
background: color-mix(in srgb, var(--color-cc-card) 94%, var(--color-cc-bg) 6%);
}
}
```
**Fix option B — remove the `border` and `background` properties from `.kanna-panel`** and apply them only via Tailwind classes at each call-site (keeping `border-radius` in the class).
How can I resolve this? If you propose a fix, please make it concise.
Contributor
Author
|
Addressed the review feedback in commit 3aaf392:\n- wrapped |
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
2 participants
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
Why
Testing
cd web && bun run typecheckcd web && bun run test -- src/components/Sidebar.test.tsx src/components/TopBar.test.tsx src/components/ChatView.test.tsx src/components/MessageBubble.test.tsx src/components/MessageFeed.test.tsx src/components/SessionItem.test.tsx src/components/ProjectGroup.test.tsxReview provenance