fix: design audit — touch targets, heading scale, mobile responsiveness, Alert deprecation

idemerge · idemerge · commit c2b443c2193d · 2026-04-28T08:33:31.000Z
- Increase button touch targets by removing size="small" from Settings buttons
- Enlarge H1 from 20px to 24px for better heading hierarchy
- Increase capability tag (T/S/V) font from 8px to 10px
- Make Core Parameters grid responsive (1-col mobile, 3-col desktop)
- Make Playground history sidebar full-screen overlay on mobile
- Fix "1 models" pluralization on Monitor and History pages
- Replace deprecated antd Alert message prop with title (5 instances)
- Remove duplicate H2 heading from History page
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.12.1] - 2026-04-28
+
+### Fixed
+- Touch targets undersized: removed `size="small"` from Settings buttons, increased model tag padding
+- Heading scale too flat: increased H1 from 20px to 24px
+- Capability tags (T/S/V) nearly illegible: increased font from 8px to 10px with larger padding
+- Mobile parameter labels overflow: responsive grid for Core Parameters section
+- Playground history panel overlaps form on mobile: full-screen overlay on mobile
+- Grammar: "1 models" now correctly pluralized across Monitor and History pages
+- antd deprecation: replaced Alert `message` prop with `title` (5 instances)
+- History page duplicate heading: removed redundant H2 title (topbar already shows page name)
+
 ## [2.12.0] - 2026-04-28
 
 ### Added
diff --git a/backend/package.json b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "llm-benchmark-backend",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "description": "LLM API Bench - Backend",
   "main": "dist/index.js",
   "scripts": {
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "2.12.0",
+  "version": "2.12.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/HistoryPanel.tsx b/frontend/src/components/HistoryPanel.tsx
@@ -174,12 +174,11 @@ export function HistoryPanel({
 
   return (
     <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-4">
-      {/* Header */}
+      {/* Toolbar */}
       <div className="flex items-center justify-between flex-wrap gap-3">
-        <h2 className="text-base font-semibold text-text-primary">
-          History
-          <span className="ml-2 text-sm text-text-secondary font-normal font-mono">({sorted.length})</span>
-        </h2>
+        <span className="text-sm text-text-secondary font-mono">
+          {sorted.length} workflow{sorted.length !== 1 ? 's' : ''}
+        </span>
         {onRefresh && (
           <button
             onClick={onRefresh}
diff --git a/frontend/src/components/LoginPage.tsx b/frontend/src/components/LoginPage.tsx
@@ -81,7 +81,7 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
 
               {changeError && (
                 <Alert
-                  message={changeError}
+                  title={changeError}
                   type="error"
                   showIcon
                   closable
@@ -130,14 +130,7 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
               <h2 className="text-text-primary text-base font-medium mb-4">Sign in</h2>
 
               {error && (
-                <Alert
-                  message={error}
-                  type="error"
-                  showIcon
-                  closable
-                  onClose={clearError}
-                  style={{ marginBottom: 16 }}
-                />
+                <Alert title={error} type="error" showIcon closable onClose={clearError} style={{ marginBottom: 16 }} />
               )}
 
               <form onSubmit={handleSubmit}>
diff --git a/frontend/src/components/MonitorPage.tsx b/frontend/src/components/MonitorPage.tsx
@@ -720,7 +720,9 @@ export function MonitorPage() {
                     <div className="text-[13px] font-medium text-text-primary">{provider.name}</div>
                     <div className="flex items-center gap-1.5 mt-0.5">
                       <Tag style={{ fontSize: 10, margin: 0 }}>{provider.format}</Tag>
-                      <span className="text-[10px] text-text-tertiary">{providerTargets.length} models</span>
+                      <span className="text-[10px] text-text-tertiary">
+                        {providerTargets.length} model{providerTargets.length !== 1 ? 's' : ''}
+                      </span>
                     </div>
                   </div>
                 </div>
diff --git a/frontend/src/components/PlaygroundHistorySidebar.tsx b/frontend/src/components/PlaygroundHistorySidebar.tsx
@@ -33,7 +33,7 @@ export function PlaygroundHistorySidebar({
   selectedId,
 }: Props) {
   return (
-    <div className="w-80 shrink-0 glass-card p-4 space-y-3 self-start sticky top-4">
+    <div className="w-full md:w-80 shrink-0 glass-card p-4 space-y-3 self-start sticky top-4 fixed md:static inset-0 z-50 md:z-auto overflow-y-auto md:overflow-visible bg-bg-primary md:bg-transparent">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
diff --git a/frontend/src/components/PlaygroundPage.tsx b/frontend/src/components/PlaygroundPage.tsx
@@ -729,7 +729,7 @@ export function PlaygroundPage() {
         </div>
 
         {/* Error */}
-        {error && <Alert type="error" message={error} closable onClose={() => reset()} showIcon />}
+        {error && <Alert type="error" title={error} closable onClose={() => reset()} showIcon />}
 
         {/* Response */}
         {(hasRun || loading) && (
diff --git a/frontend/src/components/SettingsPage.tsx b/frontend/src/components/SettingsPage.tsx
@@ -195,12 +195,12 @@ export function SettingsPage() {
               endpoints.
             </p>
           </div>
-          <Button type="primary" ghost icon={<PlusOutlined />} onClick={openCreateForm} size="small">
+          <Button type="primary" ghost icon={<PlusOutlined />} onClick={openCreateForm}>
             Add Provider
           </Button>
         </div>
 
-        {providerError && <Alert type="error" message={providerError} showIcon closable />}
+        {providerError && <Alert type="error" title={providerError} showIcon closable />}
 
         {loading && providers.length === 0 && (
           <div className="text-center py-8 text-text-tertiary text-[13px]">Loading providers...</div>
@@ -236,9 +236,7 @@ export function SettingsPage() {
                       <div className="text-[14px] font-semibold text-text-primary truncate">{provider.name}</div>
                       <Tag>{provider.format}</Tag>
                     </div>
-                    <Button size="small" onClick={() => openEditForm(provider)}>
-                      Edit
-                    </Button>
+                    <Button onClick={() => openEditForm(provider)}>Edit</Button>
                   </div>
 
                   {/* Info rows */}
@@ -268,7 +266,7 @@ export function SettingsPage() {
                   <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }}>
                     <Alert
                       type={testResult.success ? 'success' : 'error'}
-                      message={
+                      title={
                         testResult.success
                           ? `Connection successful (${testResult.latencyMs}ms)`
                           : `Connection failed: ${testResult.error}`
@@ -308,17 +306,17 @@ export function SettingsPage() {
                                 : model.contextSize}
                             </span>
                             {model.supportsVision && (
-                              <Tag color="blue" style={{ fontSize: 8, padding: '0 4px', lineHeight: '16px' }}>
+                              <Tag color="blue" style={{ fontSize: 10, padding: '0 6px', lineHeight: '20px' }}>
                                 V
                               </Tag>
                             )}
                             {model.supportsTools && (
-                              <Tag color="purple" style={{ fontSize: 8, padding: '0 4px', lineHeight: '16px' }}>
+                              <Tag color="purple" style={{ fontSize: 10, padding: '0 6px', lineHeight: '20px' }}>
                                 T
                               </Tag>
                             )}
                             {model.supportsStreaming && (
-                              <Tag color="green" style={{ fontSize: 8, padding: '0 4px', lineHeight: '16px' }}>
+                              <Tag color="green" style={{ fontSize: 10, padding: '0 6px', lineHeight: '20px' }}>
                                 S
                               </Tag>
                             )}
@@ -334,7 +332,6 @@ export function SettingsPage() {
                   <Button
                     type="primary"
                     ghost
-                    size="small"
                     icon={<ApiOutlined />}
                     onClick={() => handleTest(provider.id)}
                     loading={testingId === provider.id}
@@ -349,7 +346,7 @@ export function SettingsPage() {
                     cancelText="Cancel"
                     okButtonProps={{ danger: true }}
                   >
-                    <Button size="small" danger ghost>
+                    <Button danger ghost>
                       Delete
                     </Button>
                   </Popconfirm>
diff --git a/frontend/src/components/WorkflowConfigPanel.tsx b/frontend/src/components/WorkflowConfigPanel.tsx
@@ -666,7 +666,7 @@ export function WorkflowConfigPanel({
           <div className="section-header" data-color="teal">
             Core Parameters
           </div>
-          <div className="grid grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
             <div className="space-y-2">
               <div className="flex items-center gap-1">
                 <label className="param-chip-label">Max Tokens</label>
@@ -1101,7 +1101,7 @@ export function WorkflowConfigPanel({
                           <button
                             key={model.id}
                             onClick={() => toggleModel(provider, model.name)}
-                            className={`text-[10px] px-2 py-1 rounded border transition-all font-medium font-mono ${
+                            className={`text-[10px] px-2.5 py-1.5 rounded border transition-all font-medium font-mono min-h-[28px] ${
                               selected ? '' : 'text-text-tertiary hover:border-border-hover'
                             }`}
                             style={{
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -224,7 +224,7 @@ h6 {
 
 .app-topbar-title {
   font-family: 'Inter', sans-serif;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 600;
   color: var(--color-text-primary);
   letter-spacing: -0.02em;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "llm-benchmark-backend",`
`3`		`- "version": "2.12.0",`
	`3`	`+ "version": "2.12.1",`
`4`	`4`	`"description": "LLM API Bench - Backend",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "frontend",`
`3`	`3`	`"private": true,`
`4`		`- "version": "2.12.0",`
	`4`	`+ "version": "2.12.1",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`