From 5d07d33eaa6d533f2a70148d376d1ef972f0f363 Mon Sep 17 00:00:00 2001
From: AramJonghu <aramjonghu@tutamail.com>
Date: Fri, 31 Jul 2026 19:51:33 +0200
Subject: [PATCH] chore(mobile view): more mobile view improvements e.g. item
 sizes

---
 frontend/src/App.css                    |  6 ++++-
 frontend/src/components/Header.tsx      | 34 ++++++++++++++++++++-----
 frontend/src/components/ProjectInfo.tsx |  2 +-
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 1a8cfb7..812b628 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -44,7 +44,11 @@
 }
 
 .ui-btn {
-    @apply text-ctp-text border border-ctp-text rounded px-3 py-1 cursor-pointer transition-colors;
+    @apply text-ctp-text border border-ctp-text rounded px-3 py-1 min-w-8 2xl:min-w-36 text-center cursor-pointer transition-colors;
+}
+
+.theme-ui-btn {
+    @apply text-ctp-text border border-ctp-text rounded px-3 py-1 min-w-10 text-center cursor-pointer transition-colors;
 }
 
 .ui-btn:hover {
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 9ef3b23..8190344 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -5,6 +5,11 @@ interface NavItem {
     url: string;
 }
 
+interface PageItem {
+    label: string;
+    url: string;
+}
+
 interface HeaderTheme {
     theme: string;
     toggleTheme: () => void;
@@ -21,11 +26,15 @@ export default function Header({ theme }: HeaderProps) {
         { label: "Nextcloud", url: "https://nextcloud.aramjonghu.dev" },
         { label: "Navidrome", url: "https://music.aramjonghu.dev" },
         { label: "Forgejo Git", url: "https://git.aramjonghu.dev" },
-        { label: "Stream", url: "/stream" },
         { label: "Omnisearch", url: "https://xng.aramjonghu.dev" },
         { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
     ];
 
+    const pageItems: PageItem[] = [
+        { label: "Stream", url: "/stream" },
+        { label: "Contact", url: "/contact" },
+    ];
+
     const goHome = () => {
         window.location.href = "/";
     };
@@ -39,21 +48,32 @@ export default function Header({ theme }: HeaderProps) {
                 onClick={goHome}
             />
 
-            <nav className="flex flex-wrap justify-end gap-2 md:gap-3 items-center">
-                {navItems.map((item) => (
+            <nav className="flex flex-wrap gap-2 md:gap-3 items-start">
+                {navItems.map((nav) => (
                     <a
-                        key={item.label}
-                        href={item.url}
+                        key={nav.label}
+                        href={nav.url}
                         className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
                     >
-                        {item.label}
+                        {nav.label}
+                    </a>
+                ))}
+            </nav>
+            <nav className="flex flex-wrap gap-2 md:gap-3 items-end">
+                {pageItems.map((page) => (
+                    <a
+                        key={page.label}
+                        href={page.url}
+                        className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
+                    >
+                        {page.label}
                     </a>
                 ))}
             </nav>
 
             <div>
                 <button
-                    className="ui-btn ui-btn:hover text-lg font-[NerdFontSymbols]"
+                    className="theme-ui-btn ui-btn:hover text-lg font-[NerdFontSymbols]"
                     onClick={toggleTheme}
                 >
                     {currentTheme === "macchiato" ? "" : ""}
diff --git a/frontend/src/components/ProjectInfo.tsx b/frontend/src/components/ProjectInfo.tsx
index 1b94013..5b5bada 100644
--- a/frontend/src/components/ProjectInfo.tsx
+++ b/frontend/src/components/ProjectInfo.tsx
@@ -17,7 +17,7 @@ export default function ProjectInfo(): ReactElement {
                 >
                     ◀︎ Prev
                 </button>
-                <span className="self-center min-w-0 truncate mx-2 md:mx-6 text-ctp-mauve text-xl md:text-2xl font-bold">
+                <span className="self-center min-w-0 truncate mx-2 md:mx-6 text-ctp-mauve lg:text-xl text-l font-bold">
                     {projects[projIdx].name} ({projIdx + 1}/{projects.length})
                 </span>
                 <button