fix: normalize oversized font sizes across the UI

Tighten font sizes to match the app's compact design language:

- WelcomePane: heading from text-xl (20px) to text-base (16px),
  buttons and descriptions from text-sm (14px) to text-[13px]
- SettingsPanel: all section headings from text-sm to text-[13px]
- NewSessionModal: title from text-sm to text-[13px]
- PatternEditor: title from text-sm to text-[13px]
- ChatPane: empty-state prompt from text-sm to text-[13px]
- Markdown prose: h1 from 1.25rem to 1.125rem, h2 from 1.125rem
  to 1rem, h3 from 1rem to 0.9375rem

Keeps text-sm only for the app brand name, loading state, and error
headings where larger text is intentional.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-24 19:24:08 +01:00
co-authored by Copilot
parent 2f069f60b4
commit 33c4cee0b4
6 changed files with 15 additions and 15 deletions
+1 -1
View File
@@ -356,7 +356,7 @@ export function ChatPane({
{session.messages.length === 0 ? (
<div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
<Bot className="size-10 text-zinc-800" />
<p className="text-sm text-zinc-500">Send a message to start the conversation</p>
<p className="text-[13px] text-zinc-500">Send a message to start the conversation</p>
<p className="text-[12px] text-zinc-700">
{isScratchpad ? (
<>
+1 -1
View File
@@ -52,7 +52,7 @@ export function NewSessionModal({
<div className="w-full max-w-md rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl">
{/* Header */}
<div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
<h2 className="text-sm font-semibold text-zinc-100">New Session</h2>
<h2 className="text-[13px] font-semibold text-zinc-100">New Session</h2>
<button
className="flex size-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
onClick={onClose}
+1 -1
View File
@@ -235,7 +235,7 @@ export function PatternEditor({
<ChevronLeft className="size-4" />
</button>
<div>
<h3 className="text-sm font-semibold text-zinc-100">
<h3 className="text-[13px] font-semibold text-zinc-100">
{pattern.name || 'Untitled pattern'}
</h3>
<p className="text-[12px] text-zinc-500">
+4 -4
View File
@@ -186,7 +186,7 @@ export function SettingsPanel({
>
<ChevronLeft className="size-4" />
</button>
<h2 className="text-sm font-semibold text-zinc-100">Settings</h2>
<h2 className="text-[13px] font-semibold text-zinc-100">Settings</h2>
</div>
<div className="flex min-h-0 flex-1">
@@ -274,7 +274,7 @@ function ConnectionSection({
return (
<div>
<div className="mb-1">
<h3 className="text-sm font-semibold text-zinc-200">GitHub Copilot</h3>
<h3 className="text-[13px] font-semibold text-zinc-200">GitHub Copilot</h3>
<p className="mt-0.5 text-[12px] text-zinc-500">
Eryx uses your installed GitHub Copilot CLI for AI capabilities
</p>
@@ -646,7 +646,7 @@ function SectionHeader({
return (
<div className="mb-4 flex items-center justify-between gap-3">
<div>
<h3 className="text-sm font-semibold text-zinc-200">{title}</h3>
<h3 className="text-[13px] font-semibold text-zinc-200">{title}</h3>
<p className="mt-0.5 text-[12px] text-zinc-500">{description}</p>
</div>
{children}
@@ -737,7 +737,7 @@ function ToolingEditorShell({
<ChevronLeft className="size-4" />
</button>
<div>
<h2 className="text-sm font-semibold text-zinc-100">{title}</h2>
<h2 className="text-[13px] font-semibold text-zinc-100">{title}</h2>
<p className="text-[12px] text-zinc-500">{subtitle}</p>
</div>
</div>
+5 -5
View File
@@ -21,8 +21,8 @@ export function WelcomePane({
</div>
<div>
<h1 className="text-xl font-semibold text-zinc-100">Welcome to eryx</h1>
<p className="mt-2 max-w-md text-sm leading-relaxed text-zinc-500">
<h1 className="text-base font-semibold text-zinc-100">Welcome to eryx</h1>
<p className="mt-2 max-w-md text-[13px] leading-relaxed text-zinc-500">
Start a scratchpad conversation for ad-hoc questions or connect a project to work with
repo-aware Copilot agents.
</p>
@@ -30,7 +30,7 @@ export function WelcomePane({
<div className="flex flex-col items-center gap-2">
<button
className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-500"
className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-[13px] font-medium text-white transition hover:bg-indigo-500"
onClick={onNewScratchpad}
type="button"
>
@@ -39,7 +39,7 @@ export function WelcomePane({
</button>
{!hasProjects && (
<button
className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-zinc-500 transition hover:bg-zinc-900 hover:text-zinc-300"
className="flex items-center gap-2 rounded-lg px-4 py-2 text-[13px] text-zinc-500 transition hover:bg-zinc-900 hover:text-zinc-300"
onClick={onAddProject}
type="button"
>
@@ -48,7 +48,7 @@ export function WelcomePane({
</button>
)}
<button
className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-zinc-500 transition hover:bg-zinc-900 hover:text-zinc-300"
className="flex items-center gap-2 rounded-lg px-4 py-2 text-[13px] text-zinc-500 transition hover:bg-zinc-900 hover:text-zinc-300"
onClick={onOpenSettings}
type="button"
>
+3 -3
View File
@@ -140,9 +140,9 @@ textarea {
line-height: 1.4;
}
.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.125rem; }
.markdown-content h3 { font-size: 1rem; }
.markdown-content h1 { font-size: 1.125rem; }
.markdown-content h2 { font-size: 1rem; }
.markdown-content h3 { font-size: 0.9375rem; }
.markdown-content p {
margin-top: 0.625em;