From c21406ab1a2ee3e9801f2174f49888d794688c8c Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Sat, 18 Nov 2023 19:48:10 +0700
Subject: [PATCH] Fix compatibility content not fully display

---
 .../ExploreModels/ExploreModelItem/index.tsx  | 12 ++++++++--
 .../ExploreModels/ModelVersionItem/index.tsx  | 23 +++++++++++++------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/web/screens/ExploreModels/ExploreModelItem/index.tsx b/web/screens/ExploreModels/ExploreModelItem/index.tsx
index 6682c6385..9cbbc248c 100644
--- a/web/screens/ExploreModels/ExploreModelItem/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItem/index.tsx
@@ -58,10 +58,18 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
           <div>
             <span className="mb-1 font-semibold">Compatibility</span>
             <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}
               </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
               </Badge>
             </div>
diff --git a/web/screens/ExploreModels/ModelVersionItem/index.tsx b/web/screens/ExploreModels/ModelVersionItem/index.tsx
index f3120543f..952f364e2 100644
--- a/web/screens/ExploreModels/ModelVersionItem/index.tsx
+++ b/web/screens/ExploreModels/ModelVersionItem/index.tsx
@@ -2,8 +2,8 @@
 import React, { useMemo } from 'react'
 
 import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
-import { Button } from '@janhq/uikit'
-import { Badge } from '@janhq/uikit'
+import { Button, Badge } from '@janhq/uikit'
+
 import { atom, useAtomValue } from 'jotai'
 
 import ModalCancelDownload from '@/containers/ModalCancelDownload'
@@ -73,16 +73,25 @@ const ModelVersionItem: React.FC<Props> = ({ model, modelVersion }) => {
   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 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 className="flex items-center gap-4">
         <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}
           </Badge>
-          <Badge themes="secondary" className="line-clamp-1 ">{`${toGigabytes(
-            maxRamRequired
-          )} RAM required`}</Badge>
+
+          <Badge
+            themes="secondary"
+            className="line-clamp-1"
+            title={`${toGigabytes(maxRamRequired)} RAM required`}
+          >{`${toGigabytes(maxRamRequired)} RAM required`}</Badge>
           <Badge themes="secondary">{toGigabytes(modelVersion.size)}</Badge>
         </div>
         {downloadButton}