From 8178d21c003061709cf327b8acb7347f58ff2bcc Mon Sep 17 00:00:00 2001
From: vvzvlad <git@vvzvlad.xyz>
Date: Thu, 18 Jun 2026 20:13:46 +0300
Subject: [PATCH] fix(client): glue version string to logo on the app header
 baseline

Wrap the logo link and the APP_VERSION text into a single bottom-aligned
Group so they read as one lockup ("gitmost v0.9..."). Move the version
styling into a new .brandVersion CSS class: shrink it from 12px to 10px,
keep the dimmed color and selectability, and lift it via margin-bottom so
its text baseline sits on the wordmark baseline of the 30px desktop logo
(derived from the logo SVG geometry). Drop the redundant lh prop.
---
 .../layouts/global/app-header.module.css      | 14 +++++++
 .../components/layouts/global/app-header.tsx  | 39 +++++++++----------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/apps/client/src/components/layouts/global/app-header.module.css b/apps/client/src/components/layouts/global/app-header.module.css
index a70b57e7..7cdec643 100644
--- a/apps/client/src/components/layouts/global/app-header.module.css
+++ b/apps/client/src/components/layouts/global/app-header.module.css
@@ -20,6 +20,20 @@
     align-items: center;
 }
 
+.brandVersion {
+    /* Render the version smaller than before (was Mantine "xs" = 12px). */
+    font-size: rem(10px);
+    line-height: 1;
+    color: var(--mantine-color-dimmed);
+    white-space: nowrap;
+    user-select: text;
+    /* Lift the version so its text baseline sits on the logo wordmark baseline.
+       The wordmark baseline is at ~31% of the logo height above the image bottom
+       (SVG baseline y=42.689 in a -7.25..65.25 viewBox); for the 30px desktop logo
+       that is ~9.3px, minus the font descent (~2px) ≈ 7px. */
+    margin-bottom: rem(7px);
+}
+
 .link {
     display: block;
     line-height: 1;
diff --git a/apps/client/src/components/layouts/global/app-header.tsx b/apps/client/src/components/layouts/global/app-header.tsx
index cd30c321..fc8e769a 100644
--- a/apps/client/src/components/layouts/global/app-header.tsx
+++ b/apps/client/src/components/layouts/global/app-header.tsx
@@ -77,27 +77,26 @@ export function AppHeader() {
             />
           </Tooltip>
 
-          <Link to="/home" className={classes.brand} aria-label="Gitmost">
-            <Box hiddenFrom="sm" className={classes.brandIcon}>
-              <BrandLogo markOnly height={26} />
-            </Box>
-            <Box visibleFrom="sm" className={classes.brandIcon}>
-              <BrandLogo height={30} />
-            </Box>
-          </Link>
+          <Group gap={6} align="flex-end" wrap="nowrap">
+            <Link to="/home" className={classes.brand} aria-label="Gitmost">
+              <Box hiddenFrom="sm" className={classes.brandIcon}>
+                <BrandLogo markOnly height={26} />
+              </Box>
+              <Box visibleFrom="sm" className={classes.brandIcon}>
+                <BrandLogo height={30} />
+              </Box>
+            </Link>
 
-          <Tooltip label={t("Version")}>
-            <Text
-              size="xs"
-              c="dimmed"
-              lh={1}
-              ml="md"
-              visibleFrom="sm"
-              style={{ userSelect: "text", whiteSpace: "nowrap" }}
-            >
-              {APP_VERSION}
-            </Text>
-          </Tooltip>
+            <Tooltip label={t("Version")}>
+              <Text
+                component="span"
+                visibleFrom="sm"
+                className={classes.brandVersion}
+              >
+                {APP_VERSION}
+              </Text>
+            </Tooltip>
+          </Group>
 
           <Group ml="xl" gap={5} className={classes.links} visibleFrom="sm">
             {items}