[bugfix] show header logo + align header buttons

the logo wasn’t showing on the small screen layout. this fixes that. it also neatly aligns the buttons in the header area.

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'>

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;

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 {

app/javascript/flavours/glitch/styles/gts/_config.scss

@@ -12,3 +12,4 @@
 /* 🧩 Components */
 @import "media-gallery";
 @import "status";
+@import "ui-header";

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};
 }

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;
+    }
+}