fix: some layout adjustments

kleros · Sep 2, 2023 · 0b69de6 · 0b69de6
1 parent d133b69
commit 0b69de6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { smallScreenStyle } from "styles/smallScreenStyle";
+import { BREAKPOINT_TABLET_SCREEN, smallScreenStyle } from "styles/smallScreenStyle";
 import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi";
 import Identicon from "react-identicons";
 import { shortenAddress } from "utils/shortenAddress";
-
+import { useWindowWidth } from "~src/hooks/useWindowWidth";
 const Container = styled.div`
   display: flex;
   flex-direction: row;
@@ -133,15 +133,21 @@ export const ChainDisplay: React.FC = () => {
 };
 
 const AccountDisplay: React.FC = () => {
+  const windowWidth = useWindowWidth();
+
+  const screenIsBig = windowWidth > BREAKPOINT_TABLET_SCREEN;
+
   return (
     <Container>
       <AccountContainer>
         <IdenticonOrAvatar size="32" />
         <AddressOrName />
       </AccountContainer>
-      <ChainConnectionContainer>
-        <ChainDisplay />
-      </ChainConnectionContainer>
+      {screenIsBig && (
+        <ChainConnectionContainer>
+          <ChainDisplay />
+        </ChainConnectionContainer>
+      )}
     </Container>
   );
 };

diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx
@@ -30,17 +30,17 @@ const LeftSide = styled.div`
 `;
 
 const MiddleSide = styled.div`
+  display: flex;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  display: flex;
   color: ${({ theme }) => theme.white} !important;
 `;
 
 const RightSide = styled.div`
   display: flex;
-  gap: 16px;
-
+  gap: calc(8px + (16 - 8) * ((100vw - 300px) / (1024 - 300)));
+  margin-left: 8px;
   canvas {
     width: 20px;
   }

diff --git a/web/src/styles/smallScreenStyle.ts b/web/src/styles/smallScreenStyle.ts
@@ -1,6 +1,7 @@
 import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from "styled-components";
 
-export const BREAKPOINT_SMALL_SCREEN = 1000;
+export const BREAKPOINT_SMALL_SCREEN = 768;
+export const BREAKPOINT_TABLET_SCREEN = 1024;
 
 export const smallScreenStyle = (styleFn: () => FlattenInterpolation<ThemeProps<DefaultTheme>>) => css`
   @media (max-width: ${BREAKPOINT_SMALL_SCREEN}px) {