From 33c4cee0b483d55d9dbaf2005b588042615c254d Mon Sep 17 00:00:00 2001
From: David Kaya <david@kaya.sk>
Date: Tue, 24 Mar 2026 19:24:08 +0100
Subject: [PATCH] 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>
---
 src/renderer/components/ChatPane.tsx        |  2 +-
 src/renderer/components/NewSessionModal.tsx |  2 +-
 src/renderer/components/PatternEditor.tsx   |  2 +-
 src/renderer/components/SettingsPanel.tsx   |  8 ++++----
 src/renderer/components/WelcomePane.tsx     | 10 +++++-----
 src/renderer/styles.css                     |  6 +++---
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/ChatPane.tsx b/src/renderer/components/ChatPane.tsx
index 01af758..7286914 100644
--- a/src/renderer/components/ChatPane.tsx
+++ b/src/renderer/components/ChatPane.tsx
@@ -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 ? (
                 <>
diff --git a/src/renderer/components/NewSessionModal.tsx b/src/renderer/components/NewSessionModal.tsx
index e82f5a9..d651d03 100644
--- a/src/renderer/components/NewSessionModal.tsx
+++ b/src/renderer/components/NewSessionModal.tsx
@@ -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}
diff --git a/src/renderer/components/PatternEditor.tsx b/src/renderer/components/PatternEditor.tsx
index b3de204..b4b77a8 100644
--- a/src/renderer/components/PatternEditor.tsx
+++ b/src/renderer/components/PatternEditor.tsx
@@ -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">
diff --git a/src/renderer/components/SettingsPanel.tsx b/src/renderer/components/SettingsPanel.tsx
index d5df29c..2ad39fa 100644
--- a/src/renderer/components/SettingsPanel.tsx
+++ b/src/renderer/components/SettingsPanel.tsx
@@ -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>
diff --git a/src/renderer/components/WelcomePane.tsx b/src/renderer/components/WelcomePane.tsx
index 1239f9c..b4d6213 100644
--- a/src/renderer/components/WelcomePane.tsx
+++ b/src/renderer/components/WelcomePane.tsx
@@ -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"
           >
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 6369813..15db1db 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -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;