mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-23 06:10:32 +00:00
7ddf71d91b
*PR Created by the Glary-Bot Agent* --- ## Summary The 10px star count text inside the desktop nav GitHub star badge rendered vertically off-center in Safari/WebKit. The text was visibly shifted upward inside the yellow badge body, while Chromium rendered it centered correctly. ## Root cause `NodeBadge.vue` centers its inner text span by setting `flex items-center justify-center` on the segment, then nudging the text with `translate-y-1` (or `translate-y-0` for the small variant). The text span itself is an `inline-block` with no explicit `line-height`, so it inherits the default `line-height: 1.5` (15px for a 10px font). Safari and Chromium distribute that extra leading differently for the `PP Formula Narrow` custom font: Safari pushes the glyph higher inside its 15px line box, while Chromium positions it near the middle. With only a 5px gap above/below the glyph to play with, that browser-specific divergence is enough to make the badge look misaligned in Safari. ## Fix Add `leading-none` to the star count text class so the inline-block's line box equals the font size (10px) and the parent flex container's `items-center` produces deterministic vertical centering across browsers. Verified at lg breakpoint (1440×900) in both WebKit and Chromium via Playwright; the badge now renders identically and is properly centered. ## Verification - `pnpm typecheck` (website) — clean - `pnpm build` (website) — 51 pages built successfully - Pre-commit hooks (stylelint, oxfmt, oxlint, eslint, typecheck, typecheck:website) — all passed - Visual inspection in WebKit and Chromium via Playwright Fixes FE-648 ## Screenshots    ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12138-fix-website-center-GitHubStarBadge-text-in-Safari-35d6d73d3650818aa0e8e0f341b60378) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { cn } from '@comfyorg/tailwind-utils'
|
|
|
|
const {
|
|
segments,
|
|
segmentClass = 'px-6',
|
|
textClass = 'text-2xl sm:text-3xl lg:text-5xl',
|
|
sizeClass = ''
|
|
} = defineProps<{
|
|
segments: Array<{ text?: string; logoSrc?: string; logoAlt?: string }>
|
|
segmentClass?: string
|
|
textClass?: string
|
|
sizeClass?: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="
|
|
cn(
|
|
'font-formula-narrow flex h-11 items-stretch font-semibold **:select-none sm:h-auto',
|
|
sizeClass
|
|
)
|
|
"
|
|
>
|
|
<img
|
|
src="/icons/node-left.svg"
|
|
alt=""
|
|
class="-mx-px h-full w-auto self-stretch"
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<template
|
|
v-for="(segment, i) in segments"
|
|
:key="segment.text || segment.logoSrc || i"
|
|
>
|
|
<img
|
|
v-if="i > 0"
|
|
src="/icons/node-union.svg"
|
|
alt=""
|
|
class="-mx-px h-full w-auto self-stretch"
|
|
aria-hidden="true"
|
|
/>
|
|
<span
|
|
:class="
|
|
cn(
|
|
'bg-primary-comfy-yellow text-primary-comfy-ink flex items-center justify-center py-1.5 transition-all duration-300 sm:py-3 lg:py-5',
|
|
segmentClass
|
|
)
|
|
"
|
|
>
|
|
<img
|
|
v-if="segment.logoSrc"
|
|
:src="segment.logoSrc"
|
|
:alt="segment.logoAlt ?? ''"
|
|
class="inline-block h-5 brightness-0 transition-all duration-300 sm:h-7 lg:h-10"
|
|
/>
|
|
<span
|
|
v-else
|
|
:class="
|
|
cn(
|
|
'inline-block translate-y-1 font-bold whitespace-nowrap transition-all duration-300',
|
|
textClass
|
|
)
|
|
"
|
|
>
|
|
{{ segment.text }}
|
|
</span>
|
|
</span>
|
|
</template>
|
|
|
|
<img
|
|
src="/icons/node-right.svg"
|
|
alt=""
|
|
class="-mx-px h-full w-auto self-stretch"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
</template>
|