fix: improve responsive design for linear scale question component

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

src/components/Questions/QuestionLinearScale.vue

@@ -47,19 +47,31 @@
 				ref="lowest"
 				v-model="optionsLabelLowest"
 				class="label-input-field"
-				:label="t('forms', 'Label (optional)')"
-				:aria-label="t('forms', 'Label for lowest value')"
+				:label="t('forms', 'Label for lowest value')"
+				:placeholder="t('forms', 'Label (optional)')"
 				resize="none"
 				@input="resizeLabel('lowest')"
 				@blur="onBlur('lowest')">
 			</NcTextArea>
-			<div v-else-if="optionsLabelLowest !== ''" class="label-lowest">
+			<div
+				v-else-if="optionsLabelLowest !== ''"
+				:id="labelId"
+				class="label-lowest">
 				{{ optionsLabelLowest }}
 			</div>
-			<div class="question__content__options">
+			<fieldset class="question__content__options">
+				<legend class="hidden-visually">
+					{{
+						t('forms', 'From {firstOption} to {lastOption}', {
+							firstOption: optionsLabelLowest,
+							lastOption: optionsLabelHighest,
+						})
+					}}
+				</legend>
 				<NcCheckboxRadioSwitch
-					v-for="option in scaleOptions"
+					v-for="(option, index) in scaleOptions"
 					:key="option"
+					:aria-describedby="index === 0 ? labelId : undefined"
 					:disabled="!readOnly"
 					:checked="questionValues"
 					:value="option.toString()"
@@ -70,7 +82,7 @@
 					@keydown.enter.exact.prevent="onKeydownEnter">
 					{{ option }}
 				</NcCheckboxRadioSwitch>
-			</div>
+			</fieldset>
 			<NcTextArea
 				v-if="!readOnly"
 				ref="highest"
@@ -133,6 +145,13 @@ export default {
 			return this.values
 		},
 
+		/**
+		 * ID for the label for the lowest option
+		 */
+		labelId() {
+			return 'q' + this.index + '__label_lowest'
+		},
+
 		optionsLowest: {
 			get() {
 				return this.extraSettings?.optionsLowest ?? 1
@@ -152,8 +171,8 @@ export default {
 		optionsLabelLowest: {
 			get() {
 				return (
-					this.extraSettings?.optionsLabelLowest ??
-					t('forms', 'Strongly disagree')
+					this.extraSettings?.optionsLabelLowest
+					?? t('forms', 'Strongly disagree')
 				)
 			},
 			set(value) {
@@ -163,8 +182,8 @@ export default {
 		optionsLabelHighest: {
 			get() {
 				return (
-					this.extraSettings?.optionsLabelHighest ??
-					t('forms', 'Strongly agree')
+					this.extraSettings?.optionsLabelHighest
+					?? t('forms', 'Strongly agree')
 				)
 			},
 			set(value) {
@@ -251,45 +270,93 @@ export default {
 <style lang="scss" scoped>
 .question__content {
 	display: flex;
-	padding-block-start: var(--clickable-area-small);
+
+	@media (max-width: 768px) {
+		flex-wrap: wrap; // Allow wrapping for smaller screens
+	}
+
+	@media (min-width: 769px) {
+		padding-block-start: var(--clickable-area-small);
+	}
 
 	&__options {
 		width: 100%;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-evenly;
 		flex-grow: 1;
+
+		@media (max-width: 768px) {
+			flex-direction: column; // Stack options vertically on smaller screens
+			align-items: flex-start; // Align items to the left
+		}
 	}
 
 	&__edit {
 		margin-inline-start: -12px;
+
+		@media (max-width: 768px) {
+			margin-inline-end: calc(var(--clickable-area-large) - 2px);
+		}
+	}
+
+	:deep(.checkbox-content) {
+		display: flex;
+		flex-direction: row; // Labels next to checkboxes by default
+		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-large));
-		margin-inline-start: 8px;
+		margin-block-start: calc(-1 * var(--clickable-area-small));
+
+		@media (max-width: 768px) {
+			margin-block-start: 0;
+			margin-inline-start: var(--default-clickable-area);
+		}
 	}
 
 	.label-input-field {
 		width: 120px;
 		align-self: center;
 		min-height: fit-content;
 		flex-shrink: 0;
+
+		@media (max-width: 768px) {
+			width: 100%; // Full width on smaller screens
+			padding-block: var(--default-grid-baseline);
+		}
 	}
 
 	.label-lowest {
 		width: 120px;
 		align-self: center;
 		text-align: start;
 		flex-shrink: 0;
+
+		@media (max-width: 768px) {
+			width: 100%; // Full width on smaller screens
+			padding-block: var(--default-grid-baseline);
+		}
 	}
 
 	.label-highest {
 		width: 120px;
 		align-self: center;
 		text-align: end;
 		flex-shrink: 0;
+
+		@media (max-width: 768px) {
+			text-align: start;
+			width: 100%; // Full width on smaller screens
+			padding-block: var(--default-grid-baseline);
+		}
 	}
 }
 </style>