Unverified 提交 3cbcc6f0 authored 作者: Will Chen's avatar Will Chen 提交者: GitHub

feat: widen chat list sidebar and adjust icon column spacing (#2519)

## Summary - Increase chat list panel width from 240px to 272px and app item width from 190px to 206px for better readability - Adjust overall sidebar width from 18rem to 19rem and icon column from 5rem to 4.5rem ## Test plan - Open the app and verify sidebar renders at the new width - Verify chat list items and app items display correctly without truncation - Verify icon column alignment looks correct 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- devin-review-badge-begin --> --- <a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2519" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1"> <img src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1" alt="Open with Devin"> </picture> </a> <!-- devin-review-badge-end --> <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Widened the chat list panel (240px→272px) and app item width (190px→206px), and adjusted the sidebar (18rem→19rem) and icon column (5rem→4.5rem) to improve readability and alignment. <sup>Written for commit 5b43043809979d2b09e7b86cfdae9c2b2f757241. Summary will update on new commits.</sup> <!-- End of auto-generated description by cubic. --> <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Purely presentational layout tweaks (Tailwind widths/CSS vars) with no changes to data flow, auth, or persistence logic. > > **Overview** > Increases the right-hand panel width in `app-sidebar.tsx` (chat/apps/settings/library lists) and the per-row width in `AppItem` to reduce truncation. > > Updates global sidebar sizing constants in `ui/sidebar.tsx`, widening the expanded sidebar while slightly narrowing the collapsed icon rail to rebalance spacing. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 5b43043809979d2b09e7b86cfdae9c2b2f757241. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> Co-authored-by: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
上级 26687a6f
...@@ -144,7 +144,7 @@ export function AppSidebar() { ...@@ -144,7 +144,7 @@ export function AppSidebar() {
<AppIcons onHoverChange={setHoverState} /> <AppIcons onHoverChange={setHoverState} />
</div> </div>
{/* Right Column: Chat List Section */} {/* Right Column: Chat List Section */}
<div className="w-[240px]"> <div className="w-[272px]">
<AppList show={selectedItem === "Apps"} /> <AppList show={selectedItem === "Apps"} />
<ChatList show={selectedItem === "Chat"} /> <ChatList show={selectedItem === "Chat"} />
<SettingsList show={selectedItem === "Settings"} /> <SettingsList show={selectedItem === "Settings"} />
......
...@@ -21,7 +21,7 @@ export function AppItem({ ...@@ -21,7 +21,7 @@ export function AppItem({
}: AppItemProps) { }: AppItemProps) {
return ( return (
<SidebarMenuItem className="mb-1 relative "> <SidebarMenuItem className="mb-1 relative ">
<div className="flex w-[190px] items-center" title={app.name}> <div className="flex w-[206px] items-center" title={app.name}>
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleAppClick(app.id)} onClick={() => handleAppClick(app.id)}
......
...@@ -15,8 +15,8 @@ import { ...@@ -15,8 +15,8 @@ import {
const SIDEBAR_COOKIE_NAME = "sidebar_state"; const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "18rem"; const SIDEBAR_WIDTH = "19rem";
const SIDEBAR_WIDTH_ICON = "5rem"; const SIDEBAR_WIDTH_ICON = "4.5rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b"; const SIDEBAR_KEYBOARD_SHORTCUT = "b";
type SidebarContextProps = { type SidebarContextProps = {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论