cameleer/cameleer-server
1
0
Fork 0
Code Issues 45 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make treemap and punchcard responsive with viewBox scaling

Browse Source 
Replaced hardcoded width/height on SVG elements with viewBox + width:100%
so both components fill their parent container instead of using fixed pixels.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-30 10:28:29 +02:00
parent 9d2d87e7e1
commit 7a1625c297
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
View File

@@ -75,7 +75,7 @@ export function PunchcardHeatmap({ cells, mode, width, height }: PunchcardHeatma
}, [cells, mode, width, height]); }, [cells, mode, width, height]);
return ( return (
<svg width={width} height={height} style={{ display: 'block' }}> <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
{/* Day labels (top) */} {/* Day labels (top) */}
{DAYS.map((day, i) => ( {DAYS.map((day, i) => (
<text <text

4
ui/src/pages/DashboardTab/Treemap.tsx
View File

@@ -101,14 +101,14 @@ export function Treemap({ items, width, height, onItemClick }: TreemapProps) {
if (items.length === 0) { if (items.length === 0) {
return ( return (
<svg width={width} height={height}> <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
<text x={width / 2} y={height / 2} textAnchor="middle" fill="#9CA3AF" fontSize={12}>No data</text> <text x={width / 2} y={height / 2} textAnchor="middle" fill="#9CA3AF" fontSize={12}>No data</text>
</svg> </svg>
); );
} }
return ( return (
<svg width={width} height={height} style={{ display: 'block' }}> <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
{rects.map(({ item, x, y, w, h }) => { {rects.map(({ item, x, y, w, h }) => {
const pad = 1; const pad = 1;
const rx = x + pad; const rx = x + pad;