simone/clienthub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: chat drawer above header + vertical "Chiudi" tab on left edge

Browse Source 
Panel z-index raised to z-[60] so it sits above the sticky page header
(z-50) that was covering the close control. Replaced the header X with a
notebook-divider-style vertical "Chiudi" tab protruding from the left edge.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Simone Cavalli
2026-07-11 08:34:25 +02:00
parent 11870e15d3
commit c110689b6a
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/client/ChatPanel.tsx
+19 -14
View File
@@ -128,34 +128,39 @@ export function ChatPanel({ token, comments }: ChatPanelProps) {
{/* Overlay — subtle backdrop on mobile */}
{isOpen && (
<div
className="fixed inset-0 z-30 bg-black/10 lg:hidden"
className="fixed inset-0 z-50 bg-black/10 lg:hidden"
onClick={closeChat}
aria-hidden="true"
/>
)}
{/* Slide-in panel */}
{/* Slide-in panel — z-[60] so it sits above the sticky page header (z-50) */}
<div
className={`fixed top-0 right-0 h-full z-40 w-full sm:w-[420px] bg-white shadow-2xl flex flex-col transition-transform duration-300 ease-in-out ${
className={`fixed top-0 right-0 h-full z-[60] w-full sm:w-[420px] bg-white shadow-2xl flex flex-col transition-transform duration-300 ease-in-out ${
isOpen ? "translate-x-0" : "translate-x-full"
}`}
aria-label="Messaggi & Revisioni"
role="dialog"
aria-modal="true"
>
{/* Vertical "Chiudi" tab — notebook-divider style, protrudes from the left edge */}
<button
type="button"
onClick={closeChat}
aria-label="Chiudi"
className="absolute left-0 top-1/2 flex -translate-x-full -translate-y-1/2 flex-col items-center gap-2 rounded-l-xl bg-[#1A463C] px-2 py-4 text-white shadow-lg transition-colors hover:bg-[#163a31]"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth={2.2} viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
</svg>
<span className="text-[11px] font-semibold uppercase tracking-[0.2em] [writing-mode:vertical-rl]">
Chiudi
</span>
</button>
{/* Panel header */}
<div className="flex items-center justify-between px-5 py-4 border-b border-[#e5e7eb] shrink-0">
<div className="flex items-center px-5 py-4 border-b border-[#e5e7eb] shrink-0">
<h2 className="text-base font-bold text-[#1a1a1a]">Messaggi & Revisioni</h2>
<button
type="button"
onClick={closeChat}
aria-label="Chiudi"
className="p-1.5 rounded-md text-[#71717a] hover:text-[#1a1a1a] hover:bg-[#f4f4f5] transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Chat feed */}