fix(crud): hide update/delete labels on narrow windows (#5403)

mongodb-js · Feb 8, 2024 · c45628c · c45628c
1 parent 83d7efb
commit c45628c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/compass-crud/src/components/delete-data-menu.tsx b/packages/compass-crud/src/components/delete-data-menu.tsx
@@ -1,12 +1,25 @@
 import React from 'react';
-import { Icon, Button, Tooltip } from '@mongodb-js/compass-components';
+import {
+  Icon,
+  Button,
+  Tooltip,
+  WorkspaceContainer,
+  css,
+} from '@mongodb-js/compass-components';
 import { usePreference } from 'compass-preferences-model/provider';
 
 type DeleteMenuButtonProps = {
   isWritable: boolean;
   onClick: () => void;
 };
 
+const hiddenOnNarrowStyles = css({
+  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
+    {
+      display: 'none',
+    },
+});
+
 const DeleteMenuButton: React.FunctionComponent<DeleteMenuButtonProps> = ({
   isWritable,
   onClick,
@@ -26,7 +39,7 @@ const DeleteMenuButton: React.FunctionComponent<DeleteMenuButtonProps> = ({
       leftGlyph={<Icon glyph="Trash"></Icon>}
       data-testid="crud-bulk-delete"
     >
-      Delete
+      <span className={hiddenOnNarrowStyles}>Delete</span>
     </Button>
   );
 };

diff --git a/packages/compass-crud/src/components/update-data-menu.tsx b/packages/compass-crud/src/components/update-data-menu.tsx
@@ -1,12 +1,25 @@
 import React from 'react';
-import { Icon, Button, Tooltip } from '@mongodb-js/compass-components';
+import {
+  Icon,
+  Button,
+  Tooltip,
+  css,
+  WorkspaceContainer,
+} from '@mongodb-js/compass-components';
 import { usePreference } from 'compass-preferences-model/provider';
 
 type UpdateMenuButtonProps = {
   isWritable: boolean;
   onClick: () => void;
 };
 
+const hiddenOnNarrowStyles = css({
+  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
+    {
+      display: 'none',
+    },
+});
+
 const UpdateMenuButton: React.FunctionComponent<UpdateMenuButtonProps> = ({
   isWritable,
   onClick,
@@ -26,7 +39,7 @@ const UpdateMenuButton: React.FunctionComponent<UpdateMenuButtonProps> = ({
       leftGlyph={<Icon glyph="Edit"></Icon>}
       data-testid="crud-update"
     >
-      Update
+      <span className={hiddenOnNarrowStyles}>Update</span>
     </Button>
   );
 };