From deec609d5411df5827a5a120e7ffe0102733b74e Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 23 Jul 2026 23:24:48 +0100
Subject: [PATCH] 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  | 121 +++++++++++-------
 .../Dashboard/common/ObjectProperty.jsx       |   2 +
 .../Dashboard/common/PropertyChanges.jsx      |   2 +-
 3 files changed, 75 insertions(+), 50 deletions(-)

diff --git a/src/components/Dashboard/common/FileList.jsx b/src/components/Dashboard/common/FileList.jsx
index a0b2bb8..9919579 100644
--- a/src/components/Dashboard/common/FileList.jsx
+++ b/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>
-        </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)}
-            />
-          )}
+          {file.extension && <Tag style={{ margin: 0 }}>{file.extension}</Tag>}
         </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
diff --git a/src/components/Dashboard/common/ObjectProperty.jsx b/src/components/Dashboard/common/ObjectProperty.jsx
index 33a15bf..dfc42ac 100644
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/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}
diff --git a/src/components/Dashboard/common/PropertyChanges.jsx b/src/components/Dashboard/common/PropertyChanges.jsx
index db129ce..a786b76 100644
--- a/src/components/Dashboard/common/PropertyChanges.jsx
+++ b/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}