From 81ea5909d2263d5eabc7a5ebde7a0b7b0ce7f54d Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Tue, 16 Jun 2026 20:49:58 -0400
Subject: [PATCH 1/2] fix(share-popover): anchor popover to button via
 relative-positioned wrapper div

---
 .../Controls/SharePopover.razor               | 116 +++++++++---------
 .../wwwroot/styles/deepdrft-styles.css        |   7 ++
 2 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/SharePopover.razor b/DeepDrftPublic.Client/Controls/SharePopover.razor
index b1843af..7acc5c7 100644
--- a/DeepDrftPublic.Client/Controls/SharePopover.razor
+++ b/DeepDrftPublic.Client/Controls/SharePopover.razor
@@ -1,66 +1,72 @@
 @namespace DeepDrftPublic.Client.Controls
 
-<MudTooltip Text="Share">
-    <MudIconButton Icon="@Icons.Material.Filled.Share"
-                   Size="Size.Large"
-                   Color="Color.Secondary"
-                   Disabled="@(!RendererInfo.IsInteractive)"
-                   OnClick="@Toggle"
-                   aria-label="@(IsReleaseMode ? "Share this release" : "Share this track")" />
-</MudTooltip>
-
+@* Overlay is viewport-level; keep it outside the anchor wrapper so it doesn't
+   inherit relative stacking context and still covers the full page. *@
 <MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
 
-<MudPopover Open="@_open"
-            Fixed="false"
-            AnchorOrigin="Origin.BottomRight"
-            TransformOrigin="Origin.TopRight"
-            Class="deepdrft-share-popover">
-    <MudStack Spacing="2" Class="deepdrft-share-popover-body">
+@* Wrap the trigger and popover in a relative-positioned container so MudPopover
+   anchors to the button rather than the nearest positioned ancestor in the page. *@
+<div class="deepdrft-share-popover-anchor">
+    <MudTooltip Text="Share">
+        <MudIconButton Icon="@Icons.Material.Filled.Share"
+                       Size="Size.Large"
+                       Color="Color.Secondary"
+                       Disabled="@(!RendererInfo.IsInteractive)"
+                       OnClick="@Toggle"
+                       aria-label="@(IsReleaseMode ? "Share this release" : "Share this track")" />
+    </MudTooltip>
 
-        <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
-            <MudButton StartIcon="@Icons.Material.Filled.Link"
-                       Variant="Variant.Text"
-                       Color="Color.Primary"
-                       OnClick="@CopyLink">
-                Copy link
-            </MudButton>
-            @if (_linkCopied)
+    <MudPopover Open="@_open"
+                Fixed="false"
+                AnchorOrigin="Origin.BottomRight"
+                TransformOrigin="Origin.TopRight"
+                Class="deepdrft-share-popover">
+        <MudStack Spacing="2" Class="deepdrft-share-popover-body">
+
+            <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
+                <MudButton StartIcon="@Icons.Material.Filled.Link"
+                           Variant="Variant.Text"
+                           Color="Color.Primary"
+                           OnClick="@CopyLink">
+                    Copy link
+                </MudButton>
+                @if (_linkCopied)
+                {
+                    <MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
+                }
+            </MudStack>
+
+            @* Embed is a single-track affordance only; a release page is not a single-track embed (§3b.3). *@
+            @if (!IsReleaseMode)
             {
-                <MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
-            }
-        </MudStack>
+                <MudDivider />
 
-        @* Embed is a single-track affordance only; a release page is not a single-track embed (§3b.3). *@
-        @if (!IsReleaseMode)
-        {
-            <MudDivider />
+                <MudCheckBox @bind-Value="Embed" Color="Color.Primary" Label="Embed player" Dense="true" />
 
-            <MudCheckBox @bind-Value="Embed" Color="Color.Primary" Label="Embed player" Dense="true" />
-
-            @if (_embed)
-            {
-                <MudStack Row AlignItems="AlignItems.Center" Spacing="1">
-                    <MudTextField Value="@EmbedSnippet"
-                                  T="string"
-                                  ReadOnly="true"
-                                  Variant="Variant.Outlined"
-                                  Lines="3"
-                                  Margin="Margin.Dense"
-                                  Class="deepdrft-share-embed-field" />
-                    <MudStack AlignItems="AlignItems.Center" Spacing="0">
-                        <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
-                                       Color="Color.Primary"
-                                       OnClick="@CopyEmbed"
-                                       aria-label="Copy embed snippet" />
-                        @if (_embedCopied)
-                        {
-                            <MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
-                        }
+                @if (_embed)
+                {
+                    <MudStack Row AlignItems="AlignItems.Center" Spacing="1">
+                        <MudTextField Value="@EmbedSnippet"
+                                      T="string"
+                                      ReadOnly="true"
+                                      Variant="Variant.Outlined"
+                                      Lines="3"
+                                      Margin="Margin.Dense"
+                                      Class="deepdrft-share-embed-field" />
+                        <MudStack AlignItems="AlignItems.Center" Spacing="0">
+                            <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
+                                           Color="Color.Primary"
+                                           OnClick="@CopyEmbed"
+                                           aria-label="Copy embed snippet" />
+                            @if (_embedCopied)
+                            {
+                                <MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
+                            }
+                        </MudStack>
                     </MudStack>
-                </MudStack>
+                }
             }
-        }
 
-    </MudStack>
-</MudPopover>
+        </MudStack>
+    </MudPopover>
+</div>
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index 5767715..619e088 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -358,6 +358,13 @@ h2, h3, h4, h5, h6,
     font-family: var(--deepdrft-font-mono) !important;
 }
 
+/* Relative-positioned wrapper that gives MudPopover a local anchor so it opens
+   adjacent to the share button rather than relative to the page body. */
+.deepdrft-share-popover-anchor {
+    position: relative;
+    display: inline-block;
+}
+
 .deepdrft-share-popover-body {
     padding: 0.75rem 1rem;
     min-width: 280px;

From 4eba3b0bb3d926bee4bf9015e0fe53558351f4a1 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Tue, 16 Jun 2026 21:13:06 -0400
Subject: [PATCH 2/2] =?UTF-8?q?docs(SharePopover):=20correct=20inline-bloc?=
 =?UTF-8?q?k/relative=20comments=20=E2=80=94=20inline-block=20is=20load-be?=
 =?UTF-8?q?aring,=20relative=20is=20incidental?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 DeepDrftPublic.Client/Controls/SharePopover.razor | 10 ++++++----
 DeepDrftPublic/wwwroot/styles/deepdrft-styles.css |  6 ++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/SharePopover.razor b/DeepDrftPublic.Client/Controls/SharePopover.razor
index 7acc5c7..b8eeed8 100644
--- a/DeepDrftPublic.Client/Controls/SharePopover.razor
+++ b/DeepDrftPublic.Client/Controls/SharePopover.razor
@@ -1,11 +1,13 @@
 @namespace DeepDrftPublic.Client.Controls
 
-@* Overlay is viewport-level; keep it outside the anchor wrapper so it doesn't
-   inherit relative stacking context and still covers the full page. *@
+@* Overlay is viewport-level/fixed regardless of DOM nesting; placing it outside
+   the wrapper is harmless/cleaner but doesn't change its behavior. *@
 <MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
 
-@* Wrap the trigger and popover in a relative-positioned container so MudPopover
-   anchors to the button rather than the nearest positioned ancestor in the page. *@
+@* display:inline-block is the load-bearing property: it shrink-wraps this div
+   to the button, so MudPopover's portal reads the button's tight bounding rect
+   (via parentNode.getBoundingClientRect()) rather than a page-wide flow box.
+   position:relative is incidental. *@
 <div class="deepdrft-share-popover-anchor">
     <MudTooltip Text="Share">
         <MudIconButton Icon="@Icons.Material.Filled.Share"
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index 619e088..d23889a 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -358,8 +358,10 @@ h2, h3, h4, h5, h6,
     font-family: var(--deepdrft-font-mono) !important;
 }
 
-/* Relative-positioned wrapper that gives MudPopover a local anchor so it opens
-   adjacent to the share button rather than relative to the page body. */
+/* display:inline-block is load-bearing: it shrink-wraps the wrapper to the
+   button so MudPopover's portal reads the button's tight bounding rect
+   (parentNode.getBoundingClientRect()) instead of a page-wide flow box.
+   position:relative is incidental — do not drop inline-block. */
 .deepdrft-share-popover-anchor {
     position: relative;
     display: inline-block;