fix: improve layout of htmlLabels with helptext

Use inline-flex for the checkbox/radio `<label>` so that even if the label includes something like a div with bottom margin, the helptext popup still appears beside the label rather than underneath it
GateNLP · Nov 3, 2024 · 29ef3ca · 29ef3ca
1 parent 88ba89f
commit 29ef3ca
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/frontend/src/components/annotation/CheckboxInput.vue b/frontend/src/components/annotation/CheckboxInput.vue
@@ -51,5 +51,12 @@ name: "CheckboxInput",
 </script>
 
 <style scoped>
+div.custom-checkbox >>> label {
+  display: inline-flex;
+}
 
+div.custom-checkbox >>> svg.annotation-help-prompt {
+  margin-top: 0.3em;
+  margin-inline-start: 0.25em;
+}
 </style>
diff --git a/frontend/src/components/annotation/RadioInput.vue b/frontend/src/components/annotation/RadioInput.vue
@@ -48,4 +48,12 @@ export default {
 </script>
 
 <style scoped>
+div.custom-radio >>> label {
+  display: inline-flex;
+}
+
+div.custom-radio >>> svg.annotation-help-prompt {
+  margin-top: 0.3em;
+  margin-inline-start: 0.25em;
+}
 </style>