fix(scene composer): fix overlay arrow clickable space

awslabs · Aug 8, 2023 · 8e094ea · 8e094ea
1 parent b37b926
commit 8e094ea
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx
@@ -9,6 +9,7 @@ import { IAnchorComponentInternal, IDataOverlayComponentInternal } from '../../.
 import { KnownComponentType } from '../../../interfaces';
 
 import { DataOverlayContainer } from './DataOverlayContainer';
+import { Component } from '../../../models/SceneModels';
 
 export interface DataOverlayComponentProps {
   node: ISceneNodeInternal;
@@ -42,6 +43,8 @@ export const DataOverlayComponent = ({ node, component }: DataOverlayComponentPr
         // TODO: add position after finding proper way to always display overlay right above tag
         position={getOffsetFromTag()}
         style={{
+          // top: extra space for the arrow if overlay panel type
+          top: component.subType == Component.DataOverlaySubType.OverlayPanel ? '-14px' : 'auto',
           transform: 'translate3d(-50%,-100%,0)', // make the center of 3D transform the middle of bottom edge
         }}
       >

diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
@@ -90,14 +90,13 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
           </div>
         )}
         <DataOverlayRows component={component} />
+        {subType == Component.DataOverlaySubType.OverlayPanel && (
+          <div style={tmArrow}>
+            <div style={{ ...tmContainer, ...tmArrowOuter }} />
+            <div style={{ ...tmContainer, ...tmArrowOuter, ...tmArrowInner }} />
+          </div>
+        )}
       </div>
-
-      {subType == Component.DataOverlaySubType.OverlayPanel && (
-        <div style={tmArrow}>
-          <div style={{ ...tmContainer, ...tmArrowOuter }} />
-          <div style={{ ...tmContainer, ...tmArrowOuter, ...tmArrowInner }} />
-        </div>
-      )}
     </>
   ) : null;
 };
diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts
@@ -43,7 +43,6 @@ export const tmCloseButton: CSSProperties = {
 
 // Overlay panel arrow
 export const tmArrow: CSSProperties = {
-  height: '14px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -53,13 +52,14 @@ export const tmArrowOuter: CSSProperties = {
   height: '18px',
   position: 'absolute',
   zIndex: -1,
-  bottom: '5px',
+  bottom: '-9px',
   transform: 'rotate(45deg)',
 };
 export const tmArrowInner: CSSProperties = {
   border: '0px',
-  bottom: '6.5px',
+  bottom: '-7.5px',
   width: '20px',
   height: '20px',
   zIndex: '1',
+  boxShadow: 'none',
 };