A vibe coded tangled fork which supports pijul.
appview/pages/templates/repo/pulls: fix hit area of review/comments panel toggle
Clicking the empty space to the left of the "comment" button toggle
used to collapse the comments column — the hit area has now instead
been limited to the icon/button itself.
Add hit-area utility classes to `input.css`
Source: https://bazza.dev/craft/2026/hit-area
Signed-off-by: eti <eti@eti.tf>
authored by
eti
and committed by
tangled.org
d8a96437
6fda67fc
+97
-4
+4
-4
appview/pages/templates/repo/pulls/pull.html
+4
-4
appview/pages/templates/repo/pulls/pull.html
···
244
244
}
245
245
}
246
246
</style>
247
-
<label title="Toggle review panel" for="subsToggle" class="hidden md:flex items-center justify-end rounded cursor-pointer">
248
-
<span class="show-toggle">{{ i "message-square-more" "size-4" }}</span>
249
-
<span class="hide-toggle w-[25vw] flex justify-end">{{ i "message-square" "size-4" }}</span>
250
-
</label>
247
+
<label title="Toggle review panel" for="subsToggle" class="hidden md:flex items-center justify-end pointer-events-none">
248
+
<span class="show-toggle hit-area hit-area-4 hit-area-x-2 pointer-events-auto cursor-pointer">{{ i "message-square-more" "size-4" }}</span>
249
+
<span class="hide-toggle w-[25vw] justify-end"><span class="hit-area hit-area-4 pointer-events-auto cursor-pointer">{{ i "message-square" "size-4" }}</span></span>
250
+
</label>
251
251
{{ end }}
252
252
253
253
+93
input.css
+93
input.css
···
1059
1059
color: #f9fafb;
1060
1060
}
1061
1061
}
1062
+
1063
+
@layer utilities {
1064
+
.hit-area {
1065
+
position: relative;
1066
+
}
1067
+
1068
+
.hit-area::before {
1069
+
content: "";
1070
+
position: absolute;
1071
+
top: var(--hit-area-t, 0px);
1072
+
right: var(--hit-area-r, 0px);
1073
+
bottom: var(--hit-area-b, 0px);
1074
+
left: var(--hit-area-l, 0px);
1075
+
pointer-events: inherit;
1076
+
}
1077
+
1078
+
.hit-area-debug {
1079
+
position: relative;
1080
+
}
1081
+
1082
+
.hit-area-debug::before {
1083
+
content: "";
1084
+
position: absolute;
1085
+
top: var(--hit-area-t, 0px);
1086
+
right: var(--hit-area-r, 0px);
1087
+
bottom: var(--hit-area-b, 0px);
1088
+
left: var(--hit-area-l, 0px);
1089
+
pointer-events: inherit;
1090
+
border: 1px dashed #3b82f6;
1091
+
background-color: rgba(59, 130, 246, 0.1);
1092
+
}
1093
+
1094
+
.hit-area-debug:hover::before {
1095
+
border-color: #22c55e;
1096
+
background-color: rgba(34, 197, 94, 0.1);
1097
+
}
1098
+
1099
+
.hit-area-1 { --hit-area-t: -0.25rem; --hit-area-r: -0.25rem; --hit-area-b: -0.25rem; --hit-area-l: -0.25rem; }
1100
+
.hit-area-2 { --hit-area-t: -0.5rem; --hit-area-r: -0.5rem; --hit-area-b: -0.5rem; --hit-area-l: -0.5rem; }
1101
+
.hit-area-4 { --hit-area-t: -1rem; --hit-area-r: -1rem; --hit-area-b: -1rem; --hit-area-l: -1rem; }
1102
+
.hit-area-6 { --hit-area-t: -1.5rem; --hit-area-r: -1.5rem; --hit-area-b: -1.5rem; --hit-area-l: -1.5rem; }
1103
+
.hit-area-8 { --hit-area-t: -2rem; --hit-area-r: -2rem; --hit-area-b: -2rem; --hit-area-l: -2rem; }
1104
+
.hit-area-10 { --hit-area-t: -2.5rem; --hit-area-r: -2.5rem; --hit-area-b: -2.5rem; --hit-area-l: -2.5rem; }
1105
+
.hit-area-12 { --hit-area-t: -3rem; --hit-area-r: -3rem; --hit-area-b: -3rem; --hit-area-l: -3rem; }
1106
+
1107
+
.hit-area-l-1 { --hit-area-l: -0.25rem; }
1108
+
.hit-area-l-2 { --hit-area-l: -0.5rem; }
1109
+
.hit-area-l-4 { --hit-area-l: -1rem; }
1110
+
.hit-area-l-6 { --hit-area-l: -1.5rem; }
1111
+
.hit-area-l-8 { --hit-area-l: -2rem; }
1112
+
.hit-area-l-10 { --hit-area-l: -2.5rem; }
1113
+
.hit-area-l-12 { --hit-area-l: -3rem; }
1114
+
1115
+
.hit-area-r-1 { --hit-area-r: -0.25rem; }
1116
+
.hit-area-r-2 { --hit-area-r: -0.5rem; }
1117
+
.hit-area-r-4 { --hit-area-r: -1rem; }
1118
+
.hit-area-r-6 { --hit-area-r: -1.5rem; }
1119
+
.hit-area-r-8 { --hit-area-r: -2rem; }
1120
+
.hit-area-r-10 { --hit-area-r: -2.5rem; }
1121
+
.hit-area-r-12 { --hit-area-r: -3rem; }
1122
+
1123
+
.hit-area-t-1 { --hit-area-t: -0.25rem; }
1124
+
.hit-area-t-2 { --hit-area-t: -0.5rem; }
1125
+
.hit-area-t-4 { --hit-area-t: -1rem; }
1126
+
.hit-area-t-6 { --hit-area-t: -1.5rem; }
1127
+
.hit-area-t-8 { --hit-area-t: -2rem; }
1128
+
.hit-area-t-10 { --hit-area-t: -2.5rem; }
1129
+
.hit-area-t-12 { --hit-area-t: -3rem; }
1130
+
1131
+
.hit-area-b-1 { --hit-area-b: -0.25rem; }
1132
+
.hit-area-b-2 { --hit-area-b: -0.5rem; }
1133
+
.hit-area-b-4 { --hit-area-b: -1rem; }
1134
+
.hit-area-b-6 { --hit-area-b: -1.5rem; }
1135
+
.hit-area-b-8 { --hit-area-b: -2rem; }
1136
+
.hit-area-b-10 { --hit-area-b: -2.5rem; }
1137
+
.hit-area-b-12 { --hit-area-b: -3rem; }
1138
+
1139
+
.hit-area-x-1 { --hit-area-l: -0.25rem; --hit-area-r: -0.25rem; }
1140
+
.hit-area-x-2 { --hit-area-l: -0.5rem; --hit-area-r: -0.5rem; }
1141
+
.hit-area-x-4 { --hit-area-l: -1rem; --hit-area-r: -1rem; }
1142
+
.hit-area-x-6 { --hit-area-l: -1.5rem; --hit-area-r: -1.5rem; }
1143
+
.hit-area-x-8 { --hit-area-l: -2rem; --hit-area-r: -2rem; }
1144
+
.hit-area-x-10 { --hit-area-l: -2.5rem; --hit-area-r: -2.5rem; }
1145
+
.hit-area-x-12 { --hit-area-l: -3rem; --hit-area-r: -3rem; }
1146
+
1147
+
.hit-area-y-1 { --hit-area-t: -0.25rem; --hit-area-b: -0.25rem; }
1148
+
.hit-area-y-2 { --hit-area-t: -0.5rem; --hit-area-b: -0.5rem; }
1149
+
.hit-area-y-4 { --hit-area-t: -1rem; --hit-area-b: -1rem; }
1150
+
.hit-area-y-6 { --hit-area-t: -1.5rem; --hit-area-b: -1.5rem; }
1151
+
.hit-area-y-8 { --hit-area-t: -2rem; --hit-area-b: -2rem; }
1152
+
.hit-area-y-10 { --hit-area-t: -2.5rem; --hit-area-b: -2.5rem; }
1153
+
.hit-area-y-12 { --hit-area-t: -3rem; --hit-area-b: -3rem; }
1154
+
}