vvzvlad/gitmost
1
0
Fork 0
Code Issues 14 Pull Requests 12 Packages Projects Releases Activity

fix(client): glue version string to logo on the app header baseline

Browse Source 
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.
This commit is contained in:
vvzvlad
2026-06-18 20:13:46 +03:00
parent 5d8860e47b
commit 8178d21c00
2 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/client/src/components/layouts/global/app-header.module.css
View File

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

39
apps/client/src/components/layouts/global/app-header.tsx
View File

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