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

@@ -152,8 +152,8 @@ export default {
 		optionsLabelLowest: {
 			get() {
 				return (
-					this.extraSettings?.optionsLabelLowest ??
-					t('forms', 'Strongly disagree')
+					this.extraSettings?.optionsLabelLowest
+					?? t('forms', 'Strongly disagree')
 				)
 			},
 			set(value) {
@@ -163,8 +163,8 @@ export default {
 		optionsLabelHighest: {
 			get() {
 				return (
-					this.extraSettings?.optionsLabelHighest ??
-					t('forms', 'Strongly agree')
+					this.extraSettings?.optionsLabelHighest
+					?? t('forms', 'Strongly agree')
 				)
 			},
 			set(value) {
@@ -251,45 +251,86 @@ 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;
 	}
 
+	: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(--default-clickable-area));
+
+		@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
+		}
 	}
 
 	.label-lowest {
 		width: 120px;
 		align-self: center;
 		text-align: start;
 		flex-shrink: 0;
+
+		@media (max-width: 768px) {
+			width: 100%; // Full width on smaller screens
+		}
 	}
 
 	.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
+		}
 	}
 }
 </style>