mirror of
https://github.com/go-vikunja/vikunja.git
synced 2026-05-10 15:15:41 -05:00
fix(frontend): extend checkbox hit target to 44x44
A pseudo-element on the label provides a 44x44 minimum hit area centered on the visible icon. Visible size and surrounding layout are unchanged. Addresses misclicks on the task list view checkbox where ~50% of taps would open the task detail instead of toggling done.
This commit is contained in:
@@ -40,6 +40,20 @@ const emit = defineEmits<{
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Extend the hit target to >=44x44 without affecting layout (WCAG 2.5.5).
|
||||
.base-checkbox__label::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
min-block-size: 44px;
|
||||
min-inline-size: 44px;
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.base-checkbox:has(input:disabled) .base-checkbox__label {
|
||||
|
||||
Reference in New Issue
Block a user