+3 -3

apps/web/src/app/status-page/[domain]/layout.tsx

··· 44 44 <Shell className="mx-auto flex items-center justify-between gap-4 p-2 px-2 md:p-3"> 45 45 <div className="relative sm:w-[100px]"> 46 46 {page?.icon ? ( 47 47 - <div className="bg-muted border-border h-10 w-10 overflow-hidden rounded-full border"> 47 47 + <div className="bg-muted border-border h-7 w-7 overflow-hidden rounded-full border"> 48 48 <Image 49 49 - height={40} 50 50 - width={40} 49 49 + height={28} 50 50 + width={28} 51 51 src={page.icon} 52 52 alt={page.title} 53 53 objectFit="cover"

+1 -1

apps/web/src/components/status-page/incident-list.tsx

··· 68 68 <Button 69 69 variant="ghost" 70 70 size="icon" 71 71 - className="hidden h-7 w-7 group-hover:inline-flex" 71 71 + className="invisible h-7 w-7 group-hover:visible" 72 72 asChild 73 73 > 74 74 <Link

+7 -12

apps/web/src/components/tracker.tsx

··· 22 22 TooltipTrigger, 23 23 } from "@openstatus/ui"; 24 24 25 25 - import useWindowSize from "@/hooks/use-window-size"; 26 25 import { 27 26 addBlackListInfo, 27 27 + areDatesEqualByDayMonthYear, 28 28 getStatus, 29 29 getTotalUptimeString, 30 30 } from "@/lib/tracker"; ··· 70 70 description, 71 71 reports, 72 72 }: TrackerProps) { 73 73 - // TODO: remove the isMobile, maxSize, and _placeholder as status_timezone__v0 already returns the last 45 days 74 74 - const { isMobile } = useWindowSize(); 75 75 - const maxSize = React.useMemo(() => (isMobile ? 35 : 45), [isMobile]); 76 73 const uptime = getTotalUptimeString(data); 77 77 - 78 74 const _data = addBlackListInfo(data); 79 79 - const _placeholder = Array.from({ length: maxSize - _data.length }); 80 75 81 76 return ( 82 77 <div className="flex flex-col"> ··· 98 93 )?.[0]; 99 94 100 95 if (!firstStatusReportUpdate) return false; 101 101 - const d = firstStatusReportUpdate.date; 102 102 - d.setHours(0, 0, 0); // set date to midnight as cronTimestamp is midnight 103 103 - return d.getTime() === new Date(props.day).getTime(); 96 96 + 97 97 + return areDatesEqualByDayMonthYear( 98 98 + firstStatusReportUpdate.date, 99 99 + new Date(props.day), 100 100 + ); 104 101 }); 102 102 + 105 103 return ( 106 104 <Bar key={i} context={context} reports={dateReports} {...props} /> 107 105 ); 108 108 - })} 109 109 - {_placeholder.map((_, i) => { 110 110 - return <div key={i} className={tracker({ variant: "empty" })} />; 111 106 })} 112 107 </div> 113 108 </div>

+3

apps/web/src/content/changelog/individual-status-report-page.mdx

··· 7 7 8 8 Every created status report now has its own page. That will make it easier to 9 9 share the status report with your team and across your users. 10 10 + 11 11 + Additionally, we've addded a neutral blue color to the tracker whenever a status 12 12 + report has been published.

+1 -1

apps/web/src/lib/tracker.ts

··· 42 42 * @param date2 43 43 * @returns 44 44 */ 45 45 - function areDatesEqualByDayMonthYear(date1: Date, date2: Date) { 45 45 + export function areDatesEqualByDayMonthYear(date1: Date, date2: Date) { 46 46 date1.setDate(date1.getDate()); 47 47 date1.setHours(0, 0, 0, 0); 48 48