Responsive navigation

src/components/buttons/IconPatch.tsx

@@ -14,7 +14,7 @@ export function IconPatch(props: IconPatchProps) {
       <div
         className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
           props.clickable
-            ? "hover:bg-denim-400 m-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
+            ? "hover:bg-denim-400 mx-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
             : ""
         } ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
       >

src/components/layout/Navigation.tsx

@@ -11,16 +11,16 @@ export interface NavigationProps {
 
 export function Navigation(props: NavigationProps) {
   return (
-    <div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7">
-      <div className="flex items-center justify-center">
-        <div className="mr-6">
+    <div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7 min-h-[88px]">
+      <div className="flex items-center justify-center w-full sm:w-fit">
+        <div className="mr-auto sm:mr-6">
           <Link to="/">
             <BrandPill clickable />
           </Link>
         </div>
         {props.children}
       </div>
-      <div className="flex">
+      <div className={props.children ? "hidden sm:flex" : "flex"}>
         <a
           href={DISCORD_LINK}
           target="_blank"

src/components/text/ArrowLink.tsx

@@ -26,7 +26,7 @@ export function ArrowLink(props: ArrowLinkProps) {
   const isExternal = !!(props as IArrowLinkPropsExternal).url;
   const isInternal = !!(props as IArrowLinkPropsInternal).to;
   const content = (
-    <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95">
+    <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95 mt-1 pr-1">
       {direction === "left" ? (
         <span className="text-xl transition-transform group-hover:-translate-x-1">
           <Icon icon={Icons.ARROW_LEFT} />