Downscale navigation on very small screens

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}
       />

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">
+            <div className="flex items-center space-x-1.5 ssm:space-x-3 pointer-events-auto">
-              <Link className="block tabbable rounded-full" to="/">
+              <Link
+                className="block tabbable rounded-full text-xs ssm:text-base"
+                to="/"
+              >
                 <BrandPill clickable />
               </Link>
               <a

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;