Merge pull request #35 from uncountableinc/brendan/fix-fullscreen-zoom

Fix fullscreen zoom
uncountableinc · Dec 10, 2024 · 1b4a793 · 1b4a793
2 parents 7cb6ad7 + 5cd14e0
commit 1b4a793
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/ketcher-core/package.json b/packages/ketcher-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-core",
-  "version": "2.24.0-rc.1-unc33",
+  "version": "2.24.0-rc.1-unc34",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

diff --git a/packages/ketcher-react/package.json b/packages/ketcher-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-react",
-  "version": "2.24.0-rc.1-unc33",
+  "version": "2.24.0-rc.1-unc34",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

diff --git a/packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/ZoomControls.tsx b/packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/ZoomControls.tsx
@@ -21,6 +21,16 @@ import { Button, Popover } from '@mui/material';
 import { zoomList } from 'src/script/ui/action/zoom';
 import { ZoomInput, updateInputString } from './ZoomInput';
 import { Icon } from 'components';
+import { KETCHER_ROOT_NODE_CSS_SELECTOR } from 'src/constants';
+
+const isFullScreen = () => {
+  return !!(
+    document.fullscreenElement ||
+    document.mozFullScreenElement ||
+    document.webkitFullscreenElement ||
+    document.msFullscreenElement
+  );
+};
 
 const ElementAndDropdown = styled('div')`
   position: relative;
@@ -168,6 +178,12 @@ export const ZoomControls = ({
         open={isExpanded}
         onClose={onClose}
         anchorEl={containerRef.current}
+        container={
+          isFullScreen()
+            ? containerRef.current?.closest(KETCHER_ROOT_NODE_CSS_SELECTOR) ??
+              document.body
+            : undefined
+        }
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',