appview/pages/templates/repo/pulls: fix hit area of review/comments panel toggle #1227

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

+97 -4

2 changed files

Diff round #1

expand all

appview

pages

templates

repo

pulls

pull.html

input.css

+4 -4

appview/pages/templates/repo/pulls/pull.html

··· 240 240 } 241 241 } 242 242 </style> 243 - <label title="Toggle review panel" for="subsToggle" class="hidden md:flex items-center justify-end rounded cursor-pointer"> 244 - {{ i "message-square-more" "size-4" }} 245 - {{ i "message-square" "size-4" }} 246 - </label> 243 + <label title="Toggle review panel" for="subsToggle" class="hidden md:flex items-center justify-end pointer-events-none"> 244 + {{ i "message-square-more" "size-4" }} 245 + {{ i "message-square" "size-4" }} 246 + </label> 247 247 {{ end }} 248 248 249 249

+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 + }

History

2 rounds 1 comment

eti.tf submitted #1 8d

interdiff

1 commit

expand

b7ffd2db

appview/pages/templates/repo/pulls: fix hit area of review/comments panel toggle

expand 0 comments

pull request successfully merged

eti.tf submitted #0 11d

diff

1 commit

expand

4b9ac20a

appview/pages/templates/repo/pulls: fix hit area of review/comments panel toggle

expand 1 comment

oppi.li 8d

i had come to grow quite fond of this behavior :)

but i think this change makes sense, lgtm barring conflicts!