Improve tools layout
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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 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"
|
||||
>
|
||||
← Back to tools
|
||||
</button>
|
||||
|
||||
<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)',
|
||||
}}
|
||||
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)" }}
|
||||
>
|
||||
{/* 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} />
|
||||
<ToolShell plugin={plugin} dark={dark} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user