feat: enhance upload modal styling and layout for image previews

Author: andrepat0

src/components/UploadButton/UploadButton.css

@@ -228,8 +228,7 @@
 }
 
 .memori--preview-item:hover {
-  background-color: #f1f3f5;
-  transform: translateX(4px);
+  background-color: var(--memori-secondary-background);
 }
 
 /* Preview item variants */
@@ -341,6 +340,34 @@
   line-height: 1.5;
 }
 
+.memori--upload-image-preview-modal .memori-modal--panel {
+  overflow: hidden;
+}
+
+.memori--upload-image-preview-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  text-align: center;
+}
+
+.memori--upload-image-preview-frame {
+  display: flex;
+  overflow: hidden;
+  width: min(72vw, 640px);
+  max-width: 100%;
+  height: min(42vh, 320px);
+  align-items: center;
+  justify-content: center;
+}
+
+.memori--upload-image-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .memori--modal-preview-file .memori--asset-info {
   padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
   border: 1px solid #b2f2bb;
@@ -482,7 +509,6 @@
 /* Menu item hover effect */
 .memori--upload-menu-item:hover:not(.memori--upload-menu-item--disabled) {
   background-color: #f5f5f5;
-  transform: translateX(4px);
 }
 
 input.memori--upload-title-input {
@@ -539,4 +565,9 @@ input.memori--upload-title-input {
   .memori--upload-menu {
     width: 180px;
   }
+
+  .memori--upload-image-preview-frame {
+    width: min(84vw, 520px);
+    height: min(36vh, 260px);
+  }
 }

src/components/UploadButton/UploadButton.tsx

@@ -609,7 +609,6 @@ ${file.content}
           })}
         >
           {currentMediaCount}/{maxDocumentsPerMessage}
-          {currentMediaCount}/{maxDocumentsPerMessage}
         </div>
       )}
 

src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -468,33 +468,23 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
       {/* Upload Modal with Title Input */}
       <Modal
-        width="80%"
-        widthMd="80%"
+      
         open={showUploadModal && !!selectedFile}
-        className="memori--modal-preview-file"
+        className="memori--modal-preview-file memori--upload-image-preview-modal"
         onClose={handleCancelUpload}
         closable
         // title={t('upload.titleImage', { title: imageTitle })}
         // description={t('upload.imageTitleDescription')}
       >
-        <div
-          className="memori--preview-content"
-          style={{
-            maxHeight: '70vh',
-            overflowY: 'auto',
-            textAlign: 'center',
-          }}
-        >
+        <div className="memori--preview-content memori--upload-image-preview-content">
           {filePreview && (
-            <img
-              src={filePreview}
-              alt={selectedFile?.name || 'Preview'}
-              style={{
-                maxWidth: '100%',
-                maxHeight: '40vh',
-                marginBottom: '20px',
-              }}
-            />
+            <div className="memori--upload-image-preview-frame">
+              <img
+                src={filePreview}
+                alt={selectedFile?.name || 'Preview'}
+                className="memori--upload-image-preview"
+              />
+            </div>
           )}
 
           <div