Feedback button does not mask warp menu in EcoSystem (#2062)

The feedback button overlaps the warp menu when the SCM-Manager is used as a dogu in a Cloudogu EcoSystem on small screens. The default position is changed to avoid masking the warp menu. The z-index of the feedback button is reduced to avoid masking the open warp menu.
The DOM-sequence is changed to ensure users with keyboard navigation can access important parts of the page before the feedback button.

gradle/changelog/feedback_overlaps_warp_menu.yaml

@@ -0,0 +1,2 @@
+- type: changed
+  description: feedback button should not mask warp menu in when SCM-Manager is used as a dogu in Cloudogu EcoSystem ([#2051](https://github.com/scm-manager/scm-manager/pull/2062))

scm-ui/ui-webapp/src/containers/App.tsx

@@ -66,11 +66,11 @@ const App: FC = () => {
 
   return (
     <AppWrapper className="App">
-      {isAuthenticated ? <Feedback index={index} /> : null}
       <Header authenticated={authenticatedOrAnonymous}>
         <NavigationBar links={index._links} />
       </Header>
       <div className="is-flex-grow-1">{content}</div>
+      {isAuthenticated ? <Feedback index={index} /> : null}
       <Footer me={me} version={index.version} links={index._links} />
     </AppWrapper>
   );

scm-ui/ui-webapp/src/containers/Feedback.tsx

@@ -24,7 +24,7 @@
 
 import React, { FC, useMemo, useState } from "react";
 import styled from "styled-components";
-import { apiClient, Button, Modal } from "@scm-manager/ui-components";
+import { apiClient, Button, Modal, devices } from "@scm-manager/ui-components";
 import { HalRepresentation, IndexResources, Link } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import { ApiResult, createQueryString } from "@scm-manager/ui-api";
@@ -88,10 +88,15 @@ const Feedback: FC<Props> = ({ index }) => {
 
 const TriggerButton = styled(Button)`
   position: fixed;
-  z-index: 9999999;
-  right: 1rem;
+  z-index: 5;
+  left: 1rem;
+  right: unset;
   bottom: -1px;
   border-radius: 0.2rem 0.2rem 0 0;
+  @media screen and (min-width: ${devices.desktop.width}px) {
+    right: 1rem;
+    left: unset;
+  }
 `;
 
 const ModalWrapper = styled(Modal)`