TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(fix): Study panel scrollbar fix and updates (#4951)

Browse Source
This commit is contained in:
Dan Rukas 2025-04-11 15:03:56 -04:00 committed by GitHub
parent c50298f394
commit 5425308e55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
View File

@ -63,7 +63,7 @@ const Thumbnail = ({
<div
className={classnames(
'flex h-full w-full flex-col items-center justify-center gap-[2px] p-[4px]',
isActive && 'bg-popover'
isActive && 'bg-popover rounded'
)}
>
<div className="h-[114px] w-[128px]">
@ -80,7 +80,7 @@ const Thumbnail = ({
)}
{/* bottom left */}
<div className="absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] rounded-tr pt-[10px] pb-[8px] pr-[6px] pl-[3px]">
<div className="absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] rounded-tr pt-[10px] pb-[10px] pr-[6px] pl-[5px]">
<div
className={classnames(
'h-[10px] w-[10px] rounded-[2px]',
@ -135,7 +135,7 @@ const Thumbnail = ({
</div>
</div>
</div>
<div className="flex h-[52px] w-[128px] flex-col justify-end">
<div className="flex h-[52px] w-[128px] flex-col justify-start pt-px">
<Tooltip>
<TooltipContent>{description}</TooltipContent>
<TooltipTrigger>
@ -167,18 +167,18 @@ const Thumbnail = ({
<div
className={classnames(
'flex h-full w-full items-center justify-between pr-[8px] pl-[8px] pt-[4px] pb-[4px]',
isActive && 'bg-popover'
isActive && 'bg-popover rounded'
)}
>
<div className="relative flex h-[32px] w-full items-center gap-[8px] overflow-hidden">
<div
className={classnames(
'h-[32px] w-[4px] min-w-[4px] rounded-[2px]',
'h-[32px] w-[4px] min-w-[4px] rounded',
isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65',
loadingProgress && loadingProgress < 1 && 'bg-primary/25'
)}
></div>
<div className="flex h-full w-[calc(100%-12px)] flex-col">
<div className="flex h-full w-[calc(100%-12px)] flex-col justify-start">
<div className="flex items-center gap-[7px]">
<div className="text-[13px] font-semibold text-white">{modality}</div>
<Tooltip>

8
platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { Thumbnail } from '../Thumbnail';
import { useDynamicMaxHeight } from '../../hooks/useDynamicMaxHeight';
import { ScrollArea } from '../ScrollArea';
const ThumbnailList = ({
thumbnails,
@ -27,11 +26,10 @@ const ThumbnailList = ({
);
return (
<ScrollArea className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]">
<div className="flex flex-col">
<div
ref={ref}
style={{ maxHeight: maxHeight, minHeight: '300px' }}
className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]"
className="flex flex-col gap-[2px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]"
>
{thumbnailItems.length > 0 && (
<div
@ -88,7 +86,7 @@ const ThumbnailList = ({
</div>
)}
</div>
</ScrollArea>
</div>
);
};