From 340b240f0f6f61070bfd78fcedf6af82f4e2eee4 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 24 Feb 2021 19:02:45 -0500
Subject: [PATCH] Fix responsiveness of radio-buttons / checkboxes

Fixes #4275
---
 app/src/interfaces/checkboxes/checkboxes.vue  | 66 +++++++++++--------
 .../radio-buttons/radio-buttons.vue           | 28 ++++----
 2 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/app/src/interfaces/checkboxes/checkboxes.vue b/app/src/interfaces/checkboxes/checkboxes.vue
index 0d2720f95c..e078729956 100644
--- a/app/src/interfaces/checkboxes/checkboxes.vue
+++ b/app/src/interfaces/checkboxes/checkboxes.vue
@@ -22,13 +22,12 @@
 			:input-value="value || []"
 			@change="$emit('input', $event)"
 		/>
-		<v-detail 
+		<v-detail
 			v-if="hideChoices && showAll === false"
 			:class="gridClass"
-			:label="$t(`interfaces.checkboxes.show_more`, {count: hiddenCount})"
+			:label="$t(`interfaces.checkboxes.show_more`, { count: hiddenCount })"
 			@toggle="showAll = true"
-		>
-		</v-detail>
+		></v-detail>
 
 		<template v-if="allowOther">
 			<v-checkbox
@@ -107,23 +106,23 @@ export default defineComponent({
 		},
 		itemsShown: {
 			type: Number,
-			default: 8
-		}		
+			default: 8,
+		},
 	},
 	setup(props, { emit }) {
 		const { choices, value } = toRefs(props);
 		const showAll = ref(false);
 
-		const hideChoices = computed(() => props.choices.length > props.itemsShown)
+		const hideChoices = computed(() => props.choices.length > props.itemsShown);
 
 		const choicesDisplayed = computed(() => {
-			if(showAll.value || hideChoices.value === false) {
-				return props.choices
+			if (showAll.value || hideChoices.value === false) {
+				return props.choices;
 			}
-			return props.choices.slice(0, props.itemsShown)
-		})
+			return props.choices.slice(0, props.itemsShown);
+		});
 
-		const hiddenCount = computed(() => props.choices.length - props.itemsShown)
+		const hiddenCount = computed(() => props.choices.length - props.itemsShown);
 
 		const gridClass = computed(() => {
 			if (choices.value === null) return null;
@@ -146,34 +145,46 @@ export default defineComponent({
 
 		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(value, choices, emit);
 
-		return { gridClass, otherValues, addOtherValue, setOtherValue, choicesDisplayed, hideChoices, showAll, hiddenCount };
+		return {
+			gridClass,
+			otherValues,
+			addOtherValue,
+			setOtherValue,
+			choicesDisplayed,
+			hideChoices,
+			showAll,
+			hiddenCount,
+		};
 	},
 });
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .checkboxes {
+	--columns: 1;
+
 	display: grid;
 	grid-gap: 12px 32px;
+	grid-template-columns: repeat(var(--columns), 1fr);
+}
 
-	&.grid-1 {
-		grid-template-columns: repeat(1, 1fr);
+.grid-2 {
+	@include breakpoint(small) {
+		--columns: 2;
 	}
+}
 
-	&.grid-2 {
-		grid-template-columns: repeat(2, 1fr);
+.grid-3 {
+	@include breakpoint(small) {
+		--columns: 3;
 	}
+}
 
-	&.grid-3 {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	&.grid-4 {
-		grid-template-columns: repeat(4, 1fr);
-	}
-
-	.v-button {
-		--v-button-width: 100%;
+.grid-4 {
+	@include breakpoint(small) {
+		--columns: 4;
 	}
 }
 
@@ -196,7 +207,6 @@ export default defineComponent({
 	&.grid-4 {
 		grid-column: span 4;
 	}
-	
 }
 
 .add-new {
diff --git a/app/src/interfaces/radio-buttons/radio-buttons.vue b/app/src/interfaces/radio-buttons/radio-buttons.vue
index 578882aa0c..538af64c57 100644
--- a/app/src/interfaces/radio-buttons/radio-buttons.vue
+++ b/app/src/interfaces/radio-buttons/radio-buttons.vue
@@ -32,12 +32,7 @@
 			}"
 		>
 			<v-icon :disabled="disabled" :name="customIcon" @click="$emit('input', otherValue)" />
-			<input
-				v-model="otherValue"
-				:placeholder="$t('other')"
-				:disabled="disabled"
-				@focus="$emit('input', otherValue)"
-			/>
+			<input v-model="otherValue" :placeholder="$t('other')" :disabled="disabled" @focus="$emit('input', otherValue)" />
 		</div>
 	</div>
 </template>
@@ -122,25 +117,32 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .radio-buttons {
+	--columns: 1;
+
 	display: grid;
 	grid-gap: 12px 32px;
-}
-
-.grid-1 {
-	grid-template-columns: repeat(1, 1fr);
+	grid-template-columns: repeat(var(--columns), 1fr);
 }
 
 .grid-2 {
-	grid-template-columns: repeat(2, 1fr);
+	@include breakpoint(small) {
+		--columns: 2;
+	}
 }
 
 .grid-3 {
-	grid-template-columns: repeat(3, 1fr);
+	@include breakpoint(small) {
+		--columns: 3;
+	}
 }
 
 .grid-4 {
-	grid-template-columns: repeat(4, 1fr);
+	@include breakpoint(small) {
+		--columns: 4;
+	}
 }
 
 .custom {