Adjust expand button offset

mongodb-js · Nov 5, 2024 · 8f71a2c · 8f71a2c
1 parent 913c310
commit 8f71a2c
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/packages/compass-editor/src/actions-container.tsx b/packages/compass-editor/src/actions-container.tsx
@@ -24,6 +24,12 @@ const actionsContainerStyle = css({
   pointerEvents: 'none',
 });
 
+const expandContainerStyle = css({
+  position: 'relative',
+  top: -spacing[100],
+  left: -spacing[100],
+});
+
 const actionsGroupItemSeparator = css({
   flex: '1 0 auto',
   pointerEvents: 'none',
@@ -47,12 +53,14 @@ export const ActionsContainer = ({
       )}
     >
       {onExpand && (
-        <ActionButton
-          label={expanded ? 'Collapse all' : 'Expand all'}
-          icon={expanded ? 'CaretDown' : 'CaretRight'}
-          onClick={onExpand}
-          compact
-        />
+        <div className={expandContainerStyle}>
+          <ActionButton
+            label={expanded ? 'Collapse all' : 'Expand all'}
+            icon={expanded ? 'CaretDown' : 'CaretRight'}
+            onClick={onExpand}
+            compact
+          />
+        </div>
       )}
       <span className={actionsGroupItemSeparator}></span>
       {copyable && (