fix(share-popover): anchor popover to button via relative-positioned wrapper div
This commit is contained in:
@@ -1,5 +1,12 @@
|
|||||||
@namespace DeepDrftPublic.Client.Controls
|
@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. *@
|
||||||
|
<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. *@
|
||||||
|
<div class="deepdrft-share-popover-anchor">
|
||||||
<MudTooltip Text="Share">
|
<MudTooltip Text="Share">
|
||||||
<MudIconButton Icon="@Icons.Material.Filled.Share"
|
<MudIconButton Icon="@Icons.Material.Filled.Share"
|
||||||
Size="Size.Large"
|
Size="Size.Large"
|
||||||
@@ -9,8 +16,6 @@
|
|||||||
aria-label="@(IsReleaseMode ? "Share this release" : "Share this track")" />
|
aria-label="@(IsReleaseMode ? "Share this release" : "Share this track")" />
|
||||||
</MudTooltip>
|
</MudTooltip>
|
||||||
|
|
||||||
<MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
|
|
||||||
|
|
||||||
<MudPopover Open="@_open"
|
<MudPopover Open="@_open"
|
||||||
Fixed="false"
|
Fixed="false"
|
||||||
AnchorOrigin="Origin.BottomRight"
|
AnchorOrigin="Origin.BottomRight"
|
||||||
@@ -64,3 +69,4 @@
|
|||||||
|
|
||||||
</MudStack>
|
</MudStack>
|
||||||
</MudPopover>
|
</MudPopover>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -358,6 +358,13 @@ h2, h3, h4, h5, h6,
|
|||||||
font-family: var(--deepdrft-font-mono) !important;
|
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 {
|
.deepdrft-share-popover-body {
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
min-width: 280px;
|
min-width: 280px;
|
||||||
|
|||||||
Reference in New Issue
Block a user