Add wrapping for topic names (#534)

* Add wrapping for topic names

* Wrap tags in an additional div

kafka-ui-react-app/src/components/Connect/List/ListItem.tsx

@@ -64,11 +64,13 @@ const ListItem: React.FC<ListItemProps> = ({
       <td>{type}</td>
       <td>{connectorClass}</td>
       <td>
-        {topics?.map((t) => (
-          <Link className="mr-1" key={t} to={clusterTopicPath(clusterName, t)}>
-            {t}
-          </Link>
-        ))}
+        <div className="is-flex is-flex-wrap-wrap">
+          {topics?.map((t) => (
+            <span key={t} className="tag is-info is-light mr-1 mb-1">
+              <Link to={clusterTopicPath(clusterName, t)}>{t}</Link>
+            </span>
+          ))}
+        </div>
       </td>
       <td>{status && <StatusTag status={status.state} />}</td>
       <td>

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -106,25 +106,30 @@ exports[`Connectors ListItem matches snapshot 1`] = `
                 FileStreamSource
               </td>
               <td>
-                <Link
-                  className="mr-1"
-                  key="test-topic"
-                  to="/ui/clusters/local/topics/test-topic"
+                <div
+                  className="is-flex is-flex-wrap-wrap"
                 >
-                  <LinkAnchor
-                    className="mr-1"
-                    href="/ui/clusters/local/topics/test-topic"
-                    navigate={[Function]}
+                  <span
+                    className="tag is-info is-light mr-1 mb-1"
+                    key="test-topic"
                   >
-                    <a
-                      className="mr-1"
-                      href="/ui/clusters/local/topics/test-topic"
-                      onClick={[Function]}
+                    <Link
+                      to="/ui/clusters/local/topics/test-topic"
                     >
-                      test-topic
-                    </a>
-                  </LinkAnchor>
-                </Link>
+                      <LinkAnchor
+                        href="/ui/clusters/local/topics/test-topic"
+                        navigate={[Function]}
+                      >
+                        <a
+                          href="/ui/clusters/local/topics/test-topic"
+                          onClick={[Function]}
+                        >
+                          test-topic
+                        </a>
+                      </LinkAnchor>
+                    </Link>
+                  </span>
+                </div>
               </td>
               <td>
                 <StatusTag