Loosen character limits on image (+ image gallery) and infobar (#1469)

* Loosen character limits on image and infobar

* chore: update preview-tw.css

---------

Co-authored-by: dcshzj <[email protected]>

Author: sehyunidaaa

apps/studio/public/assets/css/preview-tw.css

@@ -1835,10 +1835,6 @@ video {
   max-width: 80rem;
 }
 
-.max-w-\[100ch\] {
-  max-width: 100ch;
-}
-
 .max-w-\[128px\] {
   max-width: 128px;
 }
@@ -1859,6 +1855,10 @@ video {
   max-width: 54rem;
 }
 
+.max-w-\[70ch\] {
+  max-width: 70ch;
+}
+
 .max-w-\[72\.5rem\] {
   max-width: 72.5rem;
 }

packages/components/src/interfaces/complex/Image.ts

@@ -46,7 +46,7 @@ export const ImageSchema = Type.Object(
     caption: Type.Optional(
       Type.String({
         title: "Caption",
-        maxLength: 100,
+        maxLength: 250,
         format: "textarea",
       }),
     ),

packages/components/src/interfaces/complex/Infobar.ts

@@ -31,7 +31,7 @@ const generateInfobarSchema = ({
       description: Type.Optional(
         Type.String({
           title: "Description",
-          maxLength: 100,
+          maxLength: 200,
         }),
       ),
       variant: Type.Optional(

packages/components/src/templates/next/components/complex/Image/Image.tsx

@@ -7,7 +7,7 @@ const createImageStyles = tv({
   slots: {
     container: "mt-0 [&:not(:first-child)]:mt-7",
     caption:
-      "overflow-wrap break-word prose-label-sm-medium mt-2 max-w-[100ch] text-base-content-subtle md:mx-auto md:text-center",
+      "overflow-wrap break-word prose-label-sm-medium mt-2 max-w-[70ch] text-base-content-subtle md:mx-auto md:text-center",
     image: "mx-auto h-auto max-w-full rounded",
   },
   variants: {

packages/components/src/templates/next/components/complex/ImageGallery/ImageGalleryClient.tsx

@@ -21,7 +21,7 @@ const createImagePreviewStyles = tv({
           "border-base-content outline outline-[0.25rem] outline-offset-[-0.25rem] outline-base-content",
       },
       false: {
-        container: "border-base-divider-subtle hover:opacity-80",
+        container: "border-base-divider-medium hover:opacity-80",
       },
     },
     numberOfImages: {
@@ -207,7 +207,7 @@ export const ImageGalleryClient = ({
                     />
                     {image.caption && (
                       <div className="prose-label-sm-medium absolute bottom-0 left-0 right-0 bg-base-canvas-inverse-overlay/90 p-3 text-white">
-                        {image.caption}
+                        <div className="line-clamp-3">{image.caption}</div>
                       </div>
                     )}
                   </div>