Fix cmd + A selecting the device image (#437)

This PR hides, device selection that happens when user presses cmd + A. This change is required because the user-select css property is not inheritable, which is why it does not disable global selection (using ctrl + A or double-click). Fixes: #434 --------- Co-authored-by: filip131311 <[email protected]>
software-mansion · Jul 11, 2024 · 31abba2 · 31abba2
1 parent 98d0ca0
commit 31abba2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/packages/vscode-extension/src/webview/components/Preview.css b/packages/vscode-extension/src/webview/components/Preview.css
@@ -30,6 +30,7 @@
   height: var(--phone-screen-height);
   top: var(--phone-top);
   left: calc(var(--phone-left) - 7px);
+  user-select: none;
 }
 
 .phone-sized {
@@ -42,6 +43,7 @@
   mask-image: var(--phone-mask-image);
   -webkit-mask-size: cover;
   mask-size: cover;
+  user-select: none;
 }
 
 .phone-screen {
@@ -54,6 +56,7 @@
   mask-image: var(--phone-mask-image);
   -webkit-mask-size: cover;
   mask-size: cover;
+  user-select: none;
 }
 
 .phone-frame {

diff --git a/packages/vscode-extension/src/webview/hooks/useResizableProps.tsx b/packages/vscode-extension/src/webview/hooks/useResizableProps.tsx
@@ -63,6 +63,7 @@ export function useResizableProps({
       ...resizableStyle,
       display: phoneHeight === 0 ? "none" : "flex",
       alignItems: "center",
+      userSelect: "none",
     },
     handleStyles: {
       bottomRight: {