From cd0e08fb91fbbe498f1a85e9b78a1ef04adba3a2 Mon Sep 17 00:00:00 2001
From: findthelorax <findthelorax@gmial.com>
Date: Mon, 20 Apr 2026 23:48:24 -0400
Subject: [PATCH] fixed canvas style options to fit better and be max 50vw

---
 frontend/src/components/modals/ThemeModal.tsx | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/modals/ThemeModal.tsx b/frontend/src/components/modals/ThemeModal.tsx
index 23f1d6c..62901e7 100644
--- a/frontend/src/components/modals/ThemeModal.tsx
+++ b/frontend/src/components/modals/ThemeModal.tsx
@@ -70,13 +70,13 @@ function ThemeCard({ themeId, selected, onClick }: ThemeCardProps) {
 
       {/* Label */}
       <div
-        className="text-xs font-semibold leading-tight"
+        className="text-sm font-semibold leading-tight wrap-break-word"
         style={{ color: c.nodeLabelColor }}
       >
         {preset.label}
       </div>
       <div
-        className="text-[10px] leading-snug mt-0.5 line-clamp-2"
+        className="text-xs leading-snug mt-1 line-clamp-3 whitespace-normal wrap-break-word overflow-hidden"
         style={{ color: c.nodeSubtextColor }}
       >
         {preset.description}
@@ -121,19 +121,20 @@ export function ThemeModal({ open, onClose }: ThemeModalProps) {
 
   return (
     <Dialog open={open} onOpenChange={(o) => { if (!o) handleCancel() }}>
-      <DialogContent className="bg-[#161b22] border-[#30363d] w-[90vw] max-w-4xl">
+      <DialogContent className="bg-[#161b22] border-[#30363d] w-fit max-w-[calc(100%-2rem)] sm:max-w-[50vw]">
         <DialogHeader>
           <DialogTitle className="text-sm font-semibold">Choose Canvas Style</DialogTitle>
         </DialogHeader>
 
-        <div className="grid grid-cols-5 gap-3 py-1">
+        <div className="flex flex-nowrap gap-3 py-1 overflow-x-auto overflow-y-hidden pb-2 pr-1">
           {THEME_ORDER.map((id) => (
-            <ThemeCard
-              key={id}
-              themeId={id}
-              selected={selected === id}
-              onClick={() => handleSelect(id)}
-            />
+            <div key={id} className="shrink-0 w-30 md:w-24">
+              <ThemeCard
+                themeId={id}
+                selected={selected === id}
+                onClick={() => handleSelect(id)}
+              />
+            </div>
           ))}
         </div>