Responsive

src/App.css

@@ -48,6 +48,7 @@
   font-size: 1.5em;
   width: 100%;
   max-width: 100%;
+  flex-wrap: wrap;
 }
 .parsed-container {
   display: flex;
@@ -70,6 +71,7 @@
   /* max-width: calc(100% / 4); */
   /* flex-grow: 1; */
   text-overflow: ellipsis;
+  min-width: fit-content;
 }
 
 .defaults {
@@ -147,10 +149,12 @@
 .robot-container {
   /* left: 0; */
   display: flex;
+  margin: 0 1rem 1rem 1rem;
 }
 .robot-text-container {
-  width: 50ch;
+  /* width: 50ch; */
   align-self: center;
+  width: fit-content;
 }
 .robot-text {
   /* width: max-content; */
@@ -215,37 +219,48 @@
 .copy-icon {
   width: 24px;
   height: 24px;
-  pointerevents: none;
+  pointer-events: none;
 }
 .param-container:hover .copy-btn {
   opacity: 1;
   bottom: 4rem;
 }
 
 @media (max-width: 720px) {
-  .robot-container,
   .github-link {
     opacity: 0;
   }
   .robot-text-container {
     align-self: center;
   }
   .robot-container img {
-    display: none;
+    width: 100px;
+    height: 100px;
   }
-  .url-empty {
-    display: none;
+  .robot-text {
+    padding: 0.5rem;
   }
-  .mobile-msg {
-    display: block;
-    font-size: 1.5rem;
-    font-weight: bold;
-    opacity: 0.5;
+  .url-empty {
+    font-size: 2rem;
   }
   .app-header {
     font-size: 1.5rem;
   }
-  .robot-text {
+  .param-container {
+    min-width: auto;
+  }
+}
+@media (max-width: 480px) {
+  .robot-container img {
     display: none;
   }
+  .robot-text {
+    font-size: 0.8rem;
+    margin-bottom: 1rem;
+  }
+}
+@media (max-width: 420px) {
+  .url-empty {
+    font-size: 1.2rem;
+  }
 }

src/App.js

@@ -95,7 +95,7 @@ function App() {
     return () => {
       window.removeEventListener("keydown", keyDownHandler);
     };
-  }, []);
+  }, [keyDownHandler]);
 
   useEffect(() => {
     if (url.startsWith("http")) {
@@ -165,7 +165,7 @@ function App() {
       ) : (
         <div>
           <div className="url-empty">Paste any URL on this page</div>
-          <div className="mobile-msg">Works on desktop only</div>
+          {/* <div className="mobile-msg">Works on desktop only</div> */}
         </div>
       )}
       <div className="robot-container">

src/Components/ParsedContainer.js

@@ -1,9 +1,10 @@
 // import { ArcherContainer, ArcherElement } from "react-archer";
 import { useState } from "react";
 import { motion } from "framer-motion";
-
+import { useMediaQuery } from "../hooks/MediaQuery";
 export const ParsedContainer = ({ parsed, robotParam, paramCount }) => {
   const [isCopied, setIsCopied] = useState(false);
+  const isSmall = useMediaQuery("(max-width: 1300px)");
   const parameters = [
     "protocol",
     "hostname",
@@ -45,7 +46,7 @@ export const ParsedContainer = ({ parsed, robotParam, paramCount }) => {
       <motion.div
         className="pasted-url"
         initial={{ gap: 0 }}
-        animate={{ gap: "3rem" }}
+        animate={{ gap: isSmall ? "5rem" : "3rem" }}
         transition={{ delay: 0.5 }}
       >
         {parameters.map((param) => {

src/hooks/MediaQuery.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+export function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => {
+      setMatches(media.matches);
+    };
+    media.addListener(listener);
+    return () => media.removeListener(listener);
+  }, [matches, query]);
+
+  return matches;
+}