fix(css): header and sge view for small screens

src/components/Connection/SGEConnect/SgeConnect.scss

@@ -13,6 +13,8 @@
   top: 4rem;
   width: 100%;
   height: 92vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   @media (min-width: $width-large-phone) {
     top: 8rem;
     height: 85vh;

src/components/Connection/SGEConnect/SgeConnectView.tsx

@@ -142,6 +142,9 @@ const SgeConnectView: React.FC = () => {
         setHeaderHeight={defineHeaderHeight}
         desktopTitleKey={'common.title_sge_connect'}
         displayBackArrow={true}
+        backFunction={() =>
+          dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false }))
+        }
       ></Header>
       <Content height={headerHeight}>
         <div className="sge-view">

src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap

@@ -339,6 +339,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
       </BarRight>
     </CozyBar>
     <Header
+      backFunction={[Function]}
       desktopTitleKey="common.title_sge_connect"
       displayBackArrow={true}
       setHeaderHeight={[Function]}

src/components/Header/Header.tsx

-import React, { useCallback, useEffect, useRef } from 'react'
-import './header.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
+import IconButton from '@material-ui/core/IconButton'
 import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
 import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from '@material-ui/core/IconButton'
+import { ScreenType } from 'enum/screen.enum'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import './header.scss'
 
 interface HeaderProps {
   textKey?: string

src/components/Header/header.scss

@@ -22,17 +22,17 @@
       $dark-2 100%
     );
     width: 100%;
+    display: flex;
+    justify-content: flex-end;
     .header-text {
       padding: 0 1rem 1rem 1rem;
       color: $grey-bright;
     }
   }
   .header-content {
-    margin: 0 0 0 220px;
-    display: flex;
-    flex-direction: column;
+    width: 85%;
     @media #{$tablet} {
-      margin: 0;
+      width: 100%;
     }
     @media #{$large-phone} {
       margin: 60px 0 0 0;

src/styles/base/_layout.scss

@@ -45,76 +45,6 @@ body {
   color: #32363f;
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  z-index: $z-header;
-  position: fixed;
-  top: 48px;
-  left: 0;
-  @media #{$large-phone} {
-    top: 0;
-  }
-  .header-top {
-    background: radial-gradient(
-      circle,
-      rgba(52, 54, 65, 1) 0%,
-      rgba(27, 28, 34, 1) 100%
-    );
-    width: 100%;
-    .header-text {
-      padding: 0 1rem 1rem 1rem;
-      color: $grey-bright;
-    }
-  }
-  .header-content {
-    margin: 0 0 0 220px;
-    display: flex;
-    flex-direction: column;
-    @media #{$tablet} {
-      margin: 0;
-    }
-    @media #{$large-phone} {
-      margin: 60px 0 0 0;
-    }
-    .header-content-top {
-      display: flex;
-      flex-direction: row;
-      &.header-content-top-right {
-        justify-content: flex-end;
-      }
-      .header-text {
-        padding: 2rem 1rem;
-        flex: 1;
-      }
-      .header-text-desktop {
-        display: flex;
-        flex: 1;
-        padding: 2rem 1.25rem;
-        color: $grey-bright;
-      }
-      .header-back-button {
-        padding: 0 0.75rem;
-      }
-      @media #{$large-phone} {
-        .header-text {
-          padding: 0 1rem 1rem 1rem;
-          color: $grey-bright;
-        }
-        .header-text-desktop {
-          display: none;
-        }
-        .header-feedbacks-button {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
 .content-view-loading {
   height: 80vh;
   width: 100%;