From f8cd3f4e5474f202f42f12e67c790f9934320f5c Mon Sep 17 00:00:00 2001
From: Anemy <rhysh@live.com>
Date: Thu, 4 Aug 2022 12:34:53 -0400
Subject: [PATCH] Make crud toolbar buttons not wrap at small widths

---
 packages/compass-crud/src/components/add-data-menu.tsx | 9 +++++++--
 packages/compass-crud/src/components/crud-toolbar.tsx  | 5 +++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/compass-crud/src/components/add-data-menu.tsx b/packages/compass-crud/src/components/add-data-menu.tsx
index c9ac32f0159..956cdd5251a 100644
--- a/packages/compass-crud/src/components/add-data-menu.tsx
+++ b/packages/compass-crud/src/components/add-data-menu.tsx
@@ -17,6 +17,10 @@ const tooltipContainerStyles = css({
   alignItems: 'center',
 });
 
+const addDataButtonStyles = css({
+  whiteSpace: 'nowrap',
+});
+
 type AddDataMenuProps = {
   instanceDescription: string;
   insertDataHandler: (openInsertKey: 'insert-document' | 'import-file') => void;
@@ -32,6 +36,7 @@ function AddDataButton({
 }): React.ReactElement {
   return (
     <Button
+      className={addDataButtonStyles}
       size="xsmall"
       leftGlyph={<Icon glyph="Download" />}
       rightGlyph={<Icon glyph="CaretDown" />}
@@ -104,7 +109,7 @@ const AddDataMenu: React.FunctionComponent<AddDataMenuProps> = ({
       )}
     >
       <MenuItem
-        data-testid="hadron-document-add-child"
+        data-testid="crud-add-data-import-file"
         onClick={() => {
           setIsOpen(false);
           insertDataHandler('import-file');
@@ -113,7 +118,7 @@ const AddDataMenu: React.FunctionComponent<AddDataMenuProps> = ({
         Import File
       </MenuItem>
       <MenuItem
-        data-testid="hadron-document-add-sibling"
+        data-testid="crud-add-data-insert-document"
         onClick={() => {
           setIsOpen(false);
           insertDataHandler('insert-document');
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
index ebfc2ec433f..e38cb41bf28 100644
--- a/packages/compass-crud/src/components/crud-toolbar.tsx
+++ b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -51,6 +51,10 @@ const toolbarRightActionStyles = css({
   gap: spacing[2],
 });
 
+const exportCollectionButtonStyles = css({
+  whiteSpace: 'nowrap',
+});
+
 type CrudToolbarProps = {
   activeDocumentView: string;
   count?: number;
@@ -151,6 +155,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
             />
           )}
           <Button
+            className={exportCollectionButtonStyles}
             leftGlyph={<Icon glyph="Export" />}
             data-testid="export-collection-button"
             size="xsmall"