fix(sidebar): center guide line under folder chevron and tighten list paddings
- Align conversation guide line and status icon to the folder chevron center (left: 0.875rem) - Use fixed 1px guide line with darker shade (sidebar-primary/15) for better visibility - Add bottom border to sidebar title and a top gap above the folder list - Tighten list horizontal padding to px-2 with matching pt-2 for consistency - Fill the done status icon frame directly to avoid sub-pixel off-centering
This commit is contained in:
@@ -151,10 +151,10 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden
|
aria-hidden
|
||||||
className="pointer-events-none absolute top-0 bottom-0 rounded-[0.125rem] bg-sidebar-primary/5"
|
className="pointer-events-none absolute top-0 bottom-0 rounded-[0.125rem] bg-sidebar-primary/15"
|
||||||
style={{
|
style={{
|
||||||
left: "1rem",
|
left: "0.875rem",
|
||||||
width: "0.125rem",
|
width: "1px",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -709,7 +709,7 @@ export function SidebarConversationList({
|
|||||||
aria-hidden
|
aria-hidden
|
||||||
className="absolute inset-0 right-[0.5rem] bg-sidebar"
|
className="absolute inset-0 right-[0.5rem] bg-sidebar"
|
||||||
/>
|
/>
|
||||||
<div className="relative pl-[0.625rem] pr-[0.625rem]">
|
<div className="relative px-2">
|
||||||
<FolderHeader
|
<FolderHeader
|
||||||
key={`sticky-${stickyFolderItem.folderId}`}
|
key={`sticky-${stickyFolderItem.folderId}`}
|
||||||
folderId={stickyFolderItem.folderId}
|
folderId={stickyFolderItem.folderId}
|
||||||
@@ -731,7 +731,7 @@ export function SidebarConversationList({
|
|||||||
)}
|
)}
|
||||||
<ScrollArea
|
<ScrollArea
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-full min-h-0 pl-[0.625rem] pr-[0.625rem] pt-[0.125rem] pb-[1.25rem]",
|
"h-full min-h-0 px-2 pb-[1.25rem]",
|
||||||
"[overflow-anchor:none]"
|
"[overflow-anchor:none]"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ function IconFrame({
|
|||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
left: "1rem",
|
left: "0.875rem",
|
||||||
width: "0.625rem",
|
width: "0.625rem",
|
||||||
height: "0.625rem",
|
height: "0.625rem",
|
||||||
transform: "translate(-50%, -50%)",
|
transform: "translate(-50%, -50%)",
|
||||||
@@ -141,13 +141,12 @@ export function SidebarStatusIcon({
|
|||||||
return (
|
return (
|
||||||
<IconFrame colorClass="text-sidebar-primary/40" className={className}>
|
<IconFrame colorClass="text-sidebar-primary/40" className={className}>
|
||||||
<svg
|
<svg
|
||||||
width="0.45rem"
|
width="0.625rem"
|
||||||
height="0.45rem"
|
height="0.625rem"
|
||||||
viewBox="0 0 12 12"
|
viewBox="0 0 10 10"
|
||||||
preserveAspectRatio="xMidYMid meet"
|
preserveAspectRatio="xMidYMid meet"
|
||||||
style={{ overflow: "visible" }}
|
|
||||||
>
|
>
|
||||||
<circle cx="6" cy="6" r="5" fill="currentColor" />
|
<circle cx="5" cy="5" r="3" fill="currentColor" />
|
||||||
</svg>
|
</svg>
|
||||||
</IconFrame>
|
</IconFrame>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ export function Sidebar() {
|
|||||||
return (
|
return (
|
||||||
<aside className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground select-none">
|
<aside className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground select-none">
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<div className="flex h-10 shrink-0 items-center justify-between gap-2 pl-[1.125rem] pr-2">
|
<div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-border pl-4 pr-2">
|
||||||
<div className="flex min-w-0 items-baseline gap-[0.375rem]">
|
<div className="flex min-w-0 items-baseline gap-[0.375rem]">
|
||||||
<h2 className="truncate text-[0.875rem] font-bold tracking-[-0.00625rem] text-sidebar-foreground">
|
<h2 className="truncate text-[0.875rem] font-bold tracking-[-0.00625rem] text-sidebar-foreground">
|
||||||
{t("title")}
|
{t("title")}
|
||||||
@@ -154,7 +154,7 @@ export function Sidebar() {
|
|||||||
|
|
||||||
{/* On mobile, clicking a conversation card auto-closes the Sheet */}
|
{/* On mobile, clicking a conversation card auto-closes the Sheet */}
|
||||||
<div
|
<div
|
||||||
className="flex flex-col flex-1 min-h-0 overflow-hidden"
|
className="flex flex-col flex-1 min-h-0 overflow-hidden pt-2"
|
||||||
onClick={
|
onClick={
|
||||||
isMobile
|
isMobile
|
||||||
? (e) => {
|
? (e) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user