From af96666ff440922a0f515c4790c5b5f89c89b53c Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 20 May 2025 09:24:52 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=EF=B8=8F=20chore:=20Linting=20&=20?=
 =?UTF-8?q?Transition=20Styling=20in=20UI=20Components=20(#7467)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: linting

* 🔧 fix: Correctly parse dimensions for image width and height in OpenAIImageGen component

* style: overlay class for DialogImage component to improve visibility

* style: Update transition timing function for PixelCard component to rely on style props
---
 .../components/Chat/Input/Files/FileRow.tsx   | 26 +++++++++----------
 .../Chat/Messages/Content/DialogImage.tsx     |  2 +-
 .../Parts/OpenAIImageGen/OpenAIImageGen.tsx   |  4 +--
 client/src/components/ui/PixelCard.tsx        |  3 ++-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Chat/Input/Files/FileRow.tsx b/client/src/components/Chat/Input/Files/FileRow.tsx
index 542978f3a8..7919e2e875 100644
--- a/client/src/components/Chat/Input/Files/FileRow.tsx
+++ b/client/src/components/Chat/Input/Files/FileRow.tsx
@@ -75,20 +75,20 @@ export default function FileRow({
   const renderFiles = () => {
     const rowStyle = isRTL
       ? {
-        display: 'flex',
-        flexDirection: 'row-reverse',
-        flexWrap: 'wrap',
-        gap: '4px',
-        width: '100%',
-        maxWidth: '100%',
-      }
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          flexWrap: 'wrap',
+          gap: '4px',
+          width: '100%',
+          maxWidth: '100%',
+        }
       : {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '4px',
-        width: '100%',
-        maxWidth: '100%',
-      };
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '4px',
+          width: '100%',
+          maxWidth: '100%',
+        };
 
     return (
       <div style={rowStyle as React.CSSProperties}>
diff --git a/client/src/components/Chat/Messages/Content/DialogImage.tsx b/client/src/components/Chat/Messages/Content/DialogImage.tsx
index 3418f5c9dc..2080e69fca 100644
--- a/client/src/components/Chat/Messages/Content/DialogImage.tsx
+++ b/client/src/components/Chat/Messages/Content/DialogImage.tsx
@@ -8,7 +8,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
         showCloseButton={false}
         className="h-full w-full rounded-none bg-transparent"
         disableScroll={false}
-        overlayClassName="bg-surface-secondary"
+        overlayClassName="bg-surface-primary opacity-95 z-50"
       >
         <div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4">
           <Button
diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
index 3237bc37f2..bf09e5a7c3 100644
--- a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
@@ -194,8 +194,8 @@ export default function OpenAIImageGen({
           <Image
             altText={filename}
             imagePath={filepath ?? ''}
-            width={dimensions.width}
-            height={dimensions.height}
+            width={Number(dimensions.width?.split('px')[0])}
+            height={Number(dimensions.height?.split('px')[0])}
             placeholderDimensions={{ width: dimensions.width, height: dimensions.height }}
           />
         </div>
diff --git a/client/src/components/ui/PixelCard.tsx b/client/src/components/ui/PixelCard.tsx
index aabed69fb4..141a3ee55c 100644
--- a/client/src/components/ui/PixelCard.tsx
+++ b/client/src/components/ui/PixelCard.tsx
@@ -350,12 +350,13 @@ export default function PixelCard({
     >
       <div
         className={cn(
-          'ease-[cubic-bezier(0.5,1,0.89,1)] relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200',
+          'relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200 ease-in-out',
           className,
         )}
         style={{
           width: '100%',
           height: '100%',
+          transitionTimingFunction: 'cubic-bezier(0.5, 1, 0.89, 1)',
         }}
         onMouseEnter={hoverIn}
         onMouseLeave={hoverOut}