From b917636bf12dfdf44d1494b9999a4f2d8368f662 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 22 Aug 2026 18:13:44 +0100
Subject: [PATCH] Refactor ObjectList Component to Support Horizontal Scrolling
 and Improve Layout

- Updated ObjectList component to use Flex for layout, enhancing responsiveness and alignment.
- Introduced scrollHorizontal prop to conditionally render content in a horizontal scroll box.
- Adjusted ObjectProperty to pass scrollHorizontal prop, ensuring consistent behavior in table views.
- Enhanced SimplePropertyFilter to handle objectList type correctly, improving data handling.
---
 .../Dashboard/common/ObjectList.jsx           | 39 +++++++++++++------
 .../Dashboard/common/ObjectProperty.jsx       |  1 +
 .../Dashboard/common/SimplePropertyFilter.jsx |  5 +++
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/Dashboard/common/ObjectList.jsx b/src/components/Dashboard/common/ObjectList.jsx
index 639c17fb..79ea72d8 100644
--- a/src/components/Dashboard/common/ObjectList.jsx
+++ b/src/components/Dashboard/common/ObjectList.jsx
@@ -1,33 +1,48 @@
 import PropTypes from 'prop-types'
 import ObjectDisplay from './ObjectDisplay'
-import { Space, Typography } from 'antd'
+import { Flex, Typography } from 'antd'
+import ScrollBox from './ScrollBox'
 
 const { Text } = Typography
 
-const ObjectList = ({ value, objectType, style, showHyperlink = false }) => {
+const ObjectList = ({
+  value,
+  objectType,
+  style,
+  showHyperlink = false,
+  scrollHorizontal = false
+}) => {
   if (!value || !Array.isArray(value) || value.length === 0) {
     return <Text type='secondary'>n/a</Text>
   }
 
-  return (
-    <Space size={'small'} wrap style={style}>
+  const listContents = (
+    <Flex gap={'4px'} wrap={!scrollHorizontal} style={style} justify={'start'}>
       {value.map((item) => (
-        <ObjectDisplay
-          object={item}
-          objectType={objectType}
-          key={item._id}
-          showHyperlink={showHyperlink}
-        />
+        <div key={item._id} style={{ flexShrink: 0 }}>
+          <ObjectDisplay
+            object={item}
+            objectType={objectType}
+            showHyperlink={showHyperlink}
+          />
+        </div>
       ))}
-    </Space>
+    </Flex>
   )
+
+  if (scrollHorizontal) {
+    return <ScrollBox horizontalBottomPadding={10}>{listContents}</ScrollBox>
+  } else {
+    return listContents
+  }
 }
 
 ObjectList.propTypes = {
   value: PropTypes.array,
   objectType: PropTypes.string,
   style: PropTypes.object,
-  showHyperlink: PropTypes.bool
+  showHyperlink: PropTypes.bool,
+  scrollHorizontal: PropTypes.bool
 }
 
 export default ObjectList
diff --git a/src/components/Dashboard/common/ObjectProperty.jsx b/src/components/Dashboard/common/ObjectProperty.jsx
index 68b1f7f1..e2947ef3 100644
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/src/components/Dashboard/common/ObjectProperty.jsx
@@ -480,6 +480,7 @@ const ObjectProperty = ({
               value={value}
               objectType={objectType}
               showHyperlink={showHyperlink}
+              scrollHorizontal={inTable}
             />
           )
         }
diff --git a/src/components/Dashboard/common/SimplePropertyFilter.jsx b/src/components/Dashboard/common/SimplePropertyFilter.jsx
index 454558b1..bf6f7f92 100644
--- a/src/components/Dashboard/common/SimplePropertyFilter.jsx
+++ b/src/components/Dashboard/common/SimplePropertyFilter.jsx
@@ -28,6 +28,11 @@ const getOptionKey = (option) => {
 
 const getDisplayValue = (option, property) => {
   if (!property) return option
+  if (property.type === 'objectList') {
+    if (Array.isArray(option)) return option
+    if (option && typeof option === 'object' && option._id) return [option]
+    if (option != null) return [{ _id: option }]
+  }
   if (property.type === 'object') {
     if (option && typeof option === 'object' && option._id) return option
     if (option != null) return { _id: option }