Skip to content

fix: OPTIC-2157: Actions Menu Disappears at High Browser Zoom Levels #7479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 7, 2025
Merged

fix: OPTIC-2157: Actions Menu Disappears at High Browser Zoom Levels #7479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4c6e84a
fix: OPTIC-2157: Actions Menu Disappears at High Browser Zoom Levels
yyassi-heartex May 6, 2025
bb62b37
should be keying off scrollY for height
yyassi-heartex May 6, 2025
314762c
minor fix for scrollX being used on height stuff
yyassi-heartex May 6, 2025
161cc23
Update web/libs/datamanager/src/components/Common/Dropdown/DropdownCo…
bmartel May 6, 2025
efe0cc9
use a prop from the component instead of hardcoding constrainHeight
bmartel May 6, 2025
0d61649
make the diff easier
bmartel May 6, 2025
1c62546
ensure constrainHeight is a dep
bmartel May 6, 2025
0ebd85e
Sync Follow Merge dependencies
vladimirheartex May 7, 2025
d58ca8a
Merge branch 'develop' into 'fb-optic-2157/dropdown'
vladimirheartex May 7, 2025
024aa14
Merge branch 'develop' into 'fb-optic-2157/dropdown'
yyassi-heartex May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions web/libs/core/src/lib/utils/dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export const alignElements = (
align: Align = "bottom-left",
padding = 0,
constrainHeight = false,
openUpwardForShortViewport = true,
) => {
let offsetLeft = 0;
let offsetTop = 0;
Expand Down Expand Up @@ -123,25 +124,25 @@ export const alignElements = (
case "bottom-center":
offsetTop = pos.bottom + padding;
offsetLeft = pos.horizontalCenter;
maxHeight = window.scrollX + window.innerHeight - offsetTop;
maxHeight = window.scrollY + window.innerHeight - offsetTop;
break;
case "bottom-left":
offsetTop = pos.bottom + padding;
offsetLeft = pos.horizontalLeft;
maxHeight = window.scrollX + window.innerHeight - offsetTop;
maxHeight = window.scrollY + window.innerHeight - offsetTop;
break;
case "bottom-right":
offsetTop = pos.bottom + padding;
offsetLeft = pos.horizontalRight;
maxHeight = window.scrollX + window.innerHeight - offsetTop;
maxHeight = window.scrollY + window.innerHeight - offsetTop;
break;
default:
break;
}

if (offsetTop < window.scrollX) {
if (offsetTop < window.scrollY || !openUpwardForShortViewport) {
offsetTop = pos.bottom + padding;
maxHeight = window.scrollX + window.innerHeight - offsetTop;
maxHeight = window.scrollY + window.innerHeight - offsetTop;
resultAlign[0] = "bottom";
}
// If the dropdown has more space on the top, then we should align it to the top
Expand Down
5 changes: 3 additions & 2 deletions web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const Dropdown = React.forwardRef(({ animated = true, visible = false, ..
const { triggerRef } = React.useContext(DropdownContext) ?? {};
const isInline = triggerRef === undefined;

const { children, align, openUpwardForShortViewport } = props;
const { children, align, openUpwardForShortViewport, constrainHeight = false } = props;
const [currentVisible, setVisible] = React.useState(visible);
const [offset, setOffset] = React.useState({});
const [visibility, setVisibility] = React.useState(visible ? "visible" : null);
Expand All @@ -31,11 +31,12 @@ export const Dropdown = React.forwardRef(({ animated = true, visible = false, ..
dropdownEl,
align ?? "bottom-left",
0,
constrainHeight,
openUpwardForShortViewport ?? true,
);

setOffset({ left, top });
}, [triggerRef]);
}, [triggerRef, align, openUpwardForShortViewport, constrainHeight]);

const dropdownIndex = React.useMemo(() => {
return lastIndex++;
Expand Down
Loading