ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: use CSS grid with aspect-square for square heatmap cells

Browse Source
This commit is contained in:
Usman Baig
2026-03-12 00:30:23 +01:00
parent bc299fe9a0
commit cb6c03432c
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/dashboard/PeakHours.tsx
View File

@@ -143,7 +143,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
<span className="text-[11px] text-neutral-400 dark:text-neutral-500 w-7 flex-shrink-0 text-right leading-none"> <span className="text-[11px] text-neutral-400 dark:text-neutral-500 w-7 flex-shrink-0 text-right leading-none">
{DAYS[dayIdx]} {DAYS[dayIdx]}
</span> </span>
<div className="flex flex-1 gap-[3px]"> <div className="flex-1" style={{ display: 'grid', gridTemplateColumns: 'repeat(24, 1fr)', gap: '3px' }}>
{hours.map((value, hour) => { {hours.map((value, hour) => {
const isHoveredCell = hovered?.day === dayIdx && hovered?.hour === hour const isHoveredCell = hovered?.day === dayIdx && hovered?.hour === hour
const isBestCell = bestTime?.day === dayIdx && bestTime?.hour === hour const isBestCell = bestTime?.day === dayIdx && bestTime?.hour === hour
@@ -154,7 +154,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
<div <div
key={`${animKey}-${dayIdx}-${hour}`} key={`${animKey}-${dayIdx}-${hour}`}
className={[ className={[
'flex-1 h-7 rounded-[3px] border cursor-default transition-transform duration-100', 'aspect-square w-full rounded-[3px] border cursor-default transition-transform duration-100',
'border-neutral-200 dark:border-neutral-800', 'border-neutral-200 dark:border-neutral-800',
isActive ? 'animate-cell-highlight' : '', isActive ? 'animate-cell-highlight' : '',
!isActive && isBestCell ? '' : '', !isActive && isBestCell ? '' : '',