mirror of
https://github.com/multica-ai/multica.git
synced 2026-08-12 10:59:06 +02:00
7803a5b9ea
tokens.css defined colours, radii and font families but not a single --text-* step, so font sizes had no baseline to align to and grew wherever they were needed: 51 distinct sizes across web + desktop, 370 written as arbitrary values, six at half a pixel (10.5 / 11.5 / 12.5 / 13.5 / 14.5 / 15.5px). text-xs and text-sm carried nearly all UI text while the range between them — 11, 13, 15px — could only be reached with arbitrary values. Hierarchy does not come from having more sizes; past a handful, each extra size makes the hierarchy blurrier. Add ten role-named steps, each with its own line-height so leading cannot fragment the way size did, and move every product-UI call site onto them. Steps are named for what the text is for, not for a t-shirt size, because that is what keeps the scale from drifting again. Six steps deliberately keep the exact size/line-height pairs of the Tailwind defaults they replace, so the ~1,900-call-site rename moves nothing on screen. The visible changes are confined to former arbitrary values snapping to a step: 8/9/10px -> micro (11px) on badges and overlines; 17 -> 18; 22 -> 24; 30 (text-3xl) -> 36 on headings and stat numbers; 12.8px -> label (13px) on small buttons and toggles. Half-pixel sizes are gone. This supersedes #6108, which was reverted by #6116 because the sidebar group labels rendered at the inherited 16px. The cause was not the scale but cn(): `text-<x>` is ambiguous in Tailwind, and tailwind-merge resolves it against a table listing only the default sizes, so it filed every role step under text-colour and dropped whichever of `text-caption` / `text-sidebar-foreground/70` came first. Registering the steps as a font-size class group restores the real conflict groups — size beats size, colour beats colour, the two coexist — and a test pins the list against the scale, since the failure is silent in source. Hand-written CSS is covered too. The transcript kept a 12.5px body long after every Tailwind call site was on the scale, so the "no half-pixel sizes" claim was true of the classes and false of the product; the editor's prose, code and mermaid ramps had the same blind spot, and seven of their eight values already equalled a step exactly. All now reference var(--text-*). The guard test reads raw `font-size:` declarations as well as class names, exempting only the 16px iOS input-zoom workaround in base.css and the landing pages' marketing ramp. apps/mobile (own NativeWind config) and apps/docs (fumadocs' own type system) keep Tailwind's default scale and are untouched. Landing display type (rem/clamp, 2.2-6.4rem) stays on its separate ramp, as do four decorative emoji / serif-hero sizes. Verified on a running local stack: pinned sidebar rows and group labels measure 12px/16px, nav items 14px/20px — identical to pre-migration. An audit of every rendered font size across the product surfaces finds nothing off the scale; the only exceptions are avatar initials and emoji, which actor-avatar.tsx sizes proportionally to the avatar diameter by design. Co-authored-by: Lambda <lambda@multica.ai> Co-authored-by: multica-agent <github@multica.ai>
82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useLayoutEffect, useRef, useState } from "react";
|
|
import { cn } from "@multica/ui/lib/utils";
|
|
import { useT } from "../i18n";
|
|
|
|
/**
|
|
* The description line under a detail page's title. Clamped to two lines, with
|
|
* a toggle that appears only when there is something clamped to reveal.
|
|
*
|
|
* Left unclamped, a long description pushes the meta row and the tab strip
|
|
* down the page, so how far the content starts depends on how much prose
|
|
* someone wrote. Two lines is where the agent and skill headers already sit
|
|
* visually; the toggle is what makes clamping safe, since without it the rest
|
|
* of the text has nowhere to be — this IS the detail page, so expanding in
|
|
* place is the only move that does not send the reader somewhere else to read
|
|
* one paragraph.
|
|
*
|
|
* The toggle is deliberately quiet — muted until hovered, matching the
|
|
* "show more" control on the agent activity tab. Brand colour is reserved for
|
|
* primary actions and live state; this page's Save and Add-to-agent buttons
|
|
* are what should be drawing the eye, not a text expander.
|
|
*/
|
|
export function ExpandableDescription({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
const { t } = useT("common");
|
|
const [expanded, setExpanded] = useState(false);
|
|
const [clamped, setClamped] = useState(false);
|
|
const textRef = useRef<HTMLParagraphElement | null>(null);
|
|
|
|
// Measured rather than guessed from character count: whether two lines are
|
|
// enough depends on the container's width and the script being rendered.
|
|
const measure = useCallback(() => {
|
|
const element = textRef.current;
|
|
if (!element) return;
|
|
// Read while clamped, or an already-expanded element reports no overflow
|
|
// and the toggle would vanish mid-read.
|
|
if (expanded) return;
|
|
setClamped(element.scrollHeight > element.clientHeight + 1);
|
|
}, [expanded]);
|
|
|
|
useLayoutEffect(() => {
|
|
measure();
|
|
const element = textRef.current;
|
|
if (!element || typeof ResizeObserver === "undefined") return;
|
|
const observer = new ResizeObserver(measure);
|
|
observer.observe(element);
|
|
return () => observer.disconnect();
|
|
}, [measure, children]);
|
|
|
|
return (
|
|
<>
|
|
<p
|
|
ref={textRef}
|
|
className={cn(
|
|
"mt-1 max-w-2xl text-pretty text-body leading-6 text-muted-foreground",
|
|
!expanded && "line-clamp-2",
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</p>
|
|
{(clamped || expanded) && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setExpanded((value) => !value)}
|
|
className="mt-0.5 rounded text-caption text-muted-foreground transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:outline-none"
|
|
>
|
|
{expanded
|
|
? t(($) => $.expandable_description.collapse)
|
|
: t(($) => $.expandable_description.expand)}
|
|
</button>
|
|
)}
|
|
</>
|
|
);
|
|
}
|