[3578] Fix tooltip and menu visibility in a full screen mode

Bug: #3578 Signed-off-by: Denis Nikiforov <denis.nikif@gmail.com>
eclipse-sirius · Nov 16, 2024 · 3938bb8 · 3938bb8
1 parent e98f7ee
commit 3938bb8
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -25,6 +25,7 @@
 
 === Bug fixes
 
+- https://github.com/eclipse-sirius/sirius-web/issues/3578[#3578] [diagram] Fix tooltip and menu visibility in a full screen mode
 
 
 === New Features

diff --git a/packages/sirius-web/frontend/sirius-web-application/src/theme/siriusWebTheme.ts b/packages/sirius-web/frontend/sirius-web-application/src/theme/siriusWebTheme.ts
@@ -69,6 +69,10 @@ export const baseTheme: Theme = createTheme({
   },
 });
 
+function container() {
+  return document.fullscreenElement ?? document.body;
+}
+
 export const siriusWebTheme = createTheme(
   {
     components: {
@@ -79,7 +83,17 @@ export const siriusWebTheme = createTheme(
           },
         },
       },
+      MuiMenu: {
+        defaultProps: {
+          container,
+        },
+      },
       MuiTooltip: {
+        defaultProps: {
+          PopperProps: {
+            container,
+          },
+        },
         styleOverrides: {
           tooltip: {
             backgroundColor: baseTheme.palette.common.black,

diff --git a/vscode-extension/src/view/app/theme/siriusWebTheme.ts b/vscode-extension/src/view/app/theme/siriusWebTheme.ts
@@ -69,6 +69,10 @@ export const baseTheme: Theme = createTheme({
   },
 });
 
+function container() {
+  return document.fullscreenElement ?? document.body;
+}
+
 export const siriusWebTheme = createTheme(
   {
     components: {
@@ -79,7 +83,17 @@ export const siriusWebTheme = createTheme(
           },
         },
       },
+      MuiMenu: {
+        defaultProps: {
+          container,
+        },
+      },
       MuiTooltip: {
+        defaultProps: {
+          PopperProps: {
+            container,
+          },
+        },
         styleOverrides: {
           tooltip: {
             backgroundColor: baseTheme.palette.common.black,