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.

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 (
+  const listContents = (
-    <Space size={'small'} wrap style={style}>
+    <Flex gap={'4px'} wrap={!scrollHorizontal} style={style} justify={'start'}>
       {value.map((item) => (
-        <ObjectDisplay
+        <div key={item._id} style={{ flexShrink: 0 }}>
-          object={item}
+          <ObjectDisplay
-          objectType={objectType}
+            object={item}
-          key={item._id}
+            objectType={objectType}
-          showHyperlink={showHyperlink}
+            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

src/components/Dashboard/common/ObjectProperty.jsx

@@ -480,6 +480,7 @@ const ObjectProperty = ({
               value={value}
               objectType={objectType}
               showHyperlink={showHyperlink}
+              scrollHorizontal={inTable}
             />
           )
         }

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 }