From 3bb3119fafc2987cf01c6ba4f58de57411bab7ea Mon Sep 17 00:00:00 2001
From: Phil-Ah <philipp.ahrendt@cloudogu.com>
Date: Thu, 9 Jun 2022 10:14:15 +0200
Subject: [PATCH] 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 |  2 ++
 scm-ui/ui-webapp/src/containers/App.tsx           |  2 +-
 scm-ui/ui-webapp/src/containers/Feedback.tsx      | 11 ++++++++---
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 gradle/changelog/feedback_overlaps_warp_menu.yaml

diff --git a/gradle/changelog/feedback_overlaps_warp_menu.yaml b/gradle/changelog/feedback_overlaps_warp_menu.yaml
new file mode 100644
index 0000000000..65de1ace40
--- /dev/null
+++ b/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))
diff --git a/scm-ui/ui-webapp/src/containers/App.tsx b/scm-ui/ui-webapp/src/containers/App.tsx
index 13ea69d7a3..d7e8c1106b 100644
--- a/scm-ui/ui-webapp/src/containers/App.tsx
+++ b/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>
   );
diff --git a/scm-ui/ui-webapp/src/containers/Feedback.tsx b/scm-ui/ui-webapp/src/containers/Feedback.tsx
index ae985c780f..70a3fd9fa9 100644
--- a/scm-ui/ui-webapp/src/containers/Feedback.tsx
+++ b/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)`