From 00e57a932ff71fed5a71f6eb870d10064f1da6be Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sat, 16 Dec 2023 13:46:04 +0100
Subject: [PATCH] Downscale navigation on very small screens

---
 src/components/Avatar.tsx            |  4 +++-
 src/components/layout/Navigation.tsx |  7 +++++--
 tailwind.config.ts                   | 24 +++++++++++++++---------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 7a7b4882..894e50d6 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -66,7 +66,9 @@ export function UserAvatar(props: {
     <>
       <Avatar
         profile={auth.account.profile}
-        sizeClass={props.sizeClass ?? "w-[2rem] h-[2rem]"}
+        sizeClass={
+          props.sizeClass ?? "w-[1.5rem] h-[1.5rem] ssm:w-[2rem] ssm:h-[2rem]"
+        }
         iconClass={props.iconClass}
         bottom={props.bottom}
       />
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index d7cec107..3f8eb08f 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -79,8 +79,11 @@ export function Navigation(props: NavigationProps) {
       >
         <div className={classNames("fixed left-0 right-0 flex items-center")}>
           <div className="px-7 py-5 relative z-[60] flex flex-1 items-center justify-between">
-            <div className="flex items-center space-x-3 pointer-events-auto">
-              <Link className="block tabbable rounded-full" to="/">
+            <div className="flex items-center space-x-1.5 ssm:space-x-3 pointer-events-auto">
+              <Link
+                className="block tabbable rounded-full text-xs ssm:text-base"
+                to="/"
+              >
                 <BrandPill clickable />
               </Link>
               <a
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 83da3298..5e9b9a84 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,5 @@
 import { allThemes, defaultTheme, safeThemeList } from "./themes";
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const themer = require("tailwindcss-themer");
 
@@ -8,20 +8,25 @@ const config: Config = {
   safelist: safeThemeList,
   theme: {
     extend: {
+      /* breakpoints */
+      screens: {
+        ssm: "400px",
+      },
+
       /* fonts */
       fontFamily: {
-        "open-sans": "'Open Sans'"
+        "open-sans": "'Open Sans'",
       },
 
       /* animations */
       keyframes: {
         "loading-pin": {
           "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
-          "20%": { height: "1em", "background-color": "white" }
-        }
+          "20%": { height: "1em", "background-color": "white" },
+        },
       },
-      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
-    }
+      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
+    },
   },
   plugins: [
     require("tailwind-scrollbar"),
@@ -33,9 +38,10 @@ const config: Config = {
           selectors: [".theme-default"],
           ...defaultTheme,
         },
-        ...allThemes]
-    })
-  ]
+        ...allThemes,
+      ],
+    }),
+  ],
 };
 
 export default config;