From c623dc8d849d91eca4e24ae7429675370f3ba264 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 20 Oct 2025 21:59:31 +0200
Subject: [PATCH] style(tts): reduce button and text sizes for compact layout

---
 src/components/TTSControls.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/TTSControls.tsx b/src/components/TTSControls.tsx
index 99c677b2..49cde1e7 100644
--- a/src/components/TTSControls.tsx
+++ b/src/components/TTSControls.tsx
@@ -41,9 +41,10 @@ const TTSControls: React.FC<Props> = ({ text, defaultLang, className }) => {
         onClick={handlePlayPause}
         title={playLabel}
         disabled={!canPlay}
+        style={{ padding: '0.25rem 0.5rem', fontSize: '0.85rem' }}
       >
         <FontAwesomeIcon icon={!speaking ? faPlay : (paused ? faPlay : faPause)} />
-        <span style={{ marginLeft: 6 }}>{playLabel}</span>
+        <span style={{ marginLeft: 4, fontSize: '0.8rem' }}>{playLabel}</span>
       </button>
       <button
         type="button"
@@ -51,16 +52,17 @@ const TTSControls: React.FC<Props> = ({ text, defaultLang, className }) => {
         onClick={stop}
         title="Stop"
         disabled={!speaking && !paused}
+        style={{ padding: '0.25rem 0.5rem', fontSize: '0.85rem' }}
       >
         <FontAwesomeIcon icon={faStop} />
-        <span style={{ marginLeft: 6 }}>Stop</span>
+        <span style={{ marginLeft: 4, fontSize: '0.8rem' }}>Stop</span>
       </button>
-      <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#aaa', fontSize: 12 }}>
+      <label style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: '#aaa', fontSize: '0.8rem' }}>
         Speed
         <select
           value={rate}
           onChange={e => setRate(Number(e.target.value))}
-          style={{ background: 'transparent', color: 'inherit', border: '1px solid #444', borderRadius: 4, padding: '2px 6px' }}
+          style={{ background: 'transparent', color: 'inherit', border: '1px solid #444', borderRadius: 3, padding: '2px 4px', fontSize: '0.75rem' }}
         >
           <option value={0.8}>0.8x</option>
           <option value={1}>1x</option>