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

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

@@ -6,6 +6,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '../DropdownMenu/DropdownMenu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
 
 export function StudyBrowserSort({ servicesManager }: withAppTypes) {
   // Todo: this should not be here, no servicesManager should be in ui-next, only
@@ -50,11 +51,16 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
   }, [displaySetService, selectedSort, sortDirection]);
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex w-[50%] items-center gap-1">
       <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">
-          {selectedSort.label}
-        </DropdownMenuTrigger>
+        <Tooltip>
+          <TooltipTrigger className="w-full overflow-hidden">
+            <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-full items-center justify-start overflow-hidden whitespace-nowrap rounded border bg-black p-2 text-base text-white">
+              {selectedSort.label}
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>{selectedSort.label}</TooltipContent>
+        </Tooltip>
         <DropdownMenuContent className="bg-black">
           {sortFunctions.map(sort => (
             <DropdownMenuItem
@@ -67,16 +73,21 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
           ))}
         </DropdownMenuContent>
       </DropdownMenu>
-      <button
-        onClick={toggleSortDirection}
-        className="flex h-[26px] items-center justify-center bg-black"
-      >
-        {sortDirection === 'ascending' ? (
-          <Icons.SortingAscending className="text-primary-main w-2" />
-        ) : (
-          <Icons.SortingDescending className="text-primary-main w-2" />
-        )}
-      </button>
+      <Tooltip>
+        <TooltipTrigger>
+          <button
+            onClick={toggleSortDirection}
+            className="flex h-[26px] items-center justify-center bg-black"
+          >
+            {sortDirection === 'ascending' ? (
+              <Icons.SortingAscending className="text-primary-main w-2" />
+            ) : (
+              <Icons.SortingDescending className="text-primary-main w-2" />
+            )}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>Sort direction</TooltipContent>
+      </Tooltip>
     </div>
   );
 }