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>
     );
   }
 }

scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx

@@ -25,19 +25,7 @@ import React, { FC } from "react";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
-import styled from "styled-components";
-import { Button, ButtonAddons, Icon, Level, urls } from "@scm-manager/ui-components";
-
-const TopLevel = styled(Level)`
-  margin-top: 1.5rem;
-  margin-bottom: -1.5rem;
-  height: 0;
-  position: absolute;
-  right: 0;
-  @media (max-width: 785px) {
-    margin-top: 4.5rem;
-  }
-`;
+import { Button, ButtonAddons, Icon, urls } from "@scm-manager/ui-components";
 
 type RepositoryForm = {
   path: string;
@@ -68,15 +56,11 @@ type Props = {
 };
 
 const RepositoryFormSwitcher: FC<Props> = ({ forms }) => (
-  <TopLevel
-    right={
-      <ButtonAddons>
-        {(forms || []).map(form => (
-          <RepositoryFormButton key={form.path} {...form} />
-        ))}
-      </ButtonAddons>
-    }
-  />
+  <ButtonAddons className="ml-auto">
+    {(forms || []).map(form => (
+      <RepositoryFormButton key={form.path} {...form} />
+    ))}
+  </ButtonAddons>
 );
 
 export default RepositoryFormSwitcher;