From 9edde535bb06e8786d7de9ec5a390f6b2cf76d10 Mon Sep 17 00:00:00 2001
From: AramJonghu <aramjonghu@tutamail.com>
Date: Fri, 31 Jul 2026 18:29:41 +0200
Subject: [PATCH] feat(mobile): improve mobile view by introducing css for
 small devices

---
 frontend/src/components/Footer.tsx      | 32 +++++++++++++++----------
 frontend/src/components/Header.tsx      |  6 ++---
 frontend/src/components/ProjectInfo.tsx |  8 +++----
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index edde8c3..9756604 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -15,28 +15,34 @@ export default function Footer() {
     };
 
     return (
-        <footer className="bg-ctp-mantle flex items-center justify-between px-24 py-6 border-t border-ctp-lavender-800 mt-10">
+        <footer className="bg-ctp-mantle flex flex-col md:flex-row items-center justify-between gap-3 px-4 md:px-24 py-6 border-t border-ctp-lavender-800 mt-10">
             <p className="text-sm text-ctp-text">
                 &copy; {currentYear} AramJonghu. All rights reserved.
             </p>
-            <div className="flex">
-                <p className="text-sm text-ctp-text">
+            <div className="flex items-center">
+                <p className="text-sm text-ctp-text hidden sm:block">
                     Check out the website repository here:
                 </p>
 
-                <img
-                    src={forgejo}
-                    alt="Forgejo repository"
+                <button
                     onClick={goToForgejo}
-                    className="ml-2 w-6 h-6 cursor-pointer hover:opacity-80 transition-opacity"
-                />
+                    aria-label="Forgejo repository"
+                    className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
+                >
+                    <img
+                        src={forgejo}
+                        alt="Forgejo repository"
+                        className="w-7 h-7"
+                    />
+                </button>
 
-                <img
-                    src={gitea}
-                    alt="Gitea mirror"
+                <button
                     onClick={goToGitea}
-                    className="ml-2 w-6 h-6 cursor-pointer hover:opacity-80 transition-opacity"
-                />
+                    aria-label="Gitea mirror"
+                    className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
+                >
+                    <img src={gitea} alt="Gitea mirror" className="w-7 h-7" />
+                </button>
             </div>
         </footer>
     );
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index d83526d..9ef3b23 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -31,7 +31,7 @@ export default function Header({ theme }: HeaderProps) {
     };
 
     return (
-        <header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
+        <header className="bg-ctp-mantle flex justify-between items-center px-4 md:px-12 py-4 md:py-6 gap-4 md:gap-6 border-b border-ctp-lavender-800">
             <img
                 className="size-16 cursor-pointer"
                 src={Aku}
@@ -39,12 +39,12 @@ export default function Header({ theme }: HeaderProps) {
                 onClick={goHome}
             />
 
-            <nav className="flex flex-wrap gap-3 items-center">
+            <nav className="flex flex-wrap justify-end gap-2 md:gap-3 items-center">
                 {navItems.map((item) => (
                     <a
                         key={item.label}
                         href={item.url}
-                        className="ui-btn ui-btn:hover"
+                        className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
                     >
                         {item.label}
                     </a>
diff --git a/frontend/src/components/ProjectInfo.tsx b/frontend/src/components/ProjectInfo.tsx
index 2c71f4b..1b94013 100644
--- a/frontend/src/components/ProjectInfo.tsx
+++ b/frontend/src/components/ProjectInfo.tsx
@@ -10,19 +10,19 @@ export default function ProjectInfo(): ReactElement {
 
     return (
         <>
-            <div className="flex justify-between mx-30 mb-6">
+            <div className="flex justify-between items-center gap-2 mx-4 md:mx-30 mb-6">
                 <button
                     onClick={prevProject}
-                    className="px-3 py-1 rounded ui-btn text-ctp-text"
+                    className="shrink-0 px-3 py-1 rounded ui-btn text-ctp-text"
                 >
                     ◀︎ Prev
                 </button>
-                <span className="self-center mx-6 text-ctp-mauve text-2xl font-bold">
+                <span className="self-center min-w-0 truncate mx-2 md:mx-6 text-ctp-mauve text-xl md:text-2xl font-bold">
                     {projects[projIdx].name} ({projIdx + 1}/{projects.length})
                 </span>
                 <button
                     onClick={nextProject}
-                    className="px-3 py-1 rounded ui-btn text-ctp-text"
+                    className="shrink-0 px-3 py-1 rounded ui-btn text-ctp-text"
                 >
                     Next ▶︎
                 </button>