From a5f03764d1fe07b55635c52c5dac38ab5e694ba1 Mon Sep 17 00:00:00 2001
From: Ibrahim <93064150+IbrahimCSAE@users.noreply.github.com>
Date: Tue, 12 Nov 2024 12:33:45 -0500
Subject: [PATCH] fix(styles): several fixes for different styles (#4483)

---
 .../components/PanelSection/PanelSection.tsx  |  2 +-
 .../SegmentationSelectorHeader.tsx            |  2 +-
 .../src/components/SidePanel/SidePanel.tsx    |  2 +-
 .../components/StudyBrowser/StudyBrowser.tsx  | 32 ++++++++++---------
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/platform/ui-next/src/components/PanelSection/PanelSection.tsx b/platform/ui-next/src/components/PanelSection/PanelSection.tsx
index b37c3a54d..b6c2d8f1d 100644
--- a/platform/ui-next/src/components/PanelSection/PanelSection.tsx
+++ b/platform/ui-next/src/components/PanelSection/PanelSection.tsx
@@ -34,7 +34,7 @@ export const PanelSection: React.FC<PanelSectionProps> & {
       type="single"
       collapsible
       defaultValue={defaultOpen ? 'item' : undefined}
-      className={cn('overflow-hidden', className)}
+      className={cn('flex-shrink-0 overflow-hidden', className)}
     >
       <AccordionItem
         value="item"
diff --git a/platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx b/platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx
index a2bb1ac3a..63967af36 100644
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx
+++ b/platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx
@@ -138,7 +138,7 @@ export const SegmentationSelectorHeader: React.FC<{ children?: React.ReactNode }
           ))}
         </SelectContent>
       </Select>
-      <Tooltip>
+      <Tooltip delayDuration={100}>
         <TooltipTrigger asChild>
           <Button
             variant="ghost"
diff --git a/platform/ui-next/src/components/SidePanel/SidePanel.tsx b/platform/ui-next/src/components/SidePanel/SidePanel.tsx
index 08fd63f8c..feee00779 100644
--- a/platform/ui-next/src/components/SidePanel/SidePanel.tsx
+++ b/platform/ui-next/src/components/SidePanel/SidePanel.tsx
@@ -360,7 +360,7 @@ const SidePanel = ({
   const getOpenStateComponent = () => {
     return (
       <>
-        <div className="bg-bkg-med flex h-[40px] select-none rounded-t p-2">
+        <div className="bg-bkg-med flex h-[40px] flex-shrink-0 select-none rounded-t p-2">
           {tabs.length === 1 ? getOneTabComponent() : getTabGridComponent()}
         </div>
         <Separator
diff --git a/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx b/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
index fd553dbaf..99ef692bb 100644
--- a/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
@@ -70,21 +70,23 @@ const StudyBrowser = ({
   };
 
   return (
-    <div data-cy={'studyBrowser-panel'}>
-      {showSettings && (
-        <div className="w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]">
-          <>
-            <StudyBrowserViewOptions
-              tabs={tabs}
-              onSelectTab={onClickTab}
-              activeTabName={activeTabName}
-            />
-            <StudyBrowserSort servicesManager={servicesManager} />
-          </>
-        </div>
-      )}
-
-      <div className="ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto">
+    <div
+      className="ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto"
+      data-cy={'studyBrowser-panel'}
+    >
+      <div>
+        {showSettings && (
+          <div className="w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]">
+            <>
+              <StudyBrowserViewOptions
+                tabs={tabs}
+                onSelectTab={onClickTab}
+                activeTabName={activeTabName}
+              />
+              <StudyBrowserSort servicesManager={servicesManager} />
+            </>
+          </div>
+        )}
         {getTabContent()}
       </div>
     </div>