Skip to content

Always collapsable sidebar. More space in the window #2459

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
thetanav wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Always collapsable sidebar. More space in the window #2459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c20747f
collapsable sidebar
thetanav Apr 30, 2026
0fdd23c
better ui few tweaks
thetanav Apr 30, 2026
7431783
fix pr errors
thetanav May 2, 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
7 changes: 5 additions & 2 deletions apps/web/src/components/NoActiveThreadState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "./ui/empty";
import { SidebarInset, SidebarTrigger } from "./ui/sidebar";
import { SidebarInset, SidebarTrigger, useSidebar } from "./ui/sidebar";
import { isElectron } from "../env";
import { cn } from "~/lib/utils";

export function NoActiveThreadState() {
const { isMobile, open, openMobile } = useSidebar();
const sidebarOpen = isMobile ? openMobile : open;

return (
<SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
Expand All @@ -21,7 +24,7 @@ export function NoActiveThreadState() {
</span>
) : (
<div className="flex items-center gap-2">
<SidebarTrigger className="size-7 shrink-0 md:hidden" />
{!sidebarOpen ? <SidebarTrigger className="size-7 shrink-0" /> : null}
<span className="text-sm font-medium text-foreground md:text-muted-foreground/60">
No active thread
</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ProjectScriptsControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ export default function ProjectScriptsControl({
{primaryScript ? (
<Group aria-label="Project scripts">
<Button
size="xs"
size="sm"
Copy link
Copy Markdown
Contributor

@cursor cursor Bot May 2, 2026

Choose a reason for hiding this comment

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

Button group height mismatch after size change

Medium Severity

The primary script button's size changed from "xs" to "sm", but the adjacent dropdown trigger in the same Group still uses size="icon-xs". Previously both had matching heights (xs: h-7/sm:h-6, icon-xs: size-7/sm:size-6). Now "sm" renders at h-8 (sm:h-7) while "icon-xs" remains at size-7 (sm:size-6), creating a visible height mismatch within the button group. The other header action buttons (terminal and diff toggles) also still use size="xs", making the script button visually inconsistent with its neighbors.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 7431783. Configure here.

variant="outline"
onClick={() => onRunScript(primaryScript)}
title={`Run ${primaryScript.name}`}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2364,7 +2364,7 @@ const SidebarChromeHeader = memo(function SidebarChromeHeader({
}) {
const wordmark = (
<div className="flex items-center gap-2">
<SidebarTrigger className="shrink-0 md:hidden" />
<SidebarTrigger className="shrink-0" />
<Tooltip>
<TooltipTrigger
render={
Expand Down
9 changes: 6 additions & 3 deletions apps/web/src/components/chat/ChatHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Badge } from "../ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScriptsControl";
import { Toggle } from "../ui/toggle";
import { SidebarTrigger } from "../ui/sidebar";
import { SidebarTrigger, useSidebar } from "../ui/sidebar";
import { OpenInPicker } from "./OpenInPicker";

interface ChatHeaderProps {
Expand Down Expand Up @@ -68,10 +68,13 @@ export const ChatHeader = memo(function ChatHeader({
onToggleTerminal,
onToggleDiff,
}: ChatHeaderProps) {
const { isMobile, open, openMobile } = useSidebar();
const sidebarOpen = isMobile ? openMobile : open;

return (
<div className="@container/header-actions flex min-w-0 flex-1 items-center gap-2">
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
<SidebarTrigger className="size-7 shrink-0 md:hidden" />
{!sidebarOpen ? <SidebarTrigger className="size-7 shrink-0" /> : null}
<h2
className="min-w-0 shrink truncate text-sm font-medium text-foreground"
title={activeThreadTitle}
Expand All @@ -89,7 +92,7 @@ export const ChatHeader = memo(function ChatHeader({
</Badge>
)}
</div>
<div className="flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3">
<div className="flex shrink-0 items-center justify-end gap-1 @3xl/header-actions:gap-2">
{activeProjectScripts && (
<ProjectScriptsControl
scripts={activeProjectScripts}
Expand Down
13 changes: 10 additions & 3 deletions apps/web/src/components/chat/MessageCopyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ const onCopy = (ref: React.RefObject<HTMLButtonElement | null>) => {
}
};

const onCopyError = (ref: React.RefObject<HTMLButtonElement | null>, error: Error) => {
const onCopyError = (
ref: React.RefObject<HTMLButtonElement | null>,
error: Error,
) => {
if (ref.current) {
anchoredToastManager.add({
data: {
Expand All @@ -41,7 +44,7 @@ const onCopyError = (ref: React.RefObject<HTMLButtonElement | null>, error: Erro
export const MessageCopyButton = memo(function MessageCopyButton({
text,
size = "xs",
variant = "outline",
variant = "ghost",
className,
}: {
text: string;
Expand Down Expand Up @@ -72,7 +75,11 @@ export const MessageCopyButton = memo(function MessageCopyButton({
/>
}
>
{isCopied ? <CheckIcon className="size-3 text-success" /> : <CopyIcon className="size-3" />}
{isCopied ? (
<CheckIcon className="size-3 text-success" />
) : (
<CopyIcon className="size-3" />
)}
</TooltipTrigger>
<TooltipPopup>
<p>Copy to clipboard</p>
Expand Down
Loading
Loading