Skip to content

fix: scale template overview title to avoid line wrap #483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
drankou merged 3 commits into from
Jul 1, 2026
Merged

fix: scale template overview title to avoid line wrap #483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0c1c7b
fix: scale template overview title to avoid line wrap
drankou Jun 30, 2026
042ec60
fix: lower template title min font size to 15px
drankou Jun 30, 2026
172abb5
fix: stack template overview skeleton header to match loaded layout
drankou Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/features/dashboard/templates/detail/overview/skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export function TemplateOverviewSkeleton() {
return (
<div className="flex flex-col gap-8">
<OverviewSection label="Template" divider={false}>
<div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
<div className="flex flex-col gap-1">
<Skeleton className="h-8 w-40" />
<Skeleton className="h-5 w-56" />
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/features/dashboard/templates/detail/overview/template-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import type { ReactNode } from 'react'
import type { CSSProperties, ReactNode } from 'react'
import type { TemplateDetail } from '@/core/modules/templates/models'
import { getTemplateDisplayName } from '@/features/dashboard/templates/helpers'
import { useClipboard } from '@/lib/hooks/use-clipboard'
Expand Down Expand Up @@ -35,8 +35,11 @@ export function TemplateSection({ template, teamSlug }: TemplateSectionProps) {

return (
<OverviewSection label="Template" divider={false}>
<div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
<h2 className="prose-value-big font-mono uppercase tracking-tight break-all">
<div className="@container flex flex-col gap-1">
Comment thread
drankou marked this conversation as resolved.
<h2
style={{ '--char-count': displayName.length } as CSSProperties}
className="prose-value-big-fit font-mono uppercase tracking-tight break-all"
>
{displayName}
</h2>
<TemplateIdCopy templateID={template.templateID} />
Expand Down
13 changes: 13 additions & 0 deletions src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,6 +591,19 @@
font-weight: 700 !important;
}

/* Scales a monospace value down by character count to fit its container's
* inline size, avoiding line wrap. Requires `--char-count` and a container
* query context (e.g. Tailwind's `@container`). 0.6 ≈ glyph advance per em. */
@utility prose-value-big-fit {
font-size: clamp(
0.9375rem,
calc(100cqi / (var(--char-count, 1) * 0.6)),
2rem
) !important;
line-height: 1.1 !important;
font-weight: 700 !important;
}

/* Loader utilities */
@utility loader {
display: inline-flex;
Expand Down
Loading