mask the whole overview header

because the length of date text can be different on different dates
subhoghoshX · Jul 29, 2024 · 7b9c92e · 7b9c92e
1 parent 8230ed0
commit 7b9c92e
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/components/Overview.tsx b/src/components/Overview.tsx
@@ -49,9 +49,9 @@ export function Overview({ totalUsage }: Props) {
 
   return (
     <Card className="flex flex-col">
-      <CardHeader className="items-center pb-0">
+      <CardHeader className="items-center pb-0" id="overview-header">
         <CardTitle className="text-lg">Top 5 sites</CardTitle>
-        <CardDescription id="overview-date">{formattedDate}</CardDescription>
+        <CardDescription>{formattedDate}</CardDescription>
       </CardHeader>
       <CardContent className="flex-1 pb-0">
         <ChartContainer

diff --git a/tests/example.spec.ts b/tests/example.spec.ts
@@ -40,7 +40,7 @@ test("Extension in New Tab page", async ({ page }) => {
   await expect(page).toHaveScreenshot({
     mask: [
       page.locator("section > div:last-child > div:first-child svg"),
-      page.locator("#overview-date"),
+      page.locator("#overview-header"),
       page.locator("#favicon"),
     ],
   });

diff --git a/tests/example.spec.ts-snapshots/Extension-in-New-Tab-page-1-chromium-linux.png b/tests/example.spec.ts-snapshots/Extension-in-New-Tab-page-1-chromium-linux.png