Update the style of the buttons on the recipe page

src/routes/recipe/[recipeId]/+page.svelte

@@ -5,6 +5,7 @@
 
     let {data} = $props();
     let on = $state(false);
+    let shareOpen = $state(false);
 
     async function toggle(){
         if(on){
@@ -19,7 +20,18 @@
 
     onMount(()=>{
         const stop = attachVisibilityReacquire(()=>on);
+
+        function onPointerDown(event){
+            if(!shareOpen) return;
+            const target = event.target;
+            if(!(target instanceof Node) || !target.closest(".share")){
+                shareOpen = false;
+            }
+        }
+        document.addEventListener("pointerdown", onPointerDown, true);
+
         return ()=>{
+            document.removeEventListener("pointerdown", onPointerDown, true);
             stop();
             disableRecipeMode();
         };
@@ -55,9 +67,23 @@
 
     <div class="buttonBox">
         <a class="button" href="/recipe/{data.recipe.id}/edit">Edit</a>
-        <button>Printable PDF</button>
-        <button>Link</button>
         <button onclick={toggle}>Recipe Mode</button>
+        <div class="share">
+            <button
+                type="button"
+                class="shareToggle"
+                aria-expanded={shareOpen}
+                aria-haspopup="true"
+                onclick={()=>shareOpen = !shareOpen}
+            >Share</button>
+            {#if shareOpen}
+                <div class="shareMenu" role="menu">
+                    <button type="button" role="menuitem">Copy link</button>
+                    <button type="button" role="menuitem">Print</button>
+                    <button type="button" role="menuitem">Download</button>
+                </div>
+            {/if}
+        </div>
     </div>
 </div>
 
@@ -88,11 +114,17 @@
     .buttonBox{
         display: flex;
         flex-wrap: wrap;
-        justify-content: flex-end;
+        align-items: center;
         gap: 0.5rem;
     }
 
-    .buttonBox button{
+    .buttonBox > a,
+    .buttonBox > button,
+    .shareToggle{
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
         border: none;
         outline: none;
         cursor: pointer;
@@ -105,17 +137,64 @@
         font-size: 1rem;
         line-height: 1.2;
         white-space: nowrap;
+        text-decoration: none;
         transition: background 0.15s ease, transform 0.05s ease;
     }
 
-    .buttonBox button:hover{
+    .buttonBox > a:hover,
+    .buttonBox > button:hover,
+    .shareToggle:hover{
         background: var(--color-primary-hover);
     }
 
-    .buttonBox button:active{
+    .buttonBox > a:active,
+    .buttonBox > button:active,
+    .shareToggle:active{
         transform: translateY(1px);
     }
 
+    .share{
+        position: relative;
+        margin-left: auto;
+    }
+
+    .shareMenu{
+        position: absolute;
+        right: 0;
+        bottom: calc(100% + 0.4rem);
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        gap: 0.2rem;
+        min-width: 100%;
+        padding: 0.35rem;
+        background: var(--color-surface);
+        border: 1px solid var(--color-border);
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+    }
+
+    .shareMenu button{
+        border: none;
+        outline: none;
+        cursor: pointer;
+        margin: 0;
+        width: 100%;
+        padding: 0.55rem 0.8rem;
+        background: transparent;
+        color: var(--color-text);
+        border-radius: 6px;
+        font-weight: 600;
+        font-size: 0.9rem;
+        line-height: 1.2;
+        text-align: left;
+        white-space: nowrap;
+    }
+
+    .shareMenu button:hover{
+        background: var(--color-surface-alt);
+    }
+
     article{
         display: flex;
         flex-direction: column;
@@ -277,23 +356,13 @@
         }
     }
 
-    @media (max-width: 480px){
-        .buttonBox{
-            flex-direction: column;
-        }
-
-        .buttonBox button{
-            width: 100%;
-        }
-    }
-
     @media (pointer: coarse){
-        .buttonBox button,
+        .buttonBox > a,
+        .buttonBox > button,
+        .shareToggle,
+        .shareMenu button,
         .missing .button{
             min-height: 44px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
         }
     }
 </style>