Fix storage side bar text overflow

studio/components/layouts/StorageLayout/StorageMenu.tsx

@@ -122,8 +122,10 @@ const BucketRow = ({
     <ProductMenuItem
       key={bucket.id}
       name={
-        <div className="flex items-center space-x-2">
-          <p>{bucket.name}</p>
+        <div className="flex items-center justify-between space-x-2 truncate w-full">
+          <p className="truncate" title={bucket.name}>
+            {bucket.name}
+          </p>
           {bucket.public && <Badge color="yellow">Public</Badge>}
         </div>
       }

studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js

@@ -34,7 +34,7 @@ const HeaderPathEdit = ({ loading, breadcrumbs, togglePathEdit }) => {
         </div>
       ) : (
         <div className="flex cursor-pointer items-center">
-          <p className="ml-3 text-sm">{breadcrumbs[breadcrumbs.length - 1] || ''}</p>
+          <p className="ml-3 text-sm truncate">{breadcrumbs[breadcrumbs.length - 1] || ''}</p>
           <div className="ml-3 flex items-center space-x-2 opacity-0 transition group-hover:opacity-100">
             <Button type="text" icon={<IconEdit2 />}>
               Navigate
@@ -224,6 +224,7 @@ const FileExplorerHeader = ({
               autoFocus
               key="pathSet"
               type="text"
+              size="small"
               value={pathString}
               onChange={onUpdatePathString}
               placeholder="e.g Parent Folder/Child Folder"

studio/components/ui/ProductMenu/ProductMenuItem.tsx

@@ -31,16 +31,16 @@ const ProductMenuItem: FC<Props> = ({
 }) => {
   const menuItem = (
     <Menu.Item icon={icon} rounded active={isActive} onClick={onClick}>
-      <div className="flex w-full items-center justify-between">
-        <span
+      <div className="flex w-full items-center justify-between gap-1">
+        <div
           title={hoverText ? hoverText : typeof name === 'string' ? name : ''}
-          className={'flex items-center gap-2 truncate ' + textClassName}
+          className={'flex items-center gap-2 truncate w-full ' + textClassName}
         >
           {name}{' '}
           {label !== undefined && (
             <span className="text-orange-800 text-xs font-normal">{label}</span>
           )}
-        </span>
+        </div>
         {action}
       </div>
     </Menu.Item>