From e78e24e40d3f651aa9be7e352623f482ab6629b9 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Tue, 21 Jul 2026 00:33:21 +0200
Subject: [PATCH] fix: save-offline button icon+tooltip only, matches other
 recipe actions

Was a labeled outline button, inconsistent with PrintButton/
ShareRecipeButton's icon-only ghost + tooltip convention on the same
row.
---
 .../components/recipe/save-offline-button.tsx   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/recipe/save-offline-button.tsx b/apps/web/components/recipe/save-offline-button.tsx
index bdb859e..4579aa7 100644
--- a/apps/web/components/recipe/save-offline-button.tsx
+++ b/apps/web/components/recipe/save-offline-button.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { toast } from "sonner";
 import { Download, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { isRecipeSavedOffline, saveRecipeOffline, unsaveRecipeOffline } from "@/lib/offline-db";
 
 export function SaveOfflineButton({ recipeId, recipeTitle }: { recipeId: string; recipeTitle: string }) {
@@ -40,10 +41,18 @@ export function SaveOfflineButton({ recipeId, recipeTitle }: { recipeId: string;
     }
   }
 
+  const label = saved ? "Saved offline" : "Save offline";
+
   return (
-    <Button type="button" variant="outline" size="sm" disabled={busy} onClick={() => { void toggle(); }}>
-      {saved ? <Check className="h-3.5 w-3.5" /> : <Download className="h-3.5 w-3.5" />}
-      {saved ? "Saved offline" : "Save offline"}
-    </Button>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={
+          <Button type="button" variant="ghost" size="icon" disabled={busy} aria-label={label} onClick={() => { void toggle(); }}>
+            {saved ? <Check className="h-4 w-4" /> : <Download className="h-4 w-4" />}
+          </Button>
+        } />
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }