fix: update styling and accessibility in various components

- Simplified text in DocumentsTableShell for clarity.
- Enhanced RightPanel styling for better visual consistency.
- Adjusted ChatListItem styles for improved interaction.
- Updated ReportPanelContent to include background styling and improved layout.
- Modified Drawer and FixedToolbar components for better UI integration.
This commit is contained in:
Anish Sarkar 2026-03-17 14:16:22 +05:30
parent 440f5aec72
commit 9321d27021
7 changed files with 49 additions and 22 deletions

View file

@ -103,7 +103,7 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
return (
<aside
style={{ width: targetWidth }}
className="flex h-full shrink-0 flex-col rounded-xl border bg-background overflow-hidden transition-[width] duration-200 ease-out"
className="flex h-full shrink-0 flex-col rounded-xl border bg-sidebar text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
>
<div className="relative flex-1 min-h-0 overflow-hidden">
{effectiveTab === "sources" && documentsOpen && documentsPanel && (
@ -117,9 +117,9 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
</div>
)}
{effectiveTab === "report" && reportOpen && (
<div className="h-full">
<div className="h-full flex flex-col">
<ReportPanelContent
reportId={reportState.reportId!}
reportId={reportState.reportId as number}
title={reportState.title || "Report"}
onClose={closeReport}
shareToken={reportState.shareToken}

View file

@ -61,7 +61,7 @@ export function ChatListItem({
onClick={handleClick}
{...(isMobile ? longPressHandlers : {})}
className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left transition-colors",
"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground"
@ -73,7 +73,7 @@ export function ChatListItem({
{/* Actions dropdown - trigger hidden on mobile, long-press opens it instead */}
<div
className={cn(
"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center pr-1 pl-6 rounded-r-md transition-opacity",
"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center pr-1 pl-6 rounded-r-md",
isActive
? "bg-gradient-to-l from-accent from-60% to-transparent"
: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",