From 1d7389cd43742328e3bad82c179dd2477d2d2f4a Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Tue, 3 Feb 2026 15:53:14 +0300
Subject: [PATCH] Improve chart UX: taller charts, controls below header

- Increase chart height from 280px to 380px (more square-like)
- Move controls below chart title (column layout)
- Spread two control groups left/right with space-between
- Make controls more compact (smaller padding, font-size)
---
 src/App.css | 43 +++++++++++++++++++++----------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/App.css b/src/App.css
index b6ce915..a7fa4ee 100644
--- a/src/App.css
+++ b/src/App.css
@@ -461,7 +461,7 @@ html[dir="rtl"] {
 }
 
 .chart-container {
-  height: 280px;
+  height: 380px;
   position: relative;
 }
 
@@ -798,28 +798,28 @@ table tbody tr:hover {
 
 .chart-metric-selector {
   display: flex;
-  gap: 4px;
+  gap: 2px;
   background: var(--bg);
-  padding: 4px;
-  border-radius: 8px;
+  padding: 2px;
+  border-radius: 6px;
 }
 
-/* Toggle switch style (Daily/Weekly) */
+/* Toggle switch style (Daily/Weekly) - compact */
 .toggle-switch {
   display: flex;
   background: var(--border);
-  padding: 3px;
-  border-radius: 10px;
-  gap: 2px;
+  padding: 2px;
+  border-radius: 6px;
+  gap: 1px;
 }
 
 .toggle-switch button {
   border: none;
   background: transparent;
   color: var(--text-muted);
-  padding: 6px 14px;
-  border-radius: 8px;
-  font-size: 0.8125rem;
+  padding: 4px 10px;
+  border-radius: 5px;
+  font-size: 0.6875rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -833,7 +833,7 @@ table tbody tr:hover {
 .toggle-switch button.active {
   background: var(--surface);
   color: var(--text-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 /* Data Labels Toggle */
@@ -867,9 +867,9 @@ table tbody tr:hover {
   border: none;
   background: transparent;
   color: var(--text-muted);
-  padding: 7px 14px;
-  border-radius: 6px;
-  font-size: 0.8125rem;
+  padding: 4px 10px;
+  border-radius: 5px;
+  font-size: 0.6875rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
@@ -1875,10 +1875,9 @@ table tbody tr:hover {
 
 .chart-header-with-export {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 16px;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 12px;
   padding-right: 44px; /* Space for absolute download button */
 }
 
@@ -1889,16 +1888,16 @@ html[dir="rtl"] .chart-header-with-export {
 
 .chart-header-with-export h2 {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   font-weight: 600;
   color: var(--text-primary);
-  line-height: 1.4;
-  flex-shrink: 0;
+  line-height: 1.3;
 }
 
 .chart-header-actions {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
   flex-wrap: wrap;
 }