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 <div
className={classnames( className={classnames(
'flex h-full w-full flex-col items-center justify-center gap-[2px] p-[4px]', '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]"> <div className="h-[114px] w-[128px]">
@ -80,7 +80,7 @@ const Thumbnail = ({
)} )}
{/* bottom left */} {/* 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 <div
className={classnames( className={classnames(
'h-[10px] w-[10px] rounded-[2px]', 'h-[10px] w-[10px] rounded-[2px]',
@ -135,7 +135,7 @@ const Thumbnail = ({
</div> </div>
</div> </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> <Tooltip>
<TooltipContent>{description}</TooltipContent> <TooltipContent>{description}</TooltipContent>
<TooltipTrigger> <TooltipTrigger>
@ -167,18 +167,18 @@ const Thumbnail = ({
<div <div
className={classnames( className={classnames(
'flex h-full w-full items-center justify-between pr-[8px] pl-[8px] pt-[4px] pb-[4px]', '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="relative flex h-[32px] w-full items-center gap-[8px] overflow-hidden">
<div <div
className={classnames( 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', isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65',
loadingProgress && loadingProgress < 1 && 'bg-primary/25' loadingProgress && loadingProgress < 1 && 'bg-primary/25'
)} )}
></div> ></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="flex items-center gap-[7px]">
<div className="text-[13px] font-semibold text-white">{modality}</div> <div className="text-[13px] font-semibold text-white">{modality}</div>
<Tooltip> <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 { Thumbnail } from '../Thumbnail';
import { useDynamicMaxHeight } from '../../hooks/useDynamicMaxHeight'; import { useDynamicMaxHeight } from '../../hooks/useDynamicMaxHeight';
import { ScrollArea } from '../ScrollArea';
const ThumbnailList = ({ const ThumbnailList = ({
thumbnails, thumbnails,
@ -27,11 +26,10 @@ const ThumbnailList = ({
); );
return ( return (
<ScrollArea className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]"> <div className="flex flex-col">
<div <div
ref={ref} ref={ref}
style={{ maxHeight: maxHeight, minHeight: '300px' }} className="flex flex-col gap-[2px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]"
className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]"
> >
{thumbnailItems.length > 0 && ( {thumbnailItems.length > 0 && (
<div <div
@ -88,7 +86,7 @@ const ThumbnailList = ({
</div> </div>
)} )}
</div> </div>
</ScrollArea> </div>
); );
}; };