fix: chat drawer above header + vertical "Chiudi" tab on left edge
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:
@@ -128,34 +128,39 @@ export function ChatPanel({ token, comments }: ChatPanelProps) {
|
|||||||
{/* Overlay — subtle backdrop on mobile */}
|
{/* Overlay — subtle backdrop on mobile */}
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
<div
|
<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}
|
onClick={closeChat}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Slide-in panel */}
|
{/* Slide-in panel — z-[60] so it sits above the sticky page header (z-50) */}
|
||||||
<div
|
<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"
|
isOpen ? "translate-x-0" : "translate-x-full"
|
||||||
}`}
|
}`}
|
||||||
aria-label="Messaggi & Revisioni"
|
aria-label="Messaggi & Revisioni"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
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 */}
|
{/* 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>
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Chat feed */}
|
{/* Chat feed */}
|
||||||
|
|||||||
Reference in New Issue
Block a user