Fix devices list (#905)

* Fix the z index and scrollbar * Force scroll * Fix zindex * Fix video while sharing height * spacing in devices list when mobile
Stooa · Feb 16, 2023 · 8f0e04a · 8f0e04a
1 parent fd66ccf
commit 8f0e04a
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 14 deletions.
diff --git a/frontend/src/components/App/ButtonMoreOptions/styles.ts b/frontend/src/components/App/ButtonMoreOptions/styles.ts
@@ -20,6 +20,7 @@ import {
 } from '@/ui/settings';
 import { media, rems, space } from '@/ui/helpers';
 import { BODY_SM, BODY_XS } from '@/ui/Texts';
+import { scrolllbarStyle } from '@/ui/Scrollbar';
 
 interface SelectorProps {
   bottom?: boolean;
@@ -81,17 +82,19 @@ const Selector = styled.div`
   ${({ top }: SelectorProps) =>
     top &&
     `bottom: calc(55% + ${space()});
-      right: 0;
+      right: 8px;
   `};
 
-  max-height: 45vh;
+  max-height: 47vh;
   width: ${rems(280)};
   background: ${COLOR_NEUTRO_100};
   border: 1px solid ${COLOR_NEUTRO_700};
   border-radius: ${BORDER_RADIUS};
   overflow-y: auto;
   z-index: 21;
 
+  ${scrolllbarStyle}
+
   & .recording-button {
     position: sticky;
     display: flex;
@@ -121,7 +124,7 @@ const Selector = styled.div`
   ${media.min('tablet')`
     top: initial;
     bottom: calc(100% + ${space()});
-    max-height: ${rems(350)};
+    max-height: ${rems(430)};
   `}
 `;
 

diff --git a/frontend/src/components/App/Fishbowl/index.tsx b/frontend/src/components/App/Fishbowl/index.tsx
@@ -36,6 +36,7 @@ import { useModals } from '@/contexts/ModalsContext';
 import ModalScreenSharePermissions from '@/components/App/ModalScreenSharePermissions';
 import ModalStartRecording from '@/components/App/ModalStartRecording';
 import ModalStopRecording from '@/components/App/ModalStopRecording';
+import ModalShareLink from '@/components/App/ModalShareLink';
 import { toast } from 'react-toastify';
 import useTranslation from 'next-translate/useTranslation';
 import Conference from '@/jitsi/Conference';
@@ -171,6 +172,8 @@ const Fishbowl: FC = () => {
       <Main className={participantsActive ? 'drawer-open' : ''}>
         <HackLeaveHover onMouseEnter={handleModeratorIsGonnaLeave} />
 
+        <ModalShareLink />
+
         {/* MODALS */}
         {showConfirmCloseTabModal && (
           <ModalConfirmLeaving

diff --git a/frontend/src/components/App/Header/index.tsx b/frontend/src/components/App/Header/index.tsx
@@ -14,7 +14,6 @@ import { toast } from 'react-toastify';
 
 import { useStooa } from '@/contexts/StooaManager';
 import { Header as HeaderStyled } from '@/layouts/App/styles';
-import ModalShareLink from '@/components/App/ModalShareLink';
 import { ROUTE_HOME } from '@/app.config';
 import StatusRecording from '../StatusRecording';
 import RedRec from '@/ui/svg/rec-red.svg';
@@ -88,9 +87,6 @@ const Header: React.FC<Props> = ({ toggleParticipants, participantsActive, isPre
           </>
         )}
       </div>
-      <div className="header-share">
-        <ModalShareLink />
-      </div>
       <StatusRecording className="hide-mobile" showAnimation={isRecording} />
       <div className="header-actions">
         {isModerator && (

diff --git a/frontend/src/components/App/Seats/styles.ts b/frontend/src/components/App/Seats/styles.ts
@@ -272,6 +272,10 @@ const SeatsStyled = styled.div`
         grid-column: span 4;
         height: 20vh;
         min-height: 180px;
+
+        @media (min-height: 1024px) and (max-width: 1024px) {
+          height: 30vh;
+        }
       }
 
       & #seat-2,
@@ -394,10 +398,6 @@ const SeatsStyled = styled.div`
           height: 40vh;
         }
 
-        & #seat-1 {
-          height: 100%;
-        }
-
       `}
     }
 
@@ -435,6 +435,7 @@ const SeatsStyled = styled.div`
         }
 
         #seat-1 {
+          height: 100%;
           grid-column: span 2;
           grid-row: initial;
         }

diff --git a/frontend/src/layouts/App/styles.ts b/frontend/src/layouts/App/styles.ts
@@ -61,7 +61,7 @@ const Header = styled.header`
   justify-content: space-between;
   grid-area: Header;
   color: ${COLOR_NEUTRO_700};
-  z-index: 10;
+  z-index: 50;
 
   ${media.max('tablet')`
 
@@ -149,7 +149,7 @@ const Main = styled.main`
 const Footer = styled.footer`
   grid-area: Footer;
   position: relative;
-  z-index: 9;
+  z-index: 40;
 
   ${media.min('tablet')`
     display: grid;

diff --git a/frontend/src/ui/Globals.ts b/frontend/src/ui/Globals.ts
@@ -272,6 +272,7 @@ const GlobalStyle = createGlobalStyle`
 
 
       &.Toastify__toast-container {
+        --toastify-z-index: 30;
         ${media.max('tablet')`
           width: 92%;
           left: 50%;

diff --git a/frontend/src/ui/Modal.ts b/frontend/src/ui/Modal.ts
@@ -32,7 +32,7 @@ const Modal = styled.div`
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 11;
+  z-index: 50;
   overflow: scroll;
 
   ${media.min('tablet')`