fix(core): enable cloud button should not take space by default (#8270)

before

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">20240917-0548-21.8568797.mp4</video>

---

after

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">20240917-0549-00.5175618.mp4</video>

packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx

@@ -26,6 +26,7 @@ import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
+import { useCatchEventCallback } from '../../hooks/use-catch-event-hook';
 import * as styles from './styles.css';
 
 const CloudWorkspaceStatus = () => {
@@ -262,6 +263,14 @@ export const WorkspaceCard = forwardRef<
 
     const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
 
+    const onEnableCloud = useCatchEventCallback(() => {
+      onClickEnableCloud?.(workspaceMetadata);
+    }, [onClickEnableCloud, workspaceMetadata]);
+
+    const onOpenSettings = useCatchEventCallback(() => {
+      onClickOpenSettings?.(workspaceMetadata);
+    }, [onClickOpenSettings, workspaceMetadata]);
+
     return (
       <div
         className={clsx(
@@ -301,14 +310,12 @@ export const WorkspaceCard = forwardRef<
             <Skeleton width={100} />
           )}
         </div>
+        <div className={styles.showOnCardHover}>
           {onClickEnableCloud &&
           workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
             <Button
-            className={styles.showOnCardHover}
+              className={styles.enableCloudButton}
-            onClick={e => {
+              onClick={onEnableCloud}
-              e.stopPropagation();
-              onClickEnableCloud(workspaceMetadata);
-            }}
             >
               Enable Cloud
             </Button>
@@ -317,16 +324,12 @@ export const WorkspaceCard = forwardRef<
             <CollaborationIcon />
           )}
           {onClickOpenSettings && (
-          <div
+            <div className={styles.settingButton} onClick={onOpenSettings}>
-            className={styles.settingButton}
-            onClick={e => {
-              e.stopPropagation();
-              onClickOpenSettings(workspaceMetadata);
-            }}
-          >
               <SettingsIcon width={16} height={16} />
             </div>
           )}
+        </div>
+
         {showArrowDownIcon && <ArrowDownSmallIcon />}
       </div>
     );

packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts

@@ -125,6 +125,15 @@ export const workspaceTitleContainer = style({
   overflow: 'hidden',
 });
 
+export const enableCloudButton = style({
+  opacity: 0,
+  selectors: {
+    [`.${container}:hover &`]: {
+      opacity: 1,
+    },
+  },
+});
+
 export const settingButton = style({
   transition: 'all 0.13s ease',
   width: 0,
@@ -152,12 +161,14 @@ export const settingButton = style({
 });
 
 export const showOnCardHover = style({
-  visibility: 'hidden',
+  position: 'absolute',
-  opacity: 0,
+  right: 0,
+  display: 'flex',
+  gap: 8,
+  alignItems: 'center',
   selectors: {
     [`.${container}:hover &`]: {
-      visibility: 'visible',
+      position: 'relative',
-      opacity: 1,
     },
   },
 });