From 60731df27723c24dfb3884ec3ece3bdb585e0e73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zoe=CC=88=20Bijl?= <code@moiety.me>
Date: Fri, 24 Oct 2025 10:44:30 +0200
Subject: [PATCH] [bugfix] show header logo + align header buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the logo wasn’t showing on the small screen layout. this fixes that. it also neatly aligns the buttons in the header area.
---
 .../glitch/features/ui/components/header.jsx  |  5 +-
 .../glitch/styles/components/columns.scss     | 51 -------------------
 .../styles/components/single_column.scss      |  2 +-
 .../flavours/glitch/styles/gts/_config.scss   |  1 +
 .../flavours/glitch/styles/gts/sizes.scss     |  1 +
 .../flavours/glitch/styles/gts/ui-header.scss | 43 ++++++++++++++++
 6 files changed, 48 insertions(+), 55 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/styles/gts/ui-header.scss

diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx
index 159b109d7..56231832d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx
@@ -19,7 +19,7 @@ const Account = connect(state => ({
   account: state.getIn(["accounts", me]),
 }))(({ account }) => (
   <Permalink href={account.get("url")} to={`/@${account.get("acct")}`} title={account.get("acct")}>
-    <Avatar account={account} size={35} />
+    <Avatar account={account} size={34} />
   </Permalink>
 ));
 
@@ -108,8 +108,7 @@ class Header extends PureComponent {
     return (
       <div className='ui__header'>
         <Link to='/' className='ui__header__logo'>
-          <WordmarkLogo />
-          <SymbolLogo />
+          <Icon id='gts-simple' />
         </Link>
 
         <div className='ui__header__links'>
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index e3b2feb54..94c7581c2 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -56,57 +56,6 @@
 
 $ui-header-height: 55px;
 
-.ui__header {
-  display: none;
-  box-sizing: border-box;
-  height: $ui-header-height;
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  justify-content: space-between;
-  align-items: center;
-
-  &__logo {
-    display: inline-flex;
-    padding: 15px;
-
-    .logo {
-      height: $ui-header-height - 30px;
-      width: auto;
-    }
-
-    .logo--wordmark {
-      display: none;
-    }
-
-    @media screen and (width >= 320px) {
-      .logo--wordmark {
-        display: block;
-      }
-
-      .logo--icon {
-        display: none;
-      }
-    }
-  }
-
-  &__links {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 0 10px;
-    overflow: hidden;
-
-    .button {
-      flex: 0 0 auto;
-    }
-
-    .button-tertiary {
-      flex-shrink: 1;
-    }
-  }
-}
-
 .tabs-bar__wrapper {
   background: darken($ui-base-color, 8%);
   position: sticky;
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index a5012f56c..8e00f2eab 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -277,8 +277,8 @@
 
   .layout-single-column .ui__header {
     display: flex;
-    background: $ui-base-color;
     border-bottom: 1px solid lighten($ui-base-color, 8%);
+    background: $ui-base-color;
   }
 
   .layout-single-column {
diff --git a/app/javascript/flavours/glitch/styles/gts/_config.scss b/app/javascript/flavours/glitch/styles/gts/_config.scss
index 32e914887..891676067 100644
--- a/app/javascript/flavours/glitch/styles/gts/_config.scss
+++ b/app/javascript/flavours/glitch/styles/gts/_config.scss
@@ -12,3 +12,4 @@
 /* 🧩 Components */
 @import "media-gallery";
 @import "status";
+@import "ui-header";
diff --git a/app/javascript/flavours/glitch/styles/gts/sizes.scss b/app/javascript/flavours/glitch/styles/gts/sizes.scss
index 4dc4d3195..04a0a2628 100644
--- a/app/javascript/flavours/glitch/styles/gts/sizes.scss
+++ b/app/javascript/flavours/glitch/styles/gts/sizes.scss
@@ -11,4 +11,5 @@
     /* Components */
     --size-avatar: 46px;
     --size-icon: 20px;
+    --size-header-block: #{$ui-header-height};
 }
diff --git a/app/javascript/flavours/glitch/styles/gts/ui-header.scss b/app/javascript/flavours/glitch/styles/gts/ui-header.scss
new file mode 100644
index 000000000..2ab88b50e
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/ui-header.scss
@@ -0,0 +1,43 @@
+/* 🧑‍💻 UI: Header */
+.ui__header {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-start: 7px;
+    height: var(--size-header-block);
+    box-sizing: border-box;
+
+    svg.gts-icon {
+        display: block;
+    }
+}
+
+.ui__header__logo {
+    --size-icon: 32px;
+    padding: 8px;
+}
+
+.ui__header__links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-inline: 10px;
+    overflow: hidden;
+
+    a {
+        display: flex;
+        align-items: center;
+        line-height: 20px;
+    }
+
+    .button {
+        flex: 0 0 auto;
+    }
+
+    .button-tertiary {
+        flex-shrink: 1;
+    }
+}