Skip to content

refactor: standardize font sizes across components to use Tailwind's … #204

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
pikann merged 1 commit into from
Jun 22, 2026
Merged

refactor: standardize font sizes across components to use Tailwind's … #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 apps/web/src/components/admin/global-roles/GlobalRolesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function GlobalRolesTable({
{active.map((permission) => (
<span
key={permission}
className={`inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-[0.68rem] font-medium leading-none ${permissionBadgeClass(permission)}`}
className={`inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-xs font-medium leading-none ${permissionBadgeClass(permission)}`}
>
{permission}
</span>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/admin/users/UsersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ export function UsersTable({
{user.username}
</span>
{user.must_change_password ? (
<span className="inline-flex items-center rounded-full bg-amber-100 px-1.5 py-0.5 text-[0.65rem] font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
<span className="inline-flex items-center rounded-full bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
pwd reset
</span>
) : null}
{isSelf ? (
<span className="inline-flex items-center rounded-full bg-primary/10 px-1.5 py-0.5 text-[0.65rem] font-medium text-primary">
<span className="inline-flex items-center rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
you
</span>
) : null}
Expand All @@ -87,7 +87,7 @@ export function UsersTable({
)}
</TableCell>
<TableCell className="px-5">
<span className="inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-[0.68rem] font-medium leading-none text-foreground/80">
<span className="inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-xs font-medium leading-none text-foreground/80">
{user.role}
</span>
</TableCell>
Expand Down
22 changes: 11 additions & 11 deletions apps/web/src/components/app-shell/app-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function TreeInlineRename({
<Input
autoFocus
value={value}
className="h-6 text-[12px] px-1.5 rounded border border-primary/30 bg-sidebar focus:ring-1 focus:ring-primary/25 flex-1 min-w-0"
className="h-6 text-xs px-1.5 rounded border border-primary/30 bg-sidebar focus:ring-1 focus:ring-primary/25 flex-1 min-w-0"
onChange={(e) => setValue(e.target.value)}
onFocus={(e) => e.target.select()}
onKeyDown={(e) => {
Expand Down Expand Up @@ -180,7 +180,7 @@ function DocsDocRow({
<button
type="button"
className={cn(
"flex flex-1 min-w-0 items-center gap-1.5 rounded-md px-2 py-1 cursor-pointer transition-all duration-150 text-[12.5px]",
"flex flex-1 min-w-0 items-center gap-1.5 rounded-md px-2 py-1 cursor-pointer transition-all duration-150 text-xs",
isActive
? "bg-primary/10 text-primary font-medium"
: "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
Expand Down Expand Up @@ -335,7 +335,7 @@ function DocsFolderNode({
>
<button
type="button"
className="flex flex-1 min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 cursor-pointer transition-all duration-150 text-[12.5px] text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
className="flex flex-1 min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 cursor-pointer transition-all duration-150 text-xs text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
onClick={() => {
if (!renaming) onToggle(folder.id);
}}
Expand Down Expand Up @@ -435,7 +435,7 @@ function DocsFolderNode({
childFolders.length === 0 &&
!addingDoc && (
<div
className="text-[11px] text-sidebar-foreground/30 italic py-1"
className="text-xs text-sidebar-foreground/30 italic py-1"
style={{ paddingLeft: `${8 + (depth + 1) * 16 + 26}px` }}
>
Empty folder
Expand All @@ -444,7 +444,7 @@ function DocsFolderNode({
{canWrite && (
<div style={{ paddingLeft: `${8 + (depth + 1) * 16 + 16}px` }}>
<DropdownMenu>
<DropdownMenuTrigger className="flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-[12px] text-sidebar-foreground/35 hover:text-sidebar-foreground hover:bg-sidebar-accent/40 transition-all duration-150">
<DropdownMenuTrigger className="flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-xs text-sidebar-foreground/35 hover:text-sidebar-foreground hover:bg-sidebar-accent/40 transition-all duration-150">
<Plus className="size-3 shrink-0" />
<span>Add</span>
</DropdownMenuTrigger>
Expand Down Expand Up @@ -631,7 +631,7 @@ function DocsSidebarSection({ projectId }: { projectId: string }) {
<SidebarGroupContent>
<div className="py-1 space-y-0.5">
{isEmpty ? (
<div className="px-4 py-2 text-[11.5px] text-sidebar-foreground/40 italic">
<div className="px-4 py-2 text-xs text-sidebar-foreground/40 italic">
No documents yet
</div>
) : (
Expand Down Expand Up @@ -662,7 +662,7 @@ function DocsSidebarSection({ projectId }: { projectId: string }) {
{canWrite && (
<div className="px-2 pt-1">
<DropdownMenu>
<DropdownMenuTrigger className="flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-[12px] text-sidebar-foreground/35 hover:text-sidebar-foreground hover:bg-sidebar-accent/40 transition-all duration-150">
<DropdownMenuTrigger className="flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-xs text-sidebar-foreground/35 hover:text-sidebar-foreground hover:bg-sidebar-accent/40 transition-all duration-150">
<Plus className="size-3 shrink-0" />
<span>Add</span>
</DropdownMenuTrigger>
Expand Down Expand Up @@ -718,7 +718,7 @@ function ProjectSwitcher({
if (!user) {
return (
<div className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm font-medium text-sidebar-foreground/80 select-none">
<div className="flex size-5 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary text-[10px] font-bold">
<div className="flex size-5 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary text-xs font-bold">
{initials ?? <FolderKanban className="size-3" />}
</div>
<span className="flex-1 truncate text-left">{label}</span>
Expand All @@ -736,7 +736,7 @@ function ProjectSwitcher({
: "hover:bg-sidebar-accent/60 hover:text-sidebar-foreground",
)}
>
<div className="flex size-5 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary text-[10px] font-bold">
<div className="flex size-5 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary text-xs font-bold">
{initials ?? <FolderKanban className="size-3" />}
</div>
<span className="flex-1 truncate text-left">{label}</span>
Expand Down Expand Up @@ -767,7 +767,7 @@ function ProjectSwitcher({
/>
}
>
<div className="flex size-5 shrink-0 items-center justify-center rounded bg-primary/15 text-primary text-[9px] font-bold">
<div className="flex size-5 shrink-0 items-center justify-center rounded bg-primary/15 text-primary text-xs font-bold">
{p.name.slice(0, 2).toUpperCase()}
</div>
<span className="truncate">{p.name}</span>
Expand Down Expand Up @@ -1288,7 +1288,7 @@ export function AppSidebar() {
className="size-8 shrink-0"
/>
)}
<span className="font-[Syne] font-bold text-[15px] tracking-tight text-sidebar-foreground group-data-[collapsible=icon]:hidden">
<span className="font-[Syne] font-bold text-base tracking-tight text-sidebar-foreground group-data-[collapsible=icon]:hidden">
paca
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/app-shell/notification-bell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function NotificationBell() {
>
<Bell className="h-4 w-4" />
{unreadCount > 0 && (
<span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground leading-none">
<span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground leading-none">
{unreadCount > 9 ? "9+" : unreadCount}
</span>
)}
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/auth/login/BrandPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ export function BrandPanel() {
<span className="text-xl font-bold tracking-tight text-white">
paca
</span>
<span className="rounded-full border border-white/20 bg-white/8 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-widest text-white/60">
<span className="rounded-full border border-white/20 bg-white/8 px-2 py-0.5 text-xs font-semibold uppercase tracking-widest text-white/60">
OSS
</span>
</div>

<h2 className="display-title mb-3 text-[1.85rem] font-bold leading-tight text-balance text-white">
<h2 className="display-title mb-3 text-3xl font-bold leading-tight text-balance text-white">
One team, one board,{" "}
<span className="text-[#9ed957]">human and AI.</span>
</h2>
Expand Down Expand Up @@ -94,7 +94,7 @@ export function BrandPanel() {
<GitHubIcon className="size-3.5" />
View on GitHub
</a>
<p className="text-[11px] text-white/30">Apache-2.0 · Open Source</p>
<p className="text-xs text-white/30">Apache-2.0 · Open Source</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/auth/login/LoginFormPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function LoginFormPanel() {
</div>

{/* Heading */}
<h1 className="display-title mb-1 text-2xl font-bold text-(--sea-ink) sm:text-[1.75rem]">
<h1 className="display-title mb-1 text-2xl font-bold text-(--sea-ink) sm:text-3xl">
Welcome back
</h1>
<p className="mb-8 text-sm text-(--sea-ink-soft)">
Expand Down
10 changes: 4 additions & 6 deletions apps/web/src/components/plugins/PluginMarketplacePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ interface FeatureBadgeProps {

function FeatureBadge({ icon, label }: FeatureBadgeProps) {
return (
<Badge variant="secondary" className="gap-1.5 text-[10px] h-5">
<Badge variant="secondary" className="gap-1.5 text-xs h-5">
{icon}
<span>{label}</span>
</Badge>
Expand Down Expand Up @@ -153,14 +153,12 @@ function PluginCard({
<p className="font-medium text-sm truncate">
{plugin.display_name}
</p>
<Badge variant="outline" className="text-[11px]">
<Badge variant="outline" className="text-xs">
{plugin.version}
</Badge>
{isInstalled ? (
<Badge className="text-[11px]">Installed</Badge>
) : null}
{isInstalled ? <Badge className="text-xs">Installed</Badge> : null}
{upgradeAvailable ? (
<Badge variant="secondary" className="text-[11px] gap-1">
<Badge variant="secondary" className="text-xs gap-1">
<ArrowUpCircle className="size-3" />
Update available
</Badge>
Expand Down
20 changes: 10 additions & 10 deletions apps/web/src/components/projects/agents/conversation-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ function ToolCallMessage({ msg }: { msg: ChatMessage }) {
<button
type="button"
onClick={() => setExpanded((p) => !p)}
className="flex items-center gap-1.5 text-[11px] text-muted-foreground/70 hover:text-foreground/70 transition-colors"
className="flex items-center gap-1.5 text-xs text-muted-foreground/70 hover:text-foreground/70 transition-colors"
>
{expanded ? (
<ChevronDown className="size-3" />
Expand All @@ -261,7 +261,7 @@ function ToolCallMessage({ msg }: { msg: ChatMessage }) {
</span>
</button>
{expanded && (
<pre className="mt-1.5 rounded-lg border border-border/40 bg-muted/30 px-3 py-2 text-[11px] font-mono text-muted-foreground/80 overflow-x-auto whitespace-pre-wrap wrap-break-word">
<pre className="mt-1.5 rounded-lg border border-border/40 bg-muted/30 px-3 py-2 text-xs font-mono text-muted-foreground/80 overflow-x-auto whitespace-pre-wrap wrap-break-word">
{msg.text}
</pre>
)}
Expand All @@ -282,7 +282,7 @@ function ThinkingMessage({ msg }: { msg: ChatMessage }) {
<button
type="button"
onClick={() => setExpanded((p) => !p)}
className="flex items-center gap-1.5 text-[11px] text-muted-foreground/60 italic hover:text-foreground/60 transition-colors"
className="flex items-center gap-1.5 text-xs text-muted-foreground/60 italic hover:text-foreground/60 transition-colors"
>
{expanded ? (
<ChevronDown className="size-3" />
Expand All @@ -292,7 +292,7 @@ function ThinkingMessage({ msg }: { msg: ChatMessage }) {
Thinking…
</button>
{expanded && (
<p className="mt-1.5 text-[12px] text-muted-foreground/60 italic leading-relaxed border-l-2 border-border/30 pl-3">
<p className="mt-1.5 text-xs text-muted-foreground/60 italic leading-relaxed border-l-2 border-border/30 pl-3">
{msg.text}
</p>
)}
Expand All @@ -309,11 +309,11 @@ function AgentBubble({ msg }: { msg: ChatMessage }) {
</div>
<div className="flex-1 min-w-0 max-w-[85%]">
<div className="rounded-2xl rounded-tl-md bg-card border border-border/40 px-4 py-3 shadow-sm">
<p className="text-[13px] leading-relaxed text-foreground whitespace-pre-wrap wrap-break-word">
<p className="text-sm leading-relaxed text-foreground whitespace-pre-wrap wrap-break-word">
{msg.text}
</p>
</div>
<p className="text-[10px] text-muted-foreground/40 mt-1 pl-1">
<p className="text-xs text-muted-foreground/40 mt-1 pl-1">
{new Date(msg.createdAt).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
Expand All @@ -332,11 +332,11 @@ function UserBubble({ msg }: { msg: ChatMessage }) {
</div>
<div className="flex-1 min-w-0 max-w-[85%] flex flex-col items-end">
<div className="rounded-2xl rounded-tr-md bg-primary text-primary-foreground px-4 py-3 shadow-sm">
<p className="text-[13px] leading-relaxed whitespace-pre-wrap wrap-break-word">
<p className="text-sm leading-relaxed whitespace-pre-wrap wrap-break-word">
{msg.text}
</p>
</div>
<p className="text-[10px] text-muted-foreground/40 mt-1 pr-1">
<p className="text-xs text-muted-foreground/40 mt-1 pr-1">
{new Date(msg.createdAt).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
Expand All @@ -350,7 +350,7 @@ function UserBubble({ msg }: { msg: ChatMessage }) {
function SystemNote({ msg }: { msg: ChatMessage }) {
return (
<div className="flex justify-center">
<span className="text-[11px] text-muted-foreground/50 bg-muted/30 rounded-full px-3 py-0.5">
<span className="text-xs text-muted-foreground/50 bg-muted/30 rounded-full px-3 py-0.5">
{msg.text}
</span>
</div>
Expand Down Expand Up @@ -506,7 +506,7 @@ export function ConversationView({
</span>
<Badge
variant="outline"
className={cn("text-[10px] font-semibold shrink-0", statusColor)}
className={cn("text-xs font-semibold shrink-0", statusColor)}
>
{statusLabel}
</Badge>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/projects/docs/doc-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export const DocEditor = forwardRef<DocEditorHandle, DocEditorProps>(
// biome-ignore lint/a11y/noStaticElementInteractions: wrapper captures keydown from BlockNote rich-text editor
<div
data-testid="blocknote-editor"
className="rounded-xl border border-border/25 bg-card/50 hover:border-border/50 transition-all duration-200 overflow-hidden [&_.bn-editor]:min-h-80 [&_.bn-editor]:py-4 [&_.bn-editor]:px-6 [&_.bn-editor]:text-[14px] [&_.bn-editor]:leading-relaxed"
className="rounded-xl border border-border/25 bg-card/50 hover:border-border/50 transition-all duration-200 overflow-hidden [&_.bn-editor]:min-h-80 [&_.bn-editor]:py-4 [&_.bn-editor]:px-6 [&_.bn-editor]:text-sm [&_.bn-editor]:leading-relaxed"
onBlur={save}
onKeyDown={handleKeyDown}
>
Expand Down
14 changes: 7 additions & 7 deletions apps/web/src/components/projects/interactions/add-task-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function AddTaskRow({
<DropdownMenu>
<DropdownMenuTrigger
className={cn(
"flex items-center gap-1 rounded-lg px-1.5 py-1 text-[11px] font-semibold transition-all duration-150 hover:bg-muted/60 shrink-0",
"flex items-center gap-1 rounded-lg px-1.5 py-1 text-xs font-semibold transition-all duration-150 hover:bg-muted/60 shrink-0",
)}
style={selectedType.color ? { color: selectedType.color } : undefined}
>
Expand Down Expand Up @@ -99,15 +99,15 @@ export function AddTaskRow({
<button
type="button"
onClick={cancel}
className="flex items-center gap-1.5 rounded-lg bg-muted/40 text-muted-foreground/80 hover:bg-muted/60 hover:text-foreground px-2.5 py-1.5 text-[11px] font-semibold transition-all duration-150"
className="flex items-center gap-1.5 rounded-lg bg-muted/40 text-muted-foreground/80 hover:bg-muted/60 hover:text-foreground px-2.5 py-1.5 text-xs font-semibold transition-all duration-150"
>
Cancel
</button>
<button
type="button"
onClick={submit}
disabled={!value.trim()}
className="rounded-lg bg-primary px-3 py-1.5 text-[11px] font-semibold text-primary-foreground hover:bg-primary/90 shadow-sm disabled:opacity-40 transition-all duration-150"
className="rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground hover:bg-primary/90 shadow-sm disabled:opacity-40 transition-all duration-150"
>
Create
</button>
Expand All @@ -122,7 +122,7 @@ export function AddTaskRow({
<button
type="button"
onClick={openForm}
className="flex w-full items-center gap-1.5 rounded-lg bg-primary/8 text-primary/80 hover:bg-primary/15 hover:text-primary px-2.5 py-1.5 text-[11px] font-semibold transition-all duration-150"
className="flex w-full items-center gap-1.5 rounded-lg bg-primary/8 text-primary/80 hover:bg-primary/15 hover:text-primary px-2.5 py-1.5 text-sm font-semibold transition-all duration-150"
>
<Plus className="size-3" />
Add task
Expand All @@ -133,7 +133,7 @@ export function AddTaskRow({
<button
type="button"
onClick={openForm}
className="flex items-center gap-1.5 px-4 py-2.5 text-[12px] text-muted-foreground/70 hover:text-foreground hover:bg-muted/30 transition-all duration-150 w-full"
className="flex items-center gap-1.5 px-4 py-2.5 text-sm text-muted-foreground/70 hover:text-foreground hover:bg-muted/30 transition-all duration-150 w-full"
>
<Plus className="size-3" />
Add task
Expand All @@ -158,7 +158,7 @@ export function AddTaskRow({
if (e.key === "Escape") cancel();
}}
placeholder="Task title…"
className="w-full rounded-lg border border-border/30 bg-muted/15 px-3 py-2 text-[13px] font-medium outline-none placeholder:text-muted-foreground/50 focus:border-primary/40 focus:ring-2 focus:ring-primary/15 transition-all duration-150"
className="w-full rounded-lg border border-border/30 bg-muted/15 px-3 py-2 text-sm font-medium outline-none placeholder:text-muted-foreground/50 focus:border-primary/40 focus:ring-2 focus:ring-primary/15 transition-all duration-150"
/>
<div className="mt-2 flex items-center gap-1.5 justify-end">
{actionButtons}
Expand All @@ -182,7 +182,7 @@ export function AddTaskRow({
if (e.key === "Escape") cancel();
}}
placeholder="Task title…"
className="flex-1 bg-transparent text-[13px] font-medium outline-none placeholder:text-muted-foreground/50"
className="flex-1 bg-transparent text-sm font-medium outline-none placeholder:text-muted-foreground/50"
/>
{actionButtons}
</div>
Expand Down
Loading
Loading