From f5364bf7a8ba2eb88acabc1c5307067a5af7f8d5 Mon Sep 17 00:00:00 2001
From: achraf <achrafachkari@hotmail.fr>
Date: Sun, 7 Jun 2026 20:21:33 +0200
Subject: [PATCH] Improve tools layout

---
 src/components/layout/Footer.tsx |  4 +++-
 src/pages/ToolDetailPage.tsx     | 39 ++++++++++----------------------
 2 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 5c6e33a..9621b22 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -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"
diff --git a/src/pages/ToolDetailPage.tsx b/src/pages/ToolDetailPage.tsx
index 8c68a61..72315df 100644
--- a/src/pages/ToolDetailPage.tsx
+++ b/src/pages/ToolDetailPage.tsx
@@ -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>
   );