Display objects in tags.

src/components/Dashboard/common/ObjectDisplay.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { Typography, Flex, Badge } from 'antd'
+import { Typography, Flex, Badge, Tag } from 'antd'
 import { useState, useEffect, useContext, useCallback } from 'react'
 import { getModelByName } from '../../../database/ObjectModels'
 import { ApiServerContext } from '../context/ApiServerContext'
@@ -53,19 +53,25 @@ const ObjectDisplay = ({ object, objectType }) => {
   const model = getModelByName(objectType)
   const Icon = model.icon
   return (
-    <Flex gap={'small'} align='center'>
+    <Tag style={{ margin: 0, border: 'none' }}>
-      <Icon />
+      <Flex gap={objectData?.color ? 'small' : '3px'} align='center'>
-      {objectData?.color ? <Badge color={objectData?.color} /> : null}
+        <Icon />
-      {objectData?.name ? <Text ellipsis>{objectData.name}</Text> : null}
+        <Flex gap={'small'} align='center'>
-      {objectData?._id && !objectData?.name ? (
+          {objectData?.color ? <Badge color={objectData?.color} /> : null}
-        <IdDisplay
+          <div style={{ paddingTop: '1.5px' }}>
-          id={objectData?._id}
+            {objectData?.name ? <Text ellipsis>{objectData.name}</Text> : null}
-          type={objectType}
+            {objectData?._id && !objectData?.name ? (
-          longId={false}
+              <IdDisplay
-          showCopy={false}
+                id={objectData?._id}
-        />
+                type={objectType}
-      ) : null}
+                longId={false}
-    </Flex>
+                showCopy={false}
+              />
+            ) : null}
+          </div>
+        </Flex>
+      </Flex>
+    </Tag>
   )
 }