fix(bugs): enhancements and bug fixes (#4036)

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx

@@ -29,7 +29,7 @@ const SegmentItem = ({
   return (
     <div
       className={classnames('text-aqua-pale group/row bg-primary-dark flex min-h-[28px] flex-col', {
-        'bg-primary-light border-primary-light rounded-l-[4px] border text-black': isActive,
+        'bg-primary-light border-primary-light rounded-l-[6px] border text-black': isActive,
       })}
       onClick={e => {
         e.stopPropagation();
@@ -65,10 +65,6 @@ const SegmentItem = ({
             <div>{segmentIndex}</div>
           )}
         </div>
-        <div
-          className=" h-[30px] bg-black"
-          style={{ width: '3px' }}
-        ></div>
         <div
           className={classnames('text-aqua-pale relative flex w-full', {
             'border border-l-0 border-transparent': !isActive,

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -74,7 +74,7 @@ const SegmentationGroupTable = ({
   const { t } = useTranslation('SegmentationTable');
 
   return (
-    <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={
@@ -98,7 +98,7 @@ const SegmentationGroupTable = ({
             segmentationConfig={segmentationConfig}
           />
         )}
-        <div className="bg-primary-dark">
+        <div className="bg-primary-dark ">
           {segmentations?.length === 0 ? (
             <div className="select-none bg-black pt-[5px] pb-[5px]">
               {showAddSegmentation && !disableEditing && (
@@ -127,7 +127,7 @@ const SegmentationGroupTable = ({
           )}
         </div>
         {activeSegmentation && (
-          <div className="ohif-scrollbar flex h-fit max-h-[500px] min-h-0 flex-col overflow-auto bg-black">
+          <div className="ohif-scrollbar flex h-fit min-h-0 flex-1 flex-col overflow-auto bg-black">
             {activeSegmentation?.segments?.map(segment => {
               if (!segment) {
                 return null;

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTableExpanded.tsx

@@ -67,7 +67,7 @@ const SegmentationGroupTableExpanded = ({
   const { t } = useTranslation('SegmentationTable');
 
   return (
-    <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={
@@ -91,14 +91,14 @@ const SegmentationGroupTableExpanded = ({
             segmentationConfig={segmentationConfig}
           />
         )}
-        <div className="bg-primary-dark">
+        <div className="bg-primary-dark flex flex-1 flex-col overflow-hidden">
           <div className="select-none bg-black pt-[5px] pb-[5px]">
             {showAddSegmentation && !disableEditing && (
               <NoSegmentationRow onSegmentationAdd={onSegmentationAdd} />
             )}
           </div>
           {segmentations?.length > 0 && (
-            <div className="ohif-scrollbar flex max-h-[500px] select-none flex-col gap-[5px] overflow-auto bg-black">
+            <div className="ohif-scrollbar flex flex-1 select-none flex-col gap-[5px] overflow-auto bg-black">
               {segmentations?.map(segmentation => {
                 return (
                   <div key={segmentation.id}>