From 10e7fe56ab3bd28f5981b43ab87c68307cb9bea9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 7 Feb 2026 16:36:53 +0200
Subject: [PATCH] feat(website): add GitHub link on mobile

---
 apps/website/src/components/Header.css | 10 ++++++++-
 apps/website/src/components/Header.tsx | 28 +++++++++++++++++---------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/apps/website/src/components/Header.css b/apps/website/src/components/Header.css
index 5ed44eb19..ef2d1057d 100644
--- a/apps/website/src/components/Header.css
+++ b/apps/website/src/components/Header.css
@@ -87,9 +87,17 @@ header {
 
         .first-row {
             display: flex;
-            justify-content: space-between;
             align-items: center;
             width: 100%;
+            gap: 2em;
+
+            .banner {
+                flex-grow: 1;
+            }
+
+            .social-button {
+                align-items: center;
+            }
         }
 
         .menu-toggle {
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index fcf5577a0..d126d1e60 100644
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -41,6 +41,8 @@ export function Header(props: {repoStargazersCount: number}) {
                         <img src={logoPath} width="300" height="300" alt="Trilium Notes logo" />&nbsp;<span>Trilium Notes</span>
                     </a>
 
+                    <RepositoryButton repoStargazersCount={props.repoStargazersCount} className="mobile-only" />
+
                     <Link
                         href="#"
                         className="mobile-only menu-toggle"
@@ -69,17 +71,25 @@ export function Header(props: {repoStargazersCount: number}) {
                     <SocialButtons className="mobile-only" withText />
                 </nav>
 
-                <div class="desktop-only repository-button">
-                    <SocialButton
-                        name="GitHub"
-                        iconSvg={githubIcon}
-                        counter={`${(props.repoStargazersCount / 1000).toFixed(1)}K+`}
-                        url="https://github.com/TriliumNext/Trilium"
-                    />
-                </div>
-
+                <RepositoryButton repoStargazersCount={props.repoStargazersCount} className="desktop-only" />
                 <DownloadButton />
             </div>
         </header>
     );
 }
+
+function RepositoryButton({ repoStargazersCount, className }: {
+    repoStargazersCount: number;
+    className: string
+}){
+    return (
+        <div class={`repository-button ${className}`}>
+            <SocialButton
+                name="GitHub"
+                iconSvg={githubIcon}
+                counter={`${(repoStargazersCount / 1000).toFixed(1)}K+`}
+                url="https://github.com/TriliumNext/Trilium"
+            />
+        </div>
+    );
+}