Skip to content

fix(ui): refine kanna-inspired menu and chat polish #614

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
StanGirard wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(ui): refine kanna-inspired menu and chat polish #614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cf2268
fix(ui): refine kanna-inspired menu and chat polish
Codex-Agent Mar 21, 2026
3aaf392
fix(ui): address greptile cascade and naming feedback
Codex-Agent Mar 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ export default function App() {
className={`
fixed inset-y-0 left-0 md:relative md:inset-auto z-40 md:z-auto
h-full shrink-0 transition-all duration-200 pt-safe md:pt-0
${sidebarOpen ? "w-full md:w-[260px] translate-x-0" : "w-0 -translate-x-full md:w-0 md:-translate-x-full"}
${sidebarOpen ? "w-full md:w-[288px] translate-x-0" : "w-0 -translate-x-full md:w-0 md:-translate-x-full"}
overflow-hidden
`}
>
Expand Down
10 changes: 5 additions & 5 deletions web/src/components/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@ export function ChatView({ sessionId }: { sessionId: string }) {
const showCliBanner = connStatus === "connected" && !cliConnected;

return (
<div className="flex flex-col h-full min-h-0">
<div className="flex flex-col h-full min-h-0 bg-cc-bg chat-grain">
{/* 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]">
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Mar 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 .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):

@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.

{reconnectError ? (
<>
<span className="w-1.5 h-1.5 rounded-full bg-cc-error shrink-0" />
Expand Down Expand Up @@ -99,7 +99,7 @@ export function ChatView({ sessionId }: { sessionId: string }) {

{/* WebSocket disconnected banner */}
{connStatus === "disconnected" && (
<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-2 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-2 animate-[fadeSlideIn_0.3s_ease-out]">
<span className="w-3 h-3 rounded-full border-2 border-cc-warning/30 border-t-cc-warning animate-spin" />
<span className="text-xs text-cc-warning font-medium">
Reconnecting to session...
Expand All @@ -112,7 +112,7 @@ export function ChatView({ sessionId }: { sessionId: string }) {

{/* AI auto-resolved notification (most recent only) */}
{aiResolved && aiResolved.length > 0 && (
<div className="shrink-0 border-t border-cc-border bg-cc-card">
<div className="shrink-0 border-t border-cc-border bg-cc-card/80 backdrop-blur-sm">
<AiValidationBadge
entry={aiResolved[aiResolved.length - 1]}
onDismiss={() => clearAiResolvedPermissions(sessionId)}
Expand All @@ -122,7 +122,7 @@ export function ChatView({ sessionId }: { sessionId: string }) {

{/* Permission banners */}
{perms.length > 0 && (
<div className="shrink-0 max-h-[60dvh] overflow-y-auto border-t border-cc-border bg-cc-card">
<div className="shrink-0 max-h-[60dvh] overflow-y-auto border-t border-cc-border bg-cc-card/90 backdrop-blur-sm">
{perms.map((p) => (
<PermissionBanner key={p.request_id} permission={p} sessionId={sessionId} />
))}
Expand Down
14 changes: 7 additions & 7 deletions web/src/components/Composer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
const canSend = text.trim().length > 0 && isConnected;

return (
<div className="shrink-0 px-0 sm:px-6 pt-0 sm:pt-3 pb-5 sm:pb-4 bg-cc-input-bg sm:bg-transparent">
<div className="shrink-0 px-0 sm:px-6 pt-0 sm:pt-3 pb-5 sm:pb-4 bg-cc-input-bg/80 sm:bg-transparent backdrop-blur-sm">
<div className="max-w-3xl mx-auto">
{/* Image thumbnails */}
{images.length > 0 && (
Expand Down Expand Up @@ -414,7 +414,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
)}

{/* Input container: flat separator on mobile, card on desktop */}
<div className={`relative overflow-visible transition-all duration-200 border-t border-cc-separator sm:border sm:border-cc-border sm:bg-cc-input-bg/95 sm:rounded-[16px] sm:backdrop-blur-sm composer-card ${
<div className={`relative overflow-visible transition-all duration-200 border-t border-cc-separator sm:border sm:border-cc-border sm:bg-cc-input-bg/95 sm:rounded-[14px] sm:backdrop-blur-sm composer-card ${
isPlan
? "sm:border-cc-primary/40 sm:shadow-[0_10px_30px_rgba(217,119,87,0.08)]"
: "sm:focus-within:border-cc-primary/25"
Expand All @@ -423,7 +423,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
{slashMenuOpen && filteredCommands.length > 0 && (
<div
ref={menuRef}
className="absolute left-2 right-2 bottom-full mb-1 max-h-[240px] overflow-y-auto bg-cc-card border border-cc-border rounded-[10px] shadow-lg z-20 py-1"
className="absolute left-2 right-2 bottom-full mb-1 max-h-[240px] overflow-y-auto bg-cc-card border border-cc-border rounded-[12px] shadow-xl z-20 py-1"
>
{filteredCommands.map((cmd, i) => (
<button
Expand Down Expand Up @@ -468,7 +468,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
/>

{savePromptOpen && (
<div className="absolute left-2 right-2 bottom-full mb-1 bg-cc-card border border-cc-border rounded-[10px] shadow-lg z-20 p-3 space-y-2">
<div className="absolute left-2 right-2 bottom-full mb-1 bg-cc-card border border-cc-border rounded-[12px] shadow-xl z-20 p-3 space-y-2">
<div className="text-xs font-semibold text-cc-fg">Save prompt</div>
<input
value={savePromptName}
Expand Down Expand Up @@ -611,7 +611,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
</div>

{/* Textarea row */}
<div className="px-3 sm:px-3 pt-1 sm:pt-2.5">
<div className="px-3 sm:px-3 pt-1.5 sm:pt-2.5">
<textarea
ref={textareaRef}
value={text}
Expand All @@ -626,7 +626,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
: "Waiting for CLI connection..."}
disabled={!isConnected}
rows={1}
className="w-full px-1 py-1.5 text-base sm:text-sm bg-transparent resize-none outline-none text-cc-fg font-sans-ui placeholder:text-cc-muted disabled:opacity-50 overflow-y-auto"
className="w-full px-1 py-1.5 text-base sm:text-sm bg-transparent resize-none outline-none text-cc-fg font-sans-ui placeholder:text-cc-muted disabled:opacity-50 overflow-y-auto leading-relaxed"
style={{ minHeight: "36px", maxHeight: "200px" }}
/>
</div>
Expand Down Expand Up @@ -663,7 +663,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
</div>

{/* Desktop action bar: + bookmark mode spacer model send (hidden on mobile) */}
<div className="hidden sm:flex items-center gap-1.5 px-2.5 pb-2">
<div className="hidden sm:flex items-center gap-1.5 px-2.5 pb-2.5 border-t border-cc-border/70">
{/* + button (image upload) */}
<button
onClick={() => fileInputRef.current?.click()}
Expand Down
20 changes: 10 additions & 10 deletions web/src/components/MessageBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { ToolBlock, getToolIcon, getToolLabel, getPreview, ToolIcon } from "./To
export function MessageBubble({ message }: { message: ChatMessage }) {
if (message.role === "system") {
return (
<div className="flex items-center gap-3 py-1 min-w-0">
<div className="flex items-center gap-3 py-2 min-w-0">
<div className="shrink-0 flex-1 h-px bg-cc-border" />
<span className="text-[11px] text-cc-muted italic font-mono-code px-1 min-w-0 break-words text-center">
<span className="text-[11px] text-cc-muted italic font-mono-code px-2 min-w-0 break-words text-center tracking-wide">
{message.content}
</span>
<div className="shrink-0 flex-1 h-px bg-cc-border" />
Expand All @@ -20,7 +20,7 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
if (message.role === "user") {
return (
<div className="flex justify-end animate-[userSlideIn_0.3s_ease-out]">
<div className="max-w-[85%] sm:max-w-[80%] px-3.5 sm:px-4 py-2.5 rounded-[16px] rounded-br-[6px] user-bubble-gradient text-cc-fg shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
<div className="max-w-[85%] sm:max-w-[76%] px-3.5 sm:px-4 py-2.5 rounded-[14px] rounded-br-[5px] user-bubble-gradient text-cc-fg border border-cc-border/50 shadow-[0_4px_16px_rgba(20,25,36,0.08)]">
{message.images && message.images.length > 0 && (
<div className="flex gap-2 flex-wrap mb-2">
{message.images.map((img, i) => (
Expand All @@ -43,7 +43,7 @@ export function MessageBubble({ message }: { message: ChatMessage }) {

// Assistant message
return (
<div className="animate-[fadeSlideIn_0.3s_ease-out]">
<div className="animate-[fadeSlideIn_0.3s_ease-out] py-0.5">
<AssistantMessage message={message} />
</div>
);
Expand Down Expand Up @@ -144,8 +144,8 @@ function AssistantAvatar() {
return (
<div className="w-6 h-6 rounded-full avatar-ring flex items-center justify-center shrink-0 mt-0.5">
<div className="avatar-inner w-full h-full rounded-full flex items-center justify-center">
<svg viewBox="0 0 16 16" fill="currentColor" className="w-3 h-3 text-cc-primary">
<path d="M8 2L10.5 6.5L15 8L10.5 9.5L8 14L5.5 9.5L1 8L5.5 6.5L8 2Z" />
<svg viewBox="0 0 16 16" fill="currentColor" className="w-3.5 h-3.5 text-cc-primary">
<path d="M8 2.2l1.9 3.8L14 7l-3 2.9.7 4.1L8 12.2 4.3 14l.7-4.1L2 7l4.1-1L8 2.2z" />
</svg>
</div>
</div>
Expand All @@ -154,7 +154,7 @@ function AssistantAvatar() {

function MarkdownContent({ text, showCursor = false }: { text: string; showCursor?: boolean }) {
return (
<div className="markdown-body text-[14px] sm:text-[15px] text-cc-fg leading-relaxed overflow-hidden">
<div className="markdown-body text-[14px] sm:text-[15px] text-cc-fg/95 leading-relaxed overflow-hidden">
<Markdown
remarkPlugins={[remarkGfm]}
components={{
Expand Down Expand Up @@ -391,7 +391,7 @@ function ThinkingBlock({ text }: { text: string }) {

return (
<div>
<div className="markdown-body text-[13px] text-cc-fg/40 leading-relaxed italic">
<div className="markdown-body text-[13px] text-cc-fg/55 leading-relaxed italic">
<Markdown
remarkPlugins={[remarkGfm]}
components={{
Expand All @@ -400,7 +400,7 @@ function ThinkingBlock({ text }: { text: string }) {
ol: ({ children }) => <ol className="list-decimal pl-4 mb-2 space-y-0.5">{children}</ol>,
li: ({ children }) => <li>{children}</li>,
code: ({ children }) => (
<code className="px-1 py-0.5 rounded bg-cc-fg/[0.03] text-cc-fg/40 font-mono-code text-[12px] not-italic">
<code className="px-1 py-0.5 rounded bg-cc-fg/[0.03] text-cc-fg/55 font-mono-code text-[12px] not-italic">
{children}
</code>
),
Expand All @@ -412,7 +412,7 @@ function ThinkingBlock({ text }: { text: string }) {
{isLong && !expanded && (
<button
onClick={() => setExpanded(true)}
className="text-[11px] text-cc-muted/40 hover:text-cc-muted/70 cursor-pointer transition-colors"
className="text-[11px] text-cc-muted/60 hover:text-cc-muted/85 cursor-pointer transition-colors"
>
Show more
</button>
Expand Down
6 changes: 3 additions & 3 deletions web/src/components/MessageFeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -916,13 +916,13 @@ export function MessageFeed({ sessionId }: { sessionId: string }) {
return (
<div className="flex-1 min-h-0 relative overflow-hidden">
{/* Top fade — softens the scroll edge under the top bar */}
<div className="pointer-events-none absolute top-0 inset-x-0 h-6 bg-gradient-to-b from-cc-bg to-transparent z-10" />
<div className="pointer-events-none absolute top-0 inset-x-0 h-7 bg-gradient-to-b from-cc-bg to-transparent z-10" />
<div
ref={containerRef}
onScroll={handleScroll}
className="h-full overflow-y-auto overflow-x-hidden overscroll-y-contain px-4 sm:px-6 py-5 sm:py-8"
className="h-full overflow-y-auto overflow-x-hidden overscroll-y-contain px-3.5 sm:px-5 py-4 sm:py-5"
>
<div className="max-w-3xl mx-auto space-y-5 sm:space-y-7">
<div className="max-w-[860px] mx-auto space-y-4 sm:space-y-[18px]">
{canLoadResumeHistory && !resumeHistoryLoaded && (
<div className="rounded-xl border border-cc-border bg-cc-card p-3">
<div className="flex items-center justify-between gap-3">
Expand Down
8 changes: 4 additions & 4 deletions web/src/components/ProjectGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ export function ProjectGroup({
: "";

return (
<div className={!isFirst ? "mt-3 pt-3 border-t border-cc-separator" : ""}>
<div className={!isFirst ? "mt-2.5 pt-2.5 border-t border-cc-separator/70" : ""}>
{/* Group header */}
<button
onClick={() => onToggleCollapse(group.key)}
aria-expanded={!isCollapsed}
className="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-cc-hover rounded-md transition-colors cursor-pointer group/header"
className="w-full px-2.5 py-[5px] flex items-center gap-1.5 hover:bg-cc-hover rounded-lg transition-colors cursor-pointer group/header"
>
<svg
viewBox="0 0 16 16"
Expand All @@ -70,7 +70,7 @@ export function ProjectGroup({
>
<path d="M6 4l4 4-4 4" />
</svg>
<span className="text-[11px] font-semibold text-cc-fg/60 truncate uppercase tracking-wide">
<span className="text-[11px] font-semibold text-cc-fg/70 truncate uppercase tracking-wide">
{group.label}
</span>

Expand All @@ -92,7 +92,7 @@ export function ProjectGroup({

{/* Collapsed preview */}
{isCollapsed && collapsedPreview && (
<div className="text-[10px] text-cc-muted/70 truncate pl-5 pb-0.5">
<div className="text-[10px] text-cc-muted/70 truncate pl-6 pb-0.5">
{collapsedPreview}
</div>
)}
Expand Down
12 changes: 6 additions & 6 deletions web/src/components/SessionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ function StatusDot({ status }: { status: DerivedStatus }) {
function BackendBadge({ type }: { type: "claude" | "codex" }) {
if (type === "codex") {
return (
<span className="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-sky-500/15 text-sky-500 leading-none">
<span className="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-sky-500/15 text-sky-600 dark:text-sky-300 leading-none">
CX
</span>
);
Expand Down Expand Up @@ -185,10 +185,10 @@ export function SessionItem({
onStartRename(s.id, label);
}
}}
className={`w-full flex items-center gap-2 py-2 pl-2.5 pr-12 min-h-[44px] rounded-lg transition-all duration-100 cursor-pointer relative ${
className={`w-full flex items-center gap-2 py-1.5 pl-2.5 pr-12 min-h-[44px] rounded-lg transition-all duration-100 cursor-pointer relative border ${
isActive
? "bg-cc-active"
: "hover:bg-cc-hover"
? "bg-cc-active border-cc-primary/30"
: "border-transparent hover:bg-cc-hover hover:border-cc-border/60"
}`}
>
{/* Left accent edge for active state */}
Expand Down Expand Up @@ -228,15 +228,15 @@ export function SessionItem({
) : (
<div className="flex-1 min-w-0">
<span
className={`text-[12.5px] font-medium truncate block leading-snug ${
className={`text-[12.5px] font-medium truncate block leading-snug tracking-tight ${
isActive ? "text-cc-fg" : "text-cc-fg/90"
} ${isRecentlyRenamed ? "animate-name-appear" : ""}`}
onAnimationEnd={() => onClearRecentlyRenamed(s.id)}
>
{label}
</span>
{cwdTail && (
<span className="text-[10px] text-cc-muted/70 truncate block leading-tight mt-px">
<span className="text-[10px] text-cc-muted/75 truncate block leading-tight mt-px">
{cwdTail}
</span>
)}
Expand Down
20 changes: 10 additions & 10 deletions web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,11 +482,11 @@ export function Sidebar() {
};

return (
<aside aria-label="Session sidebar" className="w-full md:w-[260px] h-full flex flex-col bg-cc-sidebar">
<aside aria-label="Session sidebar" className="w-full md:w-[288px] h-full flex flex-col bg-cc-sidebar border-r border-cc-border/80">
{/* Header */}
<div className="p-3.5 pb-2">
<div className="px-3.5 pt-3 pb-2 border-b border-cc-border/60 bg-cc-card/45 backdrop-blur-sm">
<div className="flex items-center gap-2.5">
<img src={logoSrc} alt="" className="w-6 h-6" />
<img src={logoSrc} alt="" className="w-6 h-6 rounded" />
<span className="text-[13px] font-semibold text-cc-fg tracking-tight">The Companion</span>
<button
onClick={handleNewSession}
Expand Down Expand Up @@ -565,7 +565,7 @@ export function Sidebar() {
))}

{cronSessions.length > 0 && (
<div className="mt-3 pt-3 border-t border-cc-separator">
<div className="mt-2.5 pt-2.5 border-t border-cc-separator/70">
<button
onClick={() => setShowCronSessions(!showCronSessions)}
aria-expanded={showCronSessions}
Expand Down Expand Up @@ -595,7 +595,7 @@ export function Sidebar() {
)}

{agentSessions.length > 0 && (
<div className="mt-3 pt-3 border-t border-cc-separator">
<div className="mt-2.5 pt-2.5 border-t border-cc-separator/70">
<button
onClick={() => setShowAgentSessions(!showAgentSessions)}
aria-expanded={showAgentSessions}
Expand Down Expand Up @@ -625,7 +625,7 @@ export function Sidebar() {
)}

{archivedSessions.length > 0 && (
<div className="mt-3 pt-3 border-t border-cc-separator">
<div className="mt-2.5 pt-2.5 border-t border-cc-separator/70">
<div className="flex items-center">
<button
onClick={() => setShowArchived(!showArchived)}
Expand Down Expand Up @@ -684,10 +684,10 @@ export function Sidebar() {
</div>

{/* Footer */}
<div className="px-2 py-1.5 pb-safe bg-cc-sidebar-footer border-t border-cc-border/30">
<div className="px-2.5 py-2 pb-safe bg-cc-sidebar-footer border-t border-cc-border/60">
<nav className="flex flex-col gap-1.5" aria-label="Navigation">
{NAV_SECTIONS.map((section) => (
<section key={section.id} className="rounded-lg border border-cc-border/30 bg-cc-card/20 p-0.5">
<section key={section.id} className="rounded-xl border border-cc-border/40 bg-cc-card/45 p-1">
<span className="px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-cc-muted/75 block">
{section.label}
</span>
Expand All @@ -713,7 +713,7 @@ export function Sidebar() {
}}
title={item.label}
aria-current={isActive ? "page" : undefined}
className={`group flex min-h-[44px] md:min-h-[34px] w-full items-center gap-2 rounded-md px-2 py-1 md:py-0.5 text-left transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-primary/60 ${
className={`group flex min-h-[44px] md:min-h-[36px] w-full items-center gap-2 rounded-lg px-2.5 py-1 md:py-0.5 text-left transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-primary/60 ${
isActive
? "bg-cc-active text-cc-fg"
: "text-cc-muted hover:text-cc-fg hover:bg-cc-hover"
Expand All @@ -736,7 +736,7 @@ export function Sidebar() {
</section>
))}
</nav>
<div className="mt-1.5 rounded-lg border border-cc-border/30 bg-cc-card/20 px-1.5 py-0.5">
<div className="mt-1.5 rounded-xl border border-cc-border/40 bg-cc-card/45 px-1.5 py-1">
<div className="flex items-center justify-between">
<span className="px-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-cc-muted/75">
Resources
Expand Down
Loading
Loading