From f7dc50faf735a1b0db4fbf005382456e61243293 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 20 Apr 2026 21:45:58 +0200
Subject: [PATCH] refactor(frontend): port checkbox-radio rules into
 FormCheckbox and drop Bulma import

The Bulma form/checkbox-radio partial only defined two selectors: .checkbox
(consumed exclusively by FormCheckbox.vue) and .radio (consumed by
ViewEditForm.vue and user/settings/Avatar.vue). Ports the %checkbox-radio
placeholder rules (cursor, line-height, position, hover/disabled states,
and the input cursor override) into FormCheckbox's scoped style for the
.checkbox side, and into scoped style blocks on the two remaining .radio
call-sites for the .radio side (including the 0.5em sibling margin via
margin-inline-start). Drops the now-unused @import. Pixel-perfect verified
on /login, /user/settings/general, and /user/settings/avatar: every
measured label/input getBoundingClientRect and computed style matches the
baseline exactly (0px deltas across all 5 sampled checkboxes and all 5
avatar radios).
---
 .../src/components/input/FormCheckbox.vue     | 21 +++++++++++++
 .../components/project/views/ViewEditForm.vue | 28 +++++++++++++++++
 frontend/src/styles/global.scss               |  2 +-
 frontend/src/views/user/settings/Avatar.vue   | 30 +++++++++++++++++++
 4 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/input/FormCheckbox.vue b/frontend/src/components/input/FormCheckbox.vue
index fae2fce7f..cefdd79b1 100644
--- a/frontend/src/components/input/FormCheckbox.vue
+++ b/frontend/src/components/input/FormCheckbox.vue
@@ -28,12 +28,33 @@ function handleChange(event: Event) {
 </template>
 
 <style lang="scss" scoped>
+// Ported from bulma-css-variables/sass/form/checkbox-radio.sass
+// (the %checkbox-radio placeholder, scoped to .checkbox since this
+// component is the sole consumer of that class).
 label.checkbox {
+	cursor: pointer;
+	line-height: 1.25;
+	position: relative;
+
 	display: flex;
 	align-items: center;
 	gap: .5rem;
 	inline-size: fit-content;
 
+	&:hover {
+		color: var(--input-hover-color);
+	}
+
+	&[disabled],
+	input[disabled] {
+		color: var(--input-disabled-color);
+		cursor: not-allowed;
+	}
+
+	input {
+		cursor: pointer;
+	}
+
 	&:not(:last-child) {
 		margin-block-end: .75rem;
 	}
diff --git a/frontend/src/components/project/views/ViewEditForm.vue b/frontend/src/components/project/views/ViewEditForm.vue
index 3945d329c..aaa791547 100644
--- a/frontend/src/components/project/views/ViewEditForm.vue
+++ b/frontend/src/components/project/views/ViewEditForm.vue
@@ -302,4 +302,32 @@ function handleBubbleSave() {
 		inline-size: 100%;
 	}
 }
+
+// Ported from bulma-css-variables/sass/form/checkbox-radio.sass
+// (the %checkbox-radio placeholder plus the .radio + .radio sibling rule),
+// scoped to this component so we can drop the global Bulma import.
+label.radio {
+	cursor: pointer;
+	display: inline-block;
+	line-height: 1.25;
+	position: relative;
+
+	input {
+		cursor: pointer;
+	}
+
+	&:hover {
+		color: var(--input-hover-color);
+	}
+
+	&[disabled],
+	input[disabled] {
+		color: var(--input-disabled-color);
+		cursor: not-allowed;
+	}
+
+	& + .radio {
+		margin-inline-start: .5em;
+	}
+}
 </style>
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index c81699c02..c0957e425 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -35,7 +35,7 @@
 // imports from "bulma-css-variables/sass/form/_all";
 @import "bulma-css-variables/sass/form/shared";
 @import "bulma-css-variables/sass/form/input-textarea";
-@import "bulma-css-variables/sass/form/checkbox-radio";
+// @import "bulma-css-variables/sass/form/checkbox-radio"; // ported into FormCheckbox.vue and local scoped styles in Avatar.vue + ViewEditForm.vue
 @import "bulma-css-variables/sass/form/select";
 // @import "bulma-css-variables/sass/form/file"; // not used; every file input is hidden and triggered via a custom button
 @import "bulma-css-variables/sass/form/tools";
diff --git a/frontend/src/views/user/settings/Avatar.vue b/frontend/src/views/user/settings/Avatar.vue
index 33a338549..1b3ce46d1 100644
--- a/frontend/src/views/user/settings/Avatar.vue
+++ b/frontend/src/views/user/settings/Avatar.vue
@@ -181,3 +181,33 @@ function cropAvatar() {
 	background: var(--white);
 }
 </style>
+
+<style lang="scss" scoped>
+// Ported from bulma-css-variables/sass/form/checkbox-radio.sass
+// (the %checkbox-radio placeholder), scoped to this component so we can
+// drop the global Bulma import.
+label.radio {
+	cursor: pointer;
+	display: inline-block;
+	line-height: 1.25;
+	position: relative;
+
+	input {
+		cursor: pointer;
+	}
+
+	&:hover {
+		color: var(--input-hover-color);
+	}
+
+	&[disabled],
+	input[disabled] {
+		color: var(--input-disabled-color);
+		cursor: not-allowed;
+	}
+
+	& + .radio {
+		margin-inline-start: .5em;
+	}
+}
+</style>