diff --git a/libs/shared/lib/vis/components/config/SelectionConfig.tsx b/libs/shared/lib/vis/components/config/SelectionConfig.tsx index 4f178a273555c7634b42ef3d49829474e559c64d..142954728f2b4c427c6d67a05ab6bb3bae6a0368 100644 --- a/libs/shared/lib/vis/components/config/SelectionConfig.tsx +++ b/libs/shared/lib/vis/components/config/SelectionConfig.tsx @@ -11,7 +11,7 @@ export const SelectionConfig = () => { if (!selection) return null; return ( - <div className="border-b py-2"> + <div className="border-b py-2 overflow-auto"> <div className="flex justify-between items-center px-4 py-2"> <span className="text-xs font-bold">Selection</span> <Button @@ -27,19 +27,19 @@ export const SelectionConfig = () => { {selection.content.map((item, index) => ( <React.Fragment key={index + 'id'}> <div className="flex justify-between items-center px-4 py-1 gap-1"> - <span className="text-xs font-normal">ID</span> + <span className="text-xs font-semibold pr-2">ID</span> <span className="text-xs">{item._id}</span> </div> <div key={index + 'label'} className="flex justify-between items-center px-4 py-1 gap-1"> - <span className="text-xs font-normal">Label</span> + <span className="text-xs font-semibold pr-2">Label</span> <EntityPill title={item.attributes['labels'] as string}></EntityPill> </div> {Object.entries(item.attributes).map(([key, value]) => { - if (key === 'labels' || key === '_id') return null; + if (key === 'labels' || key === '_id' || value instanceof Object) return null; return ( <div key={index + key} className="flex justify-between items-center px-4 py-1 gap-1"> - <span className="text-xs font-normal break-all max-w-[6rem]">{String(key)}</span> - <span className="text-xs break-all">{value as string}</span> + <span className="text-xs font-semibold pr-2 whitespace-nowrap max-w-[6rem]">{String(key)}</span> + <span className="text-xs break-all">{String(value)}</span> </div> ); })}