jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui: fix saved search modal scrolling

Browse source
This commit is contained in:
nick-delirium 2024-05-21 16:03:45 +02:00
parent 58b0c53569
commit 92353e4c49
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
View file

@ -77,32 +77,34 @@ function SavedSearchModal(props: Props) {
/>
</div>
)}
{shownItems.map((item) => (
<div
key={item.key}
className={cn('p-4 cursor-pointer border-b flex items-center group hover:bg-active-blue', item.isPublic && 'pb-10')}
onClick={(e) => onClick(item, e)}
>
<Icon name="search" color="gray-medium" size="16" />
<div className="ml-4">
<div className="text-lg">{item.name} </div>
{item.isPublic && (
<div className={cn(stl.iconContainer, 'absolute color-gray-medium flex items-center px-2 mt-2')}>
<Icon name="user-friends" size="11" />
<div className="ml-1 text-sm"> Team </div>
<div style={{ maxHeight: 'calc(100vh - 106px)', overflowY: 'auto' }}>
{shownItems.map((item) => (
<div
key={item.key}
className={cn('p-4 cursor-pointer border-b flex items-center group hover:bg-active-blue', item.isPublic && 'pb-10')}
onClick={(e) => onClick(item, e)}
>
<Icon name="search" color="gray-medium" size="16" />
<div className="ml-4">
<div className="text-lg">{item.name} </div>
{item.isPublic && (
<div className={cn(stl.iconContainer, 'absolute color-gray-medium flex items-center px-2 mt-2')}>
<Icon name="user-friends" size="11" />
<div className="ml-1 text-sm"> Team </div>
</div>
)}
</div>
<div className="flex items-center ml-auto self-center">
<div className={cn(stl.iconCircle, 'mr-2 invisible group-hover:visible')}>
<TooltipIcon name="pencil" onClick={(e) => onEdit(item, e)} title="Rename" />
</div>
<div className={cn(stl.iconCircle, 'invisible group-hover:visible')}>
<TooltipIcon name="trash" onClick={(e) => onDelete(item, e)} title="Delete" />
</div>
)}
</div>
<div className="flex items-center ml-auto self-center">
<div className={cn(stl.iconCircle, 'mr-2 invisible group-hover:visible')}>
<TooltipIcon name="pencil" onClick={(e) => onEdit(item, e)} title="Rename" />
</div>
<div className={cn(stl.iconCircle, 'invisible group-hover:visible')}>
<TooltipIcon name="trash" onClick={(e) => onDelete(item, e)} title="Delete" />
</div>
</div>
</div>
))}
))}
</div>
{showModal && <SaveSearchModal show closeHandler={() => setshowModal(false)} rename={true} />}
</div>
);