Enhance FileList and ObjectProperty components by adding maxWidth prop for improved layout control. Update rendering logic in FileList to accommodate card and minimal states, ensuring better responsiveness. Adjust PropertyChanges to maintain consistent styling with new width settings.

src/components/Dashboard/common/FileList.jsx

@@ -24,7 +24,8 @@ const FileList = ({
   showDownload = true,
   defaultPreviewOpen = false,
   minimal = false,
-  card = true
+  card = true,
+  maxWidth = '100%'
 }) => {
   const { fetchFileContent, flushFile } = useContext(ApiServerContext)
   const navigate = useNavigate()
@@ -63,12 +64,23 @@ const FileList = ({
   const filesToRender = multiple ? files : [files]
 
   const renderFileContent = (file) => (
-    <Flex vertical gap='10px' style={{ maxWidth: '100%', minWidth: 0 }}>
+    <Flex
+      vertical
+      gap='10px'
+      style={{ maxWidth: '100%', minWidth: 0, width: card ? '100%' : 'fit-content' }}
+    >
       <Flex
         justify={card ? 'space-between' : 'start'}
-        style={{ maxWidth: '100%', minWidth: 0 }}
+        align='center'
+        gap='small'
+        wrap={false}
+        style={{ maxWidth: '100%', minWidth: 0, width: card ? '100%' : 'fit-content' }}
       >
-        <Flex gap={'small'} align='center' style={{ minWidth: 0 }}>
+        <Flex
+          gap={'small'}
+          align='center'
+          style={{ minWidth: 0, flex: '0 1 auto', overflow: 'hidden' }}
+        >
           <FileIcon
             style={{ margin: 0, fontSize: card == true ? '24px' : '16px' }}
           />
@@ -76,50 +88,52 @@ const FileList = ({
           <Text style={{ marginTop: '1px', minWidth: 0 }} ellipsis>
             {file.name || file.filename || 'Unknown file'}
           </Text>
-          <Tag>{file.extension}</Tag>
+          {file.extension && <Tag style={{ margin: 0 }}>{file.extension}</Tag>}
-        </Flex>
-        <Flex gap={'small'} align='center'>
-          {showDownload && !minimal && (
-            <Button
-              icon={<DownloadIcon />}
-              size='small'
-              type='text'
-              onClick={() => handleDownload(file)}
-            />
-          )}
-          {showPreview && !minimal && (
-            <Button
-              icon={previewOpen ? <EyeSlashIcon /> : <EyeIcon />}
-              size='small'
-              type='text'
-              onClick={() => {
-                if (previewOpen == true) {
-                  setPreviewOpen(false)
-                } else {
-                  setPreviewOpen(true)
-                }
-              }}
-            />
-          )}
-          {showInfo && !minimal && (
-            <Button
-              icon={<InfoCircleIcon />}
-              size='small'
-              type='text'
-              onClick={() => {
-                navigate(infoAction.url(file._id))
-              }}
-            />
-          )}
-          {editing && !minimal && (
-            <Button
-              icon={<BinIcon />}
-              size='small'
-              type='text'
-              onClick={() => handleRemove(file)}
-            />
-          )}
         </Flex>
+        {!minimal && (
+          <Flex gap={'small'} align='center'>
+            {showDownload && (
+              <Button
+                icon={<DownloadIcon />}
+                size='small'
+                type='text'
+                onClick={() => handleDownload(file)}
+              />
+            )}
+            {showPreview && (
+              <Button
+                icon={previewOpen ? <EyeSlashIcon /> : <EyeIcon />}
+                size='small'
+                type='text'
+                onClick={() => {
+                  if (previewOpen == true) {
+                    setPreviewOpen(false)
+                  } else {
+                    setPreviewOpen(true)
+                  }
+                }}
+              />
+            )}
+            {showInfo && (
+              <Button
+                icon={<InfoCircleIcon />}
+                size='small'
+                type='text'
+                onClick={() => {
+                  navigate(infoAction.url(file._id))
+                }}
+              />
+            )}
+            {editing && (
+              <Button
+                icon={<BinIcon />}
+                size='small'
+                type='text'
+                onClick={() => handleRemove(file)}
+              />
+            )}
+          </Flex>
+        )}
       </Flex>
       {previewOpen && !minimal ? (
         <>
@@ -130,8 +144,16 @@ const FileList = ({
     </Flex>
   )
 
+  const rootStyle = {
+    minWidth: 0,
+    maxWidth,
+    ...(card
+      ? { width: '100%' }
+      : { width: 'fit-content', alignSelf: 'flex-start' })
+  }
+
   return (
-    <div style={{ width: '100%' }}>
+    <div style={rootStyle}>
       {filesToRender.map((file, index) => {
         const key = file._id || file.id || index
         const style = {
@@ -176,7 +198,8 @@ FileList.propTypes = {
   showDownload: PropTypes.bool,
   defaultPreviewOpen: PropTypes.bool,
   card: PropTypes.bool,
-  minimal: PropTypes.bool
+  minimal: PropTypes.bool,
+  maxWidth: PropTypes.string
 }
 
 export default FileList

src/components/Dashboard/common/ObjectProperty.jsx

@@ -616,6 +616,7 @@ const ObjectProperty = ({
                 minimal={minimal}
                 multiple={false}
                 card={false}
+                maxWidth={maxWidth}
                 defaultPreviewOpen={previewOpen}
                 showPreview={showPreview}
                 showInfo={showHyperlink}
@@ -630,6 +631,7 @@ const ObjectProperty = ({
               files={value}
               minimal={minimal}
               multiple={true}
+              maxWidth={maxWidth}
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}

src/components/Dashboard/common/PropertyChanges.jsx

@@ -53,7 +53,7 @@ const PropertyChanges = ({ type, value }) => {
         }
         return (
           <Descriptions.Item key={key} label={changeProperty.label}>
-            <Flex gap={'small'}>
+            <Flex gap={'small'} style={{ minWidth: 0, width: '100%' }}>
               {value?.old ? (
                 <ObjectProperty
                   {...changeProperty}