chore(web): modals width adjustment on mobile

Author: kemuru

web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx

@@ -9,10 +9,9 @@ import { useFocusOutside } from "hooks/useFocusOutside";
 const Container = styled.div<{ isVisible: boolean }>`
   display: ${({ isVisible }) => (isVisible ? "flex" : "none")};
   margin: 0 auto;
-  width: auto;
   z-index: 10;
   position: fixed;
-  width: 82vw;
+  width: 86vw;
   flex-direction: column;
 
   top: 45%;
@@ -35,7 +34,7 @@ const Container = styled.div<{ isVisible: boolean }>`
 const LeftContainer = styled.div`
   display: grid;
   grid-template-rows: auto 1fr auto;
-  width: 82vw;
+  width: 86vw;
   padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-bottom: 32px;
   background-color: ${({ theme }) => theme.whiteBackground};
@@ -116,7 +115,7 @@ const Close = styled.label`
 `;
 
 const RightContainer = styled.div`
-  width: 82vw;
+  width: 86vw;
   position: relative;
   display: flex;
   flex-direction: column;

web/src/components/Popup/index.tsx

@@ -52,7 +52,7 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 82vw;
+  width: 86vw;
   max-width: 600px;
   border-radius: 3px;
   border: 1px solid ${({ theme }) => theme.stroke};

web/src/layout/Header/navbar/DappList.tsx

@@ -33,7 +33,7 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
 
-  width: 82%;
+  width: 86vw;
   max-width: 480px;
   min-width: 300px;
   border-radius: 3px;

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -19,7 +19,7 @@ const Container = styled.div`
   position: absolute;
   max-height: 80vh;
   overflow-y: auto;
-  width: 82%;
+  width: 86vw;
   max-width: 444px;
   top: 5%;
   left: 50%;

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -45,7 +45,7 @@ const StyledSettingsText = styled.div`
 
 const StyledTabs = styled(Tabs)`
   padding: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  width: 82vw;
+  width: 86vw;
   max-width: 660px;
 
   ${landscapeStyle(