Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix compatibility content not fully display

Browse Source
This commit is contained in:
Faisal Amir 2023-11-18 19:48:10 +07:00
parent bea0678e26
commit c21406ab1a
2 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/screens/ExploreModels/ExploreModelItem/index.tsx
View File

@ -58,10 +58,18 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
<div> <div>
<span className="mb-1 font-semibold">Compatibility</span> <span className="mb-1 font-semibold">Compatibility</span>
<div className="mt-1 flex gap-2"> <div className="mt-1 flex gap-2">
<Badge themes="secondary" className="line-clamp-1 max-w-[400px]"> <Badge
themes="secondary"
className="line-clamp-1 max-w-[400px] lg:line-clamp-none lg:max-w-none"
title={usecase}
>
{usecase} {usecase}
</Badge> </Badge>
<Badge themes="secondary" className="line-clamp-1"> <Badge
themes="secondary"
className="line-clamp-1 lg:line-clamp-none"
title={`${toGigabytes(maxRamRequired)} RAM required`}
>
{toGigabytes(maxRamRequired)} RAM required {toGigabytes(maxRamRequired)} RAM required
</Badge> </Badge>
</div> </div>

23
web/screens/ExploreModels/ModelVersionItem/index.tsx
View File

@ -2,8 +2,8 @@
import React, { useMemo } from 'react' import React, { useMemo } from 'react'
import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types' import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
import { Button } from '@janhq/uikit' import { Button, Badge } from '@janhq/uikit'
import { Badge } from '@janhq/uikit'
import { atom, useAtomValue } from 'jotai' import { atom, useAtomValue } from 'jotai'
import ModalCancelDownload from '@/containers/ModalCancelDownload' import ModalCancelDownload from '@/containers/ModalCancelDownload'
@ -73,16 +73,25 @@ const ModelVersionItem: React.FC<Props> = ({ model, modelVersion }) => {
return ( return (
<div className="flex items-center justify-between gap-4 border-t border-border pb-3 pl-3 pr-4 pt-3 first:border-t-0"> <div className="flex items-center justify-between gap-4 border-t border-border pb-3 pl-3 pr-4 pt-3 first:border-t-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="mb-4 line-clamp-1 flex-1">{modelVersion.name}</span> <span className="line-clamp-1 flex-1" title={modelVersion.name}>
{modelVersion.name}
</span>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Badge themes="secondary" className="line-clamp-1 max-w-[240px]"> <Badge
themes="secondary"
className="line-clamp-1 max-w-[240px] lg:line-clamp-none lg:max-w-none"
title={usecase}
>
{usecase} {usecase}
</Badge> </Badge>
<Badge themes="secondary" className="line-clamp-1 ">{`${toGigabytes(
maxRamRequired <Badge
)} RAM required`}</Badge> themes="secondary"
className="line-clamp-1"
title={`${toGigabytes(maxRamRequired)} RAM required`}
>{`${toGigabytes(maxRamRequired)} RAM required`}</Badge>
<Badge themes="secondary">{toGigabytes(modelVersion.size)}</Badge> <Badge themes="secondary">{toGigabytes(modelVersion.size)}</Badge>
</div> </div>
{downloadButton} {downloadButton}