disable pointer events on hidden menus in zen mode (#1511)

src/components/LayerUI.scss

@@ -111,3 +111,7 @@
     }
   }
 }
+
+.disable-pointerEvents {
+  pointer-events: none !important;
+}

src/components/LayerUI.tsx

@@ -169,7 +169,10 @@ const LayerUI = ({
       <FixedSideContainer side="top">
         <HintViewer appState={appState} elements={elements} />
         <div className="App-menu App-menu_top">
-          <Stack.Col gap={4}>
+          <Stack.Col
+            gap={4}
+            className={zenModeEnabled && "disable-pointerEvents"}
+          >
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
@@ -201,7 +204,7 @@ const LayerUI = ({
         {
           <div
             className={`App-menu App-menu_bottom zen-mode-transition ${
-              zenModeEnabled && "transition-left"
+              zenModeEnabled && "transition-left disable-pointerEvents"
             }`}
           >
             <Stack.Col gap={2}>
@@ -225,7 +228,7 @@ const LayerUI = ({
     <footer role="contentinfo" className="layer-ui__wrapper__footer">
       <div
         className={`zen-mode-transition ${
-          zenModeEnabled && "transition-right"
+          zenModeEnabled && "transition-right disable-pointerEvents"
         }`}
       >
         <LanguageList

src/components/LockIcon.tsx

@@ -46,7 +46,7 @@ export function LockIcon(props: LockIconProps) {
   return (
     <label
       className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn} zen-mode-visibility ${
-        props.zenModeEnabled && "hidden"
+        props.zenModeEnabled && "hidden disable-pointerEvents"
       }`}
       title={`${props.title} — Q`}
     >

src/components/Stack.tsx

@@ -7,12 +7,19 @@ type StackProps = {
   gap?: number;
   align?: "start" | "center" | "end" | "baseline";
   justifyContent?: "center" | "space-around" | "space-between";
+  className?: string | boolean;
 };
 
-function RowStack({ children, gap, align, justifyContent }: StackProps) {
+function RowStack({
+  children,
+  gap,
+  align,
+  justifyContent,
+  className,
+}: StackProps) {
   return (
     <div
-      className="Stack Stack_horizontal"
+      className={`Stack Stack_horizontal ${className || ""}`}
       style={
         {
           "--gap": gap,
@@ -26,10 +33,16 @@ function RowStack({ children, gap, align, justifyContent }: StackProps) {
   );
 }
 
-function ColStack({ children, gap, align, justifyContent }: StackProps) {
+function ColStack({
+  children,
+  gap,
+  align,
+  justifyContent,
+  className,
+}: StackProps) {
   return (
     <div
-      className="Stack Stack_vertical"
+      className={`Stack Stack_vertical ${className || ""}`}
       style={
         {
           "--gap": gap,