fix(linear-scale): add custom wrapper instead of CSS hack

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/Questions/QuestionLinearScale.vue

@@ -71,20 +71,20 @@
 						})
 					}}
 				</legend>
-				<NcCheckboxRadioSwitch
-					v-for="(option, index) in scaleOptions"
-					:key="option"
-					:aria-describedby="index === 0 ? labelId : undefined"
-					:disabled="!readOnly"
-					:checked="questionValues"
-					:value="option.toString()"
-					:name="`${id}-answer`"
-					type="radio"
-					:required="checkRequired(option)"
-					@update:checked="onChange"
-					@keydown.enter.exact.prevent="onKeydownEnter">
-					{{ option }}
-				</NcCheckboxRadioSwitch>
+				<div v-for="(option, index) in scaleOptions" :key="option" class="linear-scale-option__wrapper">
+					<label :for="`linear-scale-${id}-${option}`">{{ option }}</label>
+					<NcCheckboxRadioSwitch
+						:id="`linear-scale-${id}-${option}`"
+						:aria-describedby="index === 0 ? labelId : undefined"
+						:disabled="!readOnly"
+						:model-value="questionValues"
+						:value="option.toString()"
+						:name="`${id}-answer`"
+						type="radio"
+						:required="checkRequired(option)"
+						@update:modelValue="onChange"
+						@keydown.enter.exact.prevent="onKeydownEnter" />
+				</div>
 			</fieldset>
 			<NcTextArea
 				v-if="!readOnly"
@@ -306,25 +306,15 @@ export default {
 		}
 	}
 
-	:deep(.checkbox-content) {
+	.linear-scale-option__wrapper {
 		display: flex;
-		flex-direction: row; // Labels next to checkboxes by default
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) / 2);
 		align-items: center;
-		text-align: center;
-
-		@media (min-width: 769px) {
-			flex-direction: column; // Labels above checkboxes on larger screens
-			align-items: center;
-		}
-	}
-
-	:deep(.checkbox-content__text) {
-		position: absolute;
-		margin-block-start: calc(-1 * var(--clickable-area-small));
+		justify-content: center;
 
 		@media (max-width: 768px) {
-			margin-block-start: 0;
-			margin-inline-start: var(--default-clickable-area);
+			flex-direction: row-reverse;
 		}
 	}