From 9720e6faf48a6ead92340e4734010662c4e844c0 Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Tue, 19 Mar 2024 11:26:56 -0700
Subject: [PATCH] Make the header responsive

---
 src/web/src/components/header.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/web/src/components/header.jsx b/src/web/src/components/header.jsx
index b1985e6..cb01ef8 100644
--- a/src/web/src/components/header.jsx
+++ b/src/web/src/components/header.jsx
@@ -53,7 +53,13 @@ function Header() {
                   onClick={() => setActiveTab(tab.id)}
                   className={`${
                     activeTab === tab.id ? "" : ""
-                  } relative rounded-full px-3 py-1.5 text-sm text-light-foreground dark:text-dark-foreground transition-all focus-visible:outline-2`}
+                  } 
+                  flex justify-center relative rounded-full 
+                  lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5 sm:py-1.5
+                  lg:mr-8 md:mr-4 sm:mr-2 lg:mb-1 md:mb-1 sm:mb-1
+                  lg:text-4xl md:text-3xl sm:text-2xl font-bold text-light-foreground dark:text-dark-foreground
+                  transition-all focus-visible:outline-2
+                  `}
                   style={{
                     WebkitTapHighlightColor: "transparent",
                   }}
@@ -66,7 +72,7 @@ function Header() {
                   {activeTab === tab.id && (
                     <motion.div
                       layoutId="underline"
-                      className={`absolute inset-x-0 bottom-0 h-1 ${tabColors[tab.color]}`}
+                      className={`absolute inset-x-0 lg:bottom-0.5 md:bottom-0.5 sm:bottom-0.5 lg:h-1.5 md:h-1.5 sm:h-1 ${tabColors[tab.color]}`}
                       style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }}
                       transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                     />