From 1cc2a0bc7629464d5ab0750846e1b062f2179970 Mon Sep 17 00:00:00 2001
From: alex fields <liftandthink@gmail.com>
Date: Fri, 23 Aug 2024 14:29:42 -0500
Subject: [PATCH] add markdwn, add SCSS, add modal style

---
 src/app/MlHub/Models/ModelDetails.module.scss | 5 +++++
 src/app/MlHub/Models/ModelDetails.tsx         | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/MlHub/Models/ModelDetails.module.scss b/src/app/MlHub/Models/ModelDetails.module.scss
index 5fd6f928..0763847a 100644
--- a/src/app/MlHub/Models/ModelDetails.module.scss
+++ b/src/app/MlHub/Models/ModelDetails.module.scss
@@ -61,3 +61,8 @@
 .download-url-button {
   height: 40px;
 }
+
+.modal {
+  overflow-y: auto;
+  max-height: 90vh;
+}
diff --git a/src/app/MlHub/Models/ModelDetails.tsx b/src/app/MlHub/Models/ModelDetails.tsx
index 55d82562..bb5d31cc 100644
--- a/src/app/MlHub/Models/ModelDetails.tsx
+++ b/src/app/MlHub/Models/ModelDetails.tsx
@@ -162,6 +162,9 @@ const Buttons: React.FC<{ model: Models.ModelFullInfo }> = ({ model }) => {
       </Button>
       {currentModal === 'modelcard' && (
         <GenericModal
+          size="lg"
+          scrollable
+          className={`${styles['modal']}`}
           toggle={() => {
             setCurrentModal(undefined);
           }}
@@ -172,7 +175,7 @@ const Buttons: React.FC<{ model: Models.ModelFullInfo }> = ({ model }) => {
               {data2?.result?.model_card === undefined ? (
                 'no content available'
               ) : (
-                <>{data2?.result?.model_card}</>
+                <Markdown>{data2?.result?.model_card}</Markdown>
               )}
             </div>
           }