docs(SharePopover): correct inline-block/relative comments — inline-block is load-bearing, relative is incidental
This commit is contained in:
@@ -1,11 +1,13 @@
|
|||||||
@namespace DeepDrftPublic.Client.Controls
|
@namespace DeepDrftPublic.Client.Controls
|
||||||
|
|
||||||
@* Overlay is viewport-level; keep it outside the anchor wrapper so it doesn't
|
@* Overlay is viewport-level/fixed regardless of DOM nesting; placing it outside
|
||||||
inherit relative stacking context and still covers the full page. *@
|
the wrapper is harmless/cleaner but doesn't change its behavior. *@
|
||||||
<MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
|
<MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
|
||||||
|
|
||||||
@* Wrap the trigger and popover in a relative-positioned container so MudPopover
|
@* display:inline-block is the load-bearing property: it shrink-wraps this div
|
||||||
anchors to the button rather than the nearest positioned ancestor in the page. *@
|
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">
|
<div class="deepdrft-share-popover-anchor">
|
||||||
<MudTooltip Text="Share">
|
<MudTooltip Text="Share">
|
||||||
<MudIconButton Icon="@Icons.Material.Filled.Share"
|
<MudIconButton Icon="@Icons.Material.Filled.Share"
|
||||||
|
|||||||
@@ -358,8 +358,10 @@ 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
|
/* display:inline-block is load-bearing: it shrink-wraps the wrapper to the
|
||||||
adjacent to the share button rather than relative to the page body. */
|
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 {
|
.deepdrft-share-popover-anchor {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
Reference in New Issue
Block a user