Render tabel cells with multiple data items as RowListItem

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Fragment } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { debounce } from "lodash";
 import PropTypes from "prop-types";
@@ -29,6 +29,13 @@ const AccessServerButton = ({ url }) => (
   </a>
 );
 
+const RowListItem = ({ text }) => (
+  <span className="server-dashboard-row-list-item">{text}</span>
+);
+RowListItem.propTypes = {
+  text: PropTypes.string,
+};
+
 const ServerDashboard = (props) => {
   let base_url = window.base_url || "/";
   // sort methods
@@ -236,8 +243,13 @@ const ServerDashboard = (props) => {
             break;
         }
         if (Array.isArray(value)) {
-          // cast arrays (e.g. roles, groups) to string
-          value = value.sort().join(", ");
+          value = (
+            <Fragment>
+              {value.sort().flatMap((v) => (
+                <RowListItem text={v} />
+              ))}
+            </Fragment>
+          );
         }
         result[key] = value;
         return result;
@@ -254,7 +266,6 @@ const ServerDashboard = (props) => {
         }}
         valueStyle={{
           padding: "4px",
-          whiteSpace: "unset",
         }}
         data={sortedData}
       />

jsx/src/components/ServerDashboard/server-dashboard.css

@@ -30,3 +30,11 @@
 tr.noborder > td {
   border: none !important;
 }
+
+.server-dashboard-row-list-item {
+  display: inline-block;
+  padding: 0 5px;
+  margin: 2px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+}