Enhance ui-elements to be more accessible on smaller screens (#1950)

Enable breaking of content to be fully available on small screens or highly zoomed displays. This should help improve accessibility.

Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>

scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx

@@ -24,7 +24,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { DateFromNow, MailLink } from "@scm-manager/ui-components";
+import { DateFromNow, InfoTable, MailLink } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   repository: Repository;
@@ -34,7 +34,7 @@ class RepositoryDetailTable extends React.Component<Props> {
   render() {
     const { repository, t } = this.props;
     return (
-      <table className="table">
+      <InfoTable>
         <tbody>
           <tr>
             <th>{t("repository.name")}</th>
@@ -67,7 +67,7 @@ class RepositoryDetailTable extends React.Component<Props> {
             </td>
           </tr>
         </tbody>
-      </table>
+      </InfoTable>
     );
   }
 }