From 60eda25fe3ac1ceb056462cbba2217979d4ef0ab Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Tue, 3 Feb 2026 15:49:31 +0300
Subject: [PATCH] Position download button in corner + better Arabic font

- Move export button outside header-actions to enable absolute positioning
- Button now positioned at top-right (LTR) / top-left (RTL)
- Switch from Tajawal to IBM Plex Sans Arabic (slicker, more technical)
- Add RTL-specific font-family in CSS
---
 public/index.html             |  2 +-
 src/App.css                   | 33 ++++++++++++++++++++++++++++++---
 src/components/ChartExport.js | 27 +++++++++++++--------------
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/public/index.html b/public/index.html
index 104238a..b4d967a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.css b/src/App.css
index 4b4ffe3..b6ce915 100644
--- a/src/App.css
+++ b/src/App.css
@@ -38,6 +38,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* RTL Arabic font */
+html[dir="rtl"] body,
+html[dir="rtl"] {
+  font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
 /* Loading & Error */
 .loading-container,
 .error-container {
@@ -1861,6 +1867,7 @@ table tbody tr:hover {
 
 /* Chart Export Button & Header */
 .exportable-chart-wrapper {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -1872,7 +1879,12 @@ table tbody tr:hover {
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 16px;
-  flex-wrap: wrap;
+  padding-right: 44px; /* Space for absolute download button */
+}
+
+html[dir="rtl"] .chart-header-with-export {
+  padding-right: 0;
+  padding-left: 44px;
 }
 
 .chart-header-with-export h2 {
@@ -1881,6 +1893,7 @@ table tbody tr:hover {
   font-weight: 600;
   color: var(--text-primary);
   line-height: 1.4;
+  flex-shrink: 0;
 }
 
 .chart-header-actions {
@@ -1896,7 +1909,14 @@ table tbody tr:hover {
   min-height: 0;
 }
 
-.chart-export-btn {
+/* Download button - always top corner, outside normal flow */
+.chart-export-btn,
+.chart-export-btn.visible {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  z-index: 10;
   width: 32px;
   height: 32px;
   min-width: 32px;
@@ -1909,10 +1929,17 @@ table tbody tr:hover {
   justify-content: center;
   color: var(--text-muted);
   transition: background 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+}
+
+html[dir="rtl"] .chart-export-btn,
+html[dir="rtl"] .chart-export-btn.visible {
+  right: auto !important;
+  left: 0 !important;
 }
 
 .chart-export-btn:hover {
-  background: var(--bg-tertiary);
+  background: var(--border);
   color: var(--text-primary);
 }
 
diff --git a/src/components/ChartExport.js b/src/components/ChartExport.js
index 4e984c0..29534d2 100644
--- a/src/components/ChartExport.js
+++ b/src/components/ChartExport.js
@@ -46,23 +46,22 @@ export function ExportableChart({ children, filename = 'chart', title = '', clas
 
   return (
     <div className="exportable-chart-wrapper">
+      {/* Download button - positioned absolutely in corner */}
+      <button 
+        className="chart-export-btn visible" 
+        onClick={exportAsPNG}
+        title="Download as PNG"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          <polyline points="7 10 12 15 17 10"/>
+          <line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+      </button>
       {title && (
         <div className="chart-header-with-export">
           <h2>{title}</h2>
-          <div className="chart-header-actions">
-            {controls}
-            <button 
-              className="chart-export-btn visible" 
-              onClick={exportAsPNG}
-              title="Download as PNG"
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                <polyline points="7 10 12 15 17 10"/>
-                <line x1="12" y1="15" x2="12" y2="3"/>
-              </svg>
-            </button>
-          </div>
+          {controls && <div className="chart-header-actions">{controls}</div>}
         </div>
       )}
       {!title && controls && <div className="chart-controls">{controls}</div>}