fix(ui): Freightline items overflow with 2+ items (akuity#1348)

Signed-off-by: Remington Breeze <remington@breeze.software>
krancour · Jan 2, 2024 · c343c41 · c343c41
1 parent 3509a29
commit c343c41
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/ui/src/features/freightline/freight-contents.tsx b/ui/src/features/freightline/freight-contents.tsx
@@ -20,7 +20,7 @@ export const FreightContents = (props: {
     } & React.PropsWithChildren
   ) => (
     <Tooltip
-      className={`flex items-center my-1 flex-col bg-neutral-800 rounded p-1 ${
+      className={`flex items-center my-1 flex-col bg-neutral-800 rounded p-1 w-full ${
         promoting && highlighted ? 'bg-transparent' : ''
       }`}
       overlay={props.overlay}
@@ -33,7 +33,7 @@ export const FreightContents = (props: {
 
   return (
     <div
-      className={`hover:text-white flex flex-col justify-center items-center font-mono text-xs flex-shrink min-w-min w-full ${
+      className={`hover:text-white flex flex-col justify-start items-center font-mono text-xs flex-shrink min-w-min w-full overflow-y-auto max-h-full ${
         highlighted ? 'text-white' : 'text-gray-500'
       }`}
     >

diff --git a/ui/src/features/freightline/freight-item.tsx b/ui/src/features/freightline/freight-item.tsx
@@ -46,7 +46,9 @@ export const FreightItem = ({
       onMouseEnter={() => onHover(true)}
       onMouseLeave={() => onHover(false)}
     >
-      <div className='flex w-full h-full mb-1 items-center justify-center'>{children}</div>
+      <div className='flex w-full h-full mb-1 items-center justify-center overflow-hidden'>
+        {children}
+      </div>
       <div className='mt-auto w-full'>
         <div
           className={`w-full text-center font-mono text-xs truncate ${