fix(share): anchor SharePopover via documented MudPopover RelativeWidth
Use Fixed + RelativeWidth=Adaptive with BottomLeft/TopLeft origins to anchor the menu under the share button; drop the inline-block shrink-wrap container hack. Keep AutoClose off so the embed panel survives clicks.
This commit is contained in:
@@ -1,14 +1,17 @@
|
|||||||
@namespace DeepDrftPublic.Client.Controls
|
@namespace DeepDrftPublic.Client.Controls
|
||||||
|
|
||||||
@* Overlay is viewport-level/fixed regardless of DOM nesting; placing it outside
|
@* Overlay is viewport-level/fixed regardless of DOM nesting; placing it outside
|
||||||
the wrapper is harmless/cleaner but doesn't change its behavior. *@
|
the wrapper is harmless/cleaner but doesn't change its behavior.
|
||||||
<MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
|
AutoClose is deliberately OFF: its modeless pointer-down tracking closes the
|
||||||
|
popover on any click outside the overlay's DOM subtree — including the portaled
|
||||||
|
embed checkbox/copy-button — which kills the embed affordance. Backdrop
|
||||||
|
dismissal is handled by OnClick alone. *@
|
||||||
|
<MudOverlay Visible="@_open" OnClick="@Close" />
|
||||||
|
|
||||||
@* display:inline-block is the load-bearing property: it shrink-wraps this div
|
@* Activator and popover share this wrapper so MudPopover's anchoring reads the
|
||||||
to the button, so MudPopover's portal reads the button's tight bounding rect
|
button's bounding rect. No shrink-wrap sizing — width/min-width come from the
|
||||||
(via parentNode.getBoundingClientRect()) rather than a page-wide flow box.
|
documented RelativeWidth="Adaptive" on the popover, not from container CSS. *@
|
||||||
position:relative is incidental. *@
|
<div>
|
||||||
<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"
|
||||||
@@ -19,9 +22,10 @@
|
|||||||
</MudTooltip>
|
</MudTooltip>
|
||||||
|
|
||||||
<MudPopover Open="@_open"
|
<MudPopover Open="@_open"
|
||||||
Fixed="false"
|
Fixed="true"
|
||||||
AnchorOrigin="Origin.BottomRight"
|
RelativeWidth="DropdownWidth.Adaptive"
|
||||||
TransformOrigin="Origin.TopRight"
|
AnchorOrigin="Origin.BottomLeft"
|
||||||
|
TransformOrigin="Origin.TopLeft"
|
||||||
Class="deepdrft-share-popover">
|
Class="deepdrft-share-popover">
|
||||||
<MudStack Spacing="2" Class="deepdrft-share-popover-body">
|
<MudStack Spacing="2" Class="deepdrft-share-popover-body">
|
||||||
|
|
||||||
|
|||||||
@@ -358,15 +358,6 @@ h2, h3, h4, h5, h6,
|
|||||||
font-family: var(--deepdrft-font-mono) !important;
|
font-family: var(--deepdrft-font-mono) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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