Improve tools layout

This commit is contained in:
achraf
2026-06-07 20:21:33 +02:00
parent 543122329e
commit f5364bf7a8
2 changed files with 15 additions and 28 deletions

View File

@@ -7,7 +7,9 @@ export function Footer() {
return (
<footer className="border-t border-[var(--p-border)] px-6 py-6 md:px-14">
<div className="mx-auto flex max-w-[1200px] flex-col gap-4 text-sm text-[var(--p-muted)] sm:flex-row sm:items-center sm:justify-between">
<span>Plimi processes tool inputs locally in your browser.</span>
<span>
© {new Date().getFullYear()} Achraf Achkari. Plimi processes tool inputs locally in your browser.
</span>
<nav className="flex flex-wrap items-center gap-x-5 gap-y-2">
<Link
to="/privacy"

View File

@@ -21,35 +21,20 @@ export function ToolDetailPage() {
);
}
const handleClose = () => {
navigate("/tools");
};
return (
<div
onClick={handleClose}
role="presentation"
className="fixed inset-0 z-50 flex items-end justify-center p-0 md:items-center md:p-10 animate-plimi-fade"
style={{
background: 'color-mix(in oklab, var(--p-bg) 70%, transparent)',
backdropFilter: 'blur(8px)',
}}
>
<div
onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
aria-label={plugin.manifest.name}
className="w-full md:w-[min(900px,100%)] h-[92dvh] md:h-auto md:max-h-[calc(100dvh-5rem)] bg-[var(--p-surface)] rounded-t-[20px] md:rounded-[24px] border-[1.5px] border-[var(--p-border)] flex flex-col animate-plimi-slide overflow-hidden"
style={{
boxShadow: '0 40px 80px -30px var(--p-shadow-soft)',
}}
<div className="mx-auto flex w-full max-w-[1280px] flex-col gap-4 animate-plimi-fade">
<button
onClick={() => navigate("/tools")}
className="self-start font-sans text-[13px] text-[var(--p-muted)] hover:text-[var(--p-text)] cursor-pointer transition-colors"
>
{/* Grab handle — signals the sheet is dismissable on touch */}
<div className="md:hidden flex justify-center pt-2.5 pb-1 shrink-0">
<span className="h-1 w-9 rounded-full bg-[var(--p-border)]" />
</div>
<ToolShell plugin={plugin} onClose={handleClose} dark={dark} />
Back to tools
</button>
<div
className="flex min-h-[70vh] flex-col overflow-hidden rounded-[24px] border-[1.5px] border-[var(--p-border)] bg-[var(--p-surface)]"
style={{ boxShadow: "0 40px 80px -30px var(--p-shadow-soft)" }}
>
<ToolShell plugin={plugin} dark={dark} />
</div>
</div>
);