Merge pull request #147 from horuslabsio/Chore-fix-burner-wallet-max-…

…width Chore fix the max width of burner wallet for tablet screens
horuslabsio · Aug 30, 2024 · 90eaf55 · 90eaf55
2 parents 68fe588 + 5bdcf4b
commit 90eaf55
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 30 deletions.
diff --git a/frontend/src/app/burner/BurnerWallet.tsx b/frontend/src/app/burner/BurnerWallet.tsx
@@ -6,7 +6,10 @@ import { useContractRead } from "@starknet-react/core";
 import { Account, RpcProvider } from "starknet";
 import Erc20Abi from "../../../public/abi/token.abi.json";
 import ContractExecutionModal from "./ContractExecutionModal";
-import { ETH_SEPOLIA, STRK_SEPOLIA } from "@/app/components/internal/helpers/constant";
+import {
+  ETH_SEPOLIA,
+  STRK_SEPOLIA,
+} from "@/app/components/internal/helpers/constant";
 import { formatCurrency } from "../components/internal/helpers";
 import CopyButton from "../components/internal/util/CopyButton";
 import AccountBalance from "../components/lib/AccountBalance";
@@ -76,9 +79,9 @@ function BurnerWallet({
 
   return (
     <>
-      <div className="w-[90vw] max-w-[35rem] p-2 md:p-8 lg:w-[45rem] lg:max-w-none lg:rounded-[16px] lg:border lg:border-[--borders]">
+      <div className="mx-auto w-[90vw] max-w-[35rem] p-2 md:max-w-[45rem] md:p-8 lg:w-[50vw] lg:rounded-[16px] lg:border lg:border-[--borders]">
         <div className="mb-4 flex items-center justify-between gap-4 border-b border-b-[#DADADA] py-4 md:mb-12">
-          <div className="flex flex-col md:items-center lg:flex-row lg:gap-4">
+          <div className="flex flex-col md:items-center lg:flex-row lg:flex-wrap lg:gap-4">
             <h2 className="mb-2 text-[--headings] md:text-l">
               Wallet Account {walletNumber}
             </h2>

diff --git a/frontend/src/app/burner/page.tsx b/frontend/src/app/burner/page.tsx
@@ -140,9 +140,9 @@ export default function Page() {
         </p>
       </div>
       <div
-        className={`mx-auto ${chain.network === "sepolia" ? "flex" : "hidden"} w-fit flex-col gap-4 lg:w-full lg:flex-row-reverse lg:justify-center`}
+        className={`mx-auto ${chain.network === "sepolia" ? "flex" : "hidden"} w-fit flex-col gap-4 md:w-full lg:flex-row-reverse lg:justify-center`}
       >
-        <div className="flex h-fit w-[90vw] max-w-[35rem] flex-col rounded-[16px] lg:w-full lg:max-w-[27rem] lg:flex-col-reverse lg:border lg:border-[--borders] lg:p-8">
+        <div className="mx-auto flex h-fit w-[90vw] max-w-[35rem] flex-col rounded-[16px] md:max-w-[40rem] lg:mx-0 lg:w-full lg:max-w-[27rem] lg:flex-col-reverse lg:border lg:border-[--borders] lg:p-8">
           <div className="my-8 flex gap-4 lg:my-0 lg:flex-col">
             <button
               disabled={!address}
@@ -236,7 +236,7 @@ export default function Page() {
               />
             </div>
           ) : (
-            <div className="mx-auto grid min-h-[20rem] w-[90vw] max-w-[35rem] place-content-center rounded-[16px] border border-[--borders] bg-[--modal-disconnect-bg] p-8 lg:w-[45rem] lg:max-w-none">
+            <div className="grid min-h-[20rem] w-[90vw] max-w-[35rem] place-content-center rounded-[16px] border border-[--borders] bg-[--modal-disconnect-bg] p-8 lg:w-[45rem] lg:max-w-none">
               <p>No burner wallets found</p>
             </div>
           )

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -72,7 +72,7 @@
   #nav[data-header="scroll-hide"]:hover {
     transform: translateY(0) !important;
   }
-  
+
   html,
   body {
     margin: 0;
@@ -102,12 +102,17 @@
     box-sizing: inherit;
   }
 
+  html {
+    zoom: 1;
+  }
+
   :root {
     --100vh: 100vh;
     --100svh: 100svh;
     --modal-h: 100svh;
   }
-  @media only screen and (max-width: 1600px) {
+
+  @media only screen and (max-width: 1600px) and (min-width: 768px) {
     html {
       zoom: 0.8;
     }
@@ -118,27 +123,6 @@
     }
   }
 
-  @media only screen and (max-width: 1024px) {
-    html {
-      zoom: 0.9;
-    }
-    :root {
-      --100vh: calc(100vh / 0.9);
-      --100svh: calc((100svh / 0.9) - (3rem / 0.9));
-      --modal-h: calc((100vh / 0.9) - 9rem);
-    }
-  }
-  @media only screen and (max-width: 768px) {
-    html {
-      zoom: 1;
-    }
-    :root {
-      --100vh: 100vh;
-      --100svh: 100svh;
-      --modal-h: 90svh;
-    }
-  }
-
   [popover] {
     transform: translateY(10%);
   }

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className="font-coolvetica text-sm text-text-primary lg:text-md">
+      <body className="font-coolvetica text-sm text-text-primary md:text-md">
         <StarknetProvider>{children}</StarknetProvider>
         <Footer />
       </body>