fix(collection): Make namespace not overflow width, add title to sidebar items COMPASS-6106 (#3445)

Author: Anemy

packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx

@@ -17,6 +17,7 @@ const collectionHeaderActionsStyles = css({
   display: 'flex',
   marginLeft: 'auto',
   alignItems: 'center',
+  overflow: 'hidden',
 });
 
 const collectionHeaderActionsReadonlyStyles = css({

packages/compass-collection/src/components/collection-header/collection-header.tsx

@@ -34,10 +34,9 @@ const collectionHeaderStyles = css({
 const collectionHeaderTitleStyles = css({
   display: 'flex',
   alignItems: 'center',
-  flex: '1 1 100%',
   padding: `0 ${String(spacing[3])}px`,
   margin: 0,
-  width: '100%',
+  overflow: 'hidden',
 });
 
 const collectionHeaderDBLinkStyles = css({
@@ -51,7 +50,7 @@ const collectionHeaderDBLinkStyles = css({
   },
   backgroundColor: 'transparent',
   border: 'none',
-  display: 'inline',
+  display: 'inline-block',
   padding: 0,
 });
 
@@ -69,12 +68,12 @@ const collectionHeaderNamespaceStyles = css({
   display: 'flex',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
 });
 
 const collectionHeaderDBNameStyles = css({
-  display: 'flex',
-  alignItems: 'center',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 
 const collectionHeaderDBNameLightStyles = css({

packages/compass-databases-navigation/src/collection-item.tsx

@@ -135,7 +135,9 @@ export const CollectionItem: React.FunctionComponent<
       {...hoverProps}
     >
       <CollectionIcon type={type} />
-      <ItemLabel className={collectionItemLabel}>{name}</ItemLabel>
+      <ItemLabel className={collectionItemLabel} title={name}>
+        {name}
+      </ItemLabel>
       <ItemActionControls<Actions>
         className={collectionActions}
         onAction={onAction}

packages/compass-databases-navigation/src/database-item.tsx

@@ -181,6 +181,7 @@ export const DatabaseItem: React.FunctionComponent<
             ? databaseItemLabelNewSpacing
             : databaseItemLabelOldSpacing
         }
+        title={name}
       >
         {name}
       </ItemLabel>