feat(panels): responsive thumbnails based on panel size (#4723)

platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx

@@ -5,6 +5,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '../DropdownMenu/DropdownMenu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
 
 export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: withAppTypes) {
   const handleTabChange = (tabName: string) => {
@@ -15,9 +16,14 @@ export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: wi
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-start rounded border bg-black p-2 text-base text-white">
-        {activeTab?.label}
-      </DropdownMenuTrigger>
+      <Tooltip>
+        <TooltipTrigger className="w-full w-[50%] overflow-hidden">
+          <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-full items-center justify-start rounded border bg-black p-2 text-base text-white">
+            {activeTab?.label}
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{activeTab?.label}</TooltipContent>
+      </Tooltip>
       <DropdownMenuContent className="bg-black">
         {tabs.map(tab => {
           const { name, label, studies } = tab;