fix: tiles mode not working with safari 26.4 #1225
Massimo Melina committed
Apr 27, 2026 at 17:49 UTC
589e34820e2efe9622ab965393c5b71013885f39
2 files changed
+18
-1
e2e/frontend.spec.ts
+17
@@ -115,6 +115,23 @@ test('around1', async ({ page }) => {
115
await expect(page.getByText('xFolder')).toBeVisible()
116
await page.getByRole('button', { name: 'Close' }).click()
117
await page.getByRole('link', { name: 'home' }).click()
118
+
119
+ await page.getByRole('button', { name: 'Options' }).click()
120
+ await page.getByRole('slider').fill('6')
121
+ await page.getByRole('button', { name: 'Close' }).click()
122
+ await expect(page.locator('.list-wrapper')).toHaveClass(/tiles-mode/)
123
+
124
+ const item = page.locator('.list-wrapper li').filter({ has: page.locator('.link-wrapper > a') }).first()
125
+ const link = item.locator('.link-wrapper > a')
126
+ const name = item.locator('.entry-name')
127
+ await expect(link).toBeVisible()
128
+ await expect(name).toBeVisible()
129
+
130
+ // safari can shrink the inline link box, so compare the geometry directly against the name
131
+ const [linkBox, nameBox] = await Promise.all([link.boundingBox(), name.boundingBox()])
132
+ expect(linkBox).not.toBeNull()
133
+ expect(nameBox).not.toBeNull()
134
+ expect(linkBox!.y + linkBox!.height).toBeGreaterThanOrEqual(nameBox!.y + nameBox!.height - 1)
135
})
136
137
test('search1', async ({ page }) => {
frontend/src/index.scss
+1
-1
@@ -701,7 +701,7 @@ form label+input { margin-top: .2em; }
701
right: 1em;
702
}
703
704
- .link-wrapper a { display:inline } // avoid overlapping name and details
704
+ .link-wrapper a { display: inline-block } // avoid overlapping name and details
705
&:hover {
706
--bg: var(--ghost-contrast-alt);
707
background: var(--bg); // highlight whole tile