From 4b4dfed1a5b38eb346155110ce140aae0c792307 Mon Sep 17 00:00:00 2001
From: apoorvlathey <latheyapoorv@gmail.com>
Date: Tue, 11 Oct 2022 13:19:53 +0530
Subject: [PATCH] make iframe responsive

---
 src/components/Body/index.tsx | 101 ++++++++++++++++++----------------
 src/components/Navbar.tsx     |   6 +-
 2 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/src/components/Body/index.tsx b/src/components/Body/index.tsx
index e611437..60f7610 100644
--- a/src/components/Body/index.tsx
+++ b/src/components/Body/index.tsx
@@ -840,46 +840,49 @@ function Body() {
                 >
                   <ModalHeader>Select a dapp</ModalHeader>
                   <ModalCloseButton />
-                  <ModalBody>
-                    <Box
-                      minH="30rem"
-                      maxH="30rem"
-                      overflow="scroll"
-                      overflowX="auto"
-                      overflowY="auto"
-                    >
-                      {(!safeDapps || !safeDapps[networkIndex]) && (
-                        <Center py="3rem" w="100%">
-                          <Spinner />
+                  <ModalBody maxH="30rem" overflow={"clip"}>
+                    {(!safeDapps || !safeDapps[networkIndex]) && (
+                      <Center py="3rem" w="100%">
+                        <Spinner />
+                      </Center>
+                    )}
+                    <Box pb="2rem" px={{ base: 0, md: "2rem" }}>
+                      {safeDapps && safeDapps[networkIndex] && (
+                        <Center pb="0.5rem">
+                          <InputGroup maxW="30rem">
+                            <Input
+                              placeholder="search 🔎"
+                              value={searchSafeDapp}
+                              onChange={(e) =>
+                                setSearchSafeDapp(e.target.value)
+                              }
+                            />
+                            {searchSafeDapp && (
+                              <InputRightElement width="3rem">
+                                <Button
+                                  size="xs"
+                                  variant={"ghost"}
+                                  onClick={() => setSearchSafeDapp("")}
+                                >
+                                  <CloseIcon />
+                                </Button>
+                              </InputRightElement>
+                            )}
+                          </InputGroup>
                         </Center>
                       )}
-                      <Box pb="2rem" px={{ base: 0, md: "2rem" }}>
-                        {safeDapps && safeDapps[networkIndex] && (
-                          <Center pb="1.5rem">
-                            <InputGroup maxW="30rem">
-                              <Input
-                                placeholder="search 🔎"
-                                value={searchSafeDapp}
-                                onChange={(e) =>
-                                  setSearchSafeDapp(e.target.value)
-                                }
-                              />
-                              {searchSafeDapp && (
-                                <InputRightElement width="3rem">
-                                  <Button
-                                    size="xs"
-                                    variant={"ghost"}
-                                    onClick={() => setSearchSafeDapp("")}
-                                  >
-                                    <CloseIcon />
-                                  </Button>
-                                </InputRightElement>
-                              )}
-                            </InputGroup>
-                          </Center>
-                        )}
-
-                        <SimpleGrid columns={{ base: 2, md: 3, lg: 4 }} gap={6}>
+                      <Box
+                        minH="30rem"
+                        maxH="30rem"
+                        overflow="scroll"
+                        overflowX="auto"
+                        overflowY="auto"
+                      >
+                        <SimpleGrid
+                          pt="1rem"
+                          columns={{ base: 2, md: 3, lg: 4 }}
+                          gap={6}
+                        >
                           {filteredSafeDapps &&
                             filteredSafeDapps.map((dapp, i) => (
                               <GridItem
@@ -930,18 +933,24 @@ function Body() {
               Connect
             </Button>
           </Center>
-          <Center mt="1rem" ml="-60" w="70rem">
+          <Center
+            mt="1rem"
+            ml={{ base: "-385", sm: "-315", md: "-240", lg: "-60" }}
+            px={{ base: "10rem", lg: 0 }}
+            w="70rem"
+          >
             {appUrl && (
-              <iframe
+              <Box
+                as="iframe"
+                w={{ base: "22rem", sm: "45rem", md: "55rem", lg: "1500rem" }}
+                h={{ base: "33rem", md: "35rem", lg: "38rem" }}
                 title="app"
                 src={appUrl}
                 key={iframeKey}
-                width="1500rem"
-                height="600rem"
-                style={{
-                  border: "1px solid white",
-                  background: "white",
-                }}
+                borderWidth="1px"
+                borderStyle={"solid"}
+                borderColor="white"
+                bg="white"
                 ref={iframeRef}
                 onLoad={() => setIsIFrameLoading(false)}
               />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index adb5e27..5e76ab2 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -23,7 +23,11 @@ function Navbar() {
       borderBottomColor={underlineColor[colorMode]}
     >
       <Spacer flex="1" />
-      <Heading maxW={["302px", "4xl", "4xl", "4xl"]}>
+      <Heading
+        maxW={["302px", "4xl", "4xl", "4xl"]}
+        fontSize={{ base: "2xl", md: "3xl" }}
+        pr="2rem"
+      >
         🎭 Impersonator 🕵️
       </Heading>
       <Flex flex="1" justifyContent="flex-end" alignItems={"center"}>