fahed/hihala-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Position download button in corner + better Arabic font

Browse Source 
- 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
This commit is contained in:
fahed
2026-02-03 15:49:31 +03:00
parent 12f548fc78
commit 60eda25fe3
3 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.css
View File

@@ -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);
}