feat: improve label handling for linear scale component with dynamic display

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

Author: Chartman123

src/components/Questions/QuestionLinearScale.vue

@@ -34,13 +34,21 @@
 					<IconPencil :size="20" />
 				</template>
 			</NcActionInput>
-			<NcActionInput>
+			<NcActionInput
+				v-model="labelLowest"
+				:label="t('forms', 'Label for lowest value')"
+				label-outside
+				:show-trailing-button="false">
 				<template #icon>
 					<IconPencil :size="20" />
 				</template>
 				{{ t('forms', 'Label for lowest value') }}
 			</NcActionInput>
-			<NcActionInput>
+			<NcActionInput
+				v-model="labelHighest"
+				:label="t('forms', 'Label for highest value')"
+				label-outside
+				:show-trailing-button="false">
 				<template #icon>
 					<IconPencil :size="20" />
 				</template>
@@ -49,6 +57,7 @@
 		</template>
 
 		<div class="question__content">
+			<template v-if="labelLowest !== ''">{{ labelLowest }}</template>
 			<NcCheckboxRadioSwitch
 				v-for="option in scaleOptions"
 				:key="option"
@@ -65,6 +74,7 @@
 				@keydown.enter.exact.prevent="onKeydownEnter">
 				{{ option }}
 			</NcCheckboxRadioSwitch>
+			<template v-if="labelHighest !== ''">{{ labelHighest }}</template>
 		</div>
 	</Question>
 </template>
@@ -95,6 +105,8 @@ export default {
 
 			lowestOption: 1,
 			highestOption: 5,
+			labelLowest: 'Lowest',
+			labelHighest: 'Highest',
 		}
 	},
 
@@ -147,4 +159,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.question__content {
+	all: unset;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	width: 100%;
+	align-items: center;
+}
+</style>