fix(ui): add viewport height floor to DialogContent - #2328

🏁 Script executed:

printf '%s\n' '--- dialog.tsx ---'
sed -n '1,110p' frontend/src/components/ui/dialog.tsx
printf '%s\n' '--- applicable rules ---'
for f in .agent/rules/frontend-general.md .agent/rules/frontend-ui.md .agent/rules/frontend-i18n.md; do
  if [ -f "$f" ]; then
    echo "### $f"
    cat "$f"
  fi
done
printf '%s\n' '--- related dialog usage ---'
rg -n --glob '*.tsx' 'Dialog(Content|Close|Header|Footer)|<Dialog' frontend/src | head -120

Repository: looplj/axonhub

Length of output: 19788

🌐 Web query:

CSS overflow scroll container absolutely positioned descendant scrolls with content position absolute containing block overflow specification

💡 Result:

When an element is absolutely positioned, its containing block is determined by the nearest ancestor with a position other than static (i.e., relative, absolute, fixed, or sticky) [1]. If an element with overflow: auto or scroll also serves as this positioning ancestor, it establishes the containing block for its absolutely positioned descendants [2][3]. By default, an absolutely positioned descendant is anchored to the local containing block of the scroll container [3]. This means that when the container scrolls, the absolutely positioned element scrolls along with the container's content [4][3]. Technical specifications define how scroll containers interact with absolute positioning: 1. Local Containing Block: This is the default. It corresponds to the padding box of the scroll container and is affixed to the scrollable overflow area, meaning the element scrolls with the content [3]. 2. Fixed Containing Block: This corresponds to the scrollport (the padding box edges). It remains stationary relative to the container itself and does not scroll with the contents [3]. 3. Scrollable Containing Block: This corresponds to the padding edge of the scrollable overflow area itself, encompassing the scrollable area [3]. If you need an absolutely positioned element to be anchored to a specific part of your layout without being clipped or forced to scroll by the overflow container, you can move the positioning ancestor (the element with position: relative) out of the scroll container to a grandparent or another parent element [4][5]. Alternatively, if the element needs to "break out" of the scroll container entirely, you may need to use position: fixed (which anchors to the viewport) or adjust the layout to use a non-overflowing container for positioning [4][6]. The behavior where an absolutely positioned element is "trapped" by a scrolling parent occurs specifically because that parent serves as the nearest ancestor with a non-static position [1]. Removing the position property from the scrolling container—or placing the positioning anchor outside of it—will cause the absolutely positioned element to escape that container's coordinate system [4][5].

Citations:

• 1: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Containing_block
• 2: https://drafts.csswg.org/css-position-4/
• 3: https://www.w3.org/TR/css-position-4/
• 4: https://www.bennadel.com/blog/3409-using-position-absolute-inside-a-scrolling-overflow-container.htm
• 5: https://stackoverflow.com/questions/53638281/how-to-make-absolute-positioned-elements-overlap-their-overflow-scroll-parent
• 6: https://stackoverflow.com/questions/79515250/how-to-allow-absolutely-positioned-child-element-e-g-a-tooltip-to-overflow-an