Monorepo for Tangled
tangled.org
appview/pages: fix following toggle hitbox on safari
the trending widget used a stretched link (absolute inset-0) inside a
position:relative table row. safari does not support positioned table
rows as containing blocks, so each row link stretched to a distant
ancestor and swallowed taps far outside the widget, e.g. the
global/following toggle on mobile. replace the table with real anchor
rows laid out on a grid.
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
author
Anirudh Oppiliappan
date
(Jun 11, 2026, 10:03 AM +0300)
commit
05862657
0586265772d54f9f953ec61f17d2206cded4fb4c
parent
3f108e95
3f108e956df12da1e26d425bbf9280a740b6778c
change-id
tvmznxkv
tvmznxkvprkptxprtmuyrkqpzoxopyqn
+20
-21
+20
-21
appview/pages/templates/timeline/fragments/trending.html
+20
-21
appview/pages/templates/timeline/fragments/trending.html
···
5
5
Trending
6
6
</h3>
7
7
{{ if .Repos }}
8
-
<table class="w-full py-1 bg-white dark:bg-gray-800">
9
-
<tbody>
8
+
<div class="w-full py-1 bg-white dark:bg-gray-800">
10
9
{{ range $index, $repo := .Repos }}
11
10
{{ template "singleLineRepo" (list $ $repo) }}
12
11
{{ end }}
13
-
</tbody>
14
-
</table>
12
+
</div>
15
13
{{ else }}
16
14
<div class="p-6 text-sm text-gray-500 dark:text-gray-400 text-center">
17
15
No trending repositories this week
···
25
23
{{ $repo := index . 1 }}
26
24
{{ with $repo }}
27
25
{{ $repoOwner := resolve .Did }}
28
-
<tr class="relative hover:bg-gray-100/50 dark:hover:bg-gray-700/50 group">
29
-
<td class="pl-4 pr-2 py-3 text-right text-gray-400 tabular-nums whitespace-nowrap align-top">
30
-
<div class="flex text-sm items-center justify-end gap-1">
31
-
{{ i "star" "w-3 h-3 fill-current shrink-0" }}
32
-
{{ if .RepoStats }}
33
-
<span>{{ scaleFmt .RepoStats.StarCount }}</span>
34
-
{{ else }}
35
-
<span>0</span>
36
-
{{ end }}
37
-
</div>
38
-
</td>
39
-
<td class="px-2 py-3 w-full max-w-0">
40
-
<a href="/{{ $repoOwner }}/{{ .Slug }}" class="absolute inset-0 no-underline" aria-label="{{ $repoOwner }}/{{ .Name }}"></a>
26
+
{{/* a real anchor per row: a stretched (absolute inset-0) link inside a
27
+
position:relative table row breaks hit-testing on safari, which does
28
+
not support positioned table rows as containing blocks */}}
29
+
<a href="/{{ $repoOwner }}/{{ .Slug }}"
30
+
class="grid grid-cols-[3.5rem_minmax(0,1fr)_auto] gap-x-4 px-4 py-3 no-underline hover:no-underline hover:bg-gray-100/50 dark:hover:bg-gray-700/50">
31
+
<div class="flex text-sm items-start justify-end gap-1 text-gray-400 tabular-nums whitespace-nowrap">
32
+
{{ i "star" "w-3 h-3 fill-current shrink-0 mt-1" }}
33
+
{{ if .RepoStats }}
34
+
<span>{{ scaleFmt .RepoStats.StarCount }}</span>
35
+
{{ else }}
36
+
<span>0</span>
37
+
{{ end }}
38
+
</div>
39
+
<div class="min-w-0">
41
40
<span class="text-sm font-medium dark:text-white truncate block">{{ $repoOwner }}/{{ .Name }}</span>
42
41
{{ with .Description }}
43
42
<span class="text-sm text-gray-500 dark:text-gray-400 truncate line-clamp-1 block">{{ . | description }}</span>
44
43
{{ end }}
45
-
</td>
46
-
<td class="pl-2 pr-4 py-3 text-gray-400 text-sm whitespace-nowrap font-mono align-top">
44
+
</div>
45
+
<div class="text-gray-400 text-sm whitespace-nowrap font-mono">
47
46
{{ if and .RepoStats .RepoStats.Language }}
48
47
{{ $lang := .RepoStats.Language }}
49
48
{{ $display := $lang }}
···
55
54
<span>{{ $display }}</span>
56
55
</div>
57
56
{{ end }}
58
-
</td>
59
-
</tr>
57
+
</div>
58
+
</a>
60
59
{{ end }}
61
60
{{ end }}
62
61