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/containers/RepositoryRoot.tsx

@@ -29,6 +29,7 @@ import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Changeset, Link } from "@scm-manager/ui-types";
 import {
   CustomQueryFlexWrappedColumns,
+  devices,
   ErrorPage,
   FileControlFactory,
   HealthCheckFailureDetail,
@@ -68,6 +69,12 @@ const TagGroup = styled.span`
   }
 `;
 
+const MobileWrapped = styled.div`
+  @media screen and (max-width: ${devices.mobile.width}px) {
+    margin-left: auto;
+  }
+`;
+
 type UrlParams = {
   namespace: string;
   name: string;
@@ -228,12 +235,12 @@ const RepositoryRoot = () => {
         title={titleComponent}
         documentTitle={`${repository.namespace}/${repository.name}`}
         afterTitle={
-          <div className="is-flex">
-            <ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />
+          <MobileWrapped className="is-flex is-align-items-center">
+            <ExtensionPoint name="repository.afterTitle" props={{ repository }} />
             <TagGroup className="has-text-weight-bold">
               <RepositoryFlags repository={repository} tooltipLocation="bottom" />
             </TagGroup>
-          </div>
+          </MobileWrapped>
         }
       >
         {modal}