Improve responsive behaviour

DrChristophFH · May 24, 2024 · e8fd3a4 · e8fd3a4
1 parent 2e61764
commit e8fd3a4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -53,7 +53,7 @@ export default function Dashboard() {
         </div>
         <div className="grid gap-4 grid-cols-1 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
           <ModelReadme readme={selectedLLM?.readme}></ModelReadme>
-          <ModelCard llm={selectedLLM} />
+          <ModelCard llm={selectedLLM} className="order-first lg:order-1"/>
         </div>
       </main>
     </div>

diff --git a/components/lms/model-card.tsx b/components/lms/model-card.tsx
@@ -24,18 +24,20 @@ import {
 import { Separator } from "@/components/ui/separator"
 import { LLM } from "@/lib/types/llm"
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
+import { cn } from "@/lib/utils"
 
 interface ModelCardProps {
   llm: LLM | null;
+  className?: string;
 }
 
-const ModelCard: React.FC<ModelCardProps> = ({ llm }) => {
+const ModelCard: React.FC<ModelCardProps> = ({ llm, className}) => {
   if (!llm) {
     return null;
   }
 
   return (
-    <Card className="overflow-hidden h-min">
+    <Card className={cn("overflow-hidden h-min", className)}>
       <CardHeader className="flex flex-row items-start bg-muted/50 py-6 pr-6 pl-4">
         <Avatar className="h-12 w-12 self-center mr-2">
           <AvatarImage src={`logos/${llm.from}.svg`} alt={llm.from} className="object-scale-down p-1" />

diff --git a/components/lms/model-readme.tsx b/components/lms/model-readme.tsx
@@ -65,6 +65,13 @@ const ModelReadme: React.FC<ModelReadmeProps> = ({ readme }) => {
                       {children}
                     </code>
                   )
+                },
+                table(props) {
+                  return (
+                    <div className="overflow-x-auto">
+                      <table {...props} />
+                    </div>
+                  )
                 }
               }}
             >