From a8ab86c2645e1c7cc6ede88bfc8aa85b3db4afda Mon Sep 17 00:00:00 2001
From: Mirko Dietrich <dietrich@math.tu-berlin.de>
Date: Mon, 26 Jan 2026 16:10:35 +0100
Subject: [PATCH] fix(frontend): `GroupElement` positions elements horizontally
 with responsive behavior

Closes #244
---
 .../question/elements/GroupElement.vue        | 46 +++++++++++++++----
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/question/elements/GroupElement.vue b/frontend/src/components/question/elements/GroupElement.vue
index cad85f0d..ba72d566 100644
--- a/frontend/src/components/question/elements/GroupElement.vue
+++ b/frontend/src/components/question/elements/GroupElement.vue
@@ -6,20 +6,19 @@
 
 <template>
     <BCard v-show="!isHiddenByCond" :footer="helpText" :id="id" :title="element.label">
-        <div class="vstack gap-3">
-            <FormElement
-                v-for="el in element.elements"
-                :disabled="isDisabled"
-                :key="el.name"
-                :element="el"
-                :path-prefix="[...pathPrefix, element.name]"
-            />
-        </div>
+        <BContainer fluid gutter-x="0">
+            <BRow ref="row">
+                <BCol v-for="el in element.elements" :key="el.name" :class="columnClass">
+                    <FormElement :disabled="isDisabled" :element="el" :path-prefix="[...pathPrefix, element.name]" />
+                </BCol>
+            </BRow>
+        </BContainer>
     </BCard>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { breakpointsBootstrapV5, useBreakpoints, useResizeObserver } from '@vueuse/core'
+import { computed, ref, useTemplateRef } from 'vue'
 
 import { useConditions, useHelp, useId, useIsDisabled, usePath } from '@/composables/question/elements'
 import type { ElementPath, GroupElement } from '@/types'
@@ -35,4 +34,31 @@ const id = useId(path)
 const { isDisabledByCond, isHiddenByCond } = useConditions(pathPrefix, element)
 const { helpText } = useHelp(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
+
+const breakpoints = useBreakpoints(breakpointsBootstrapV5)
+const el = useTemplateRef('row')
+
+function getColumnClass() {
+    // Fit elements horizontally, but...
+    const base = Math.floor(12 / element.elements.length)
+
+    // ...max 3 (xxl)
+    if (breakpoints.isGreaterOrEqual('xxl')) {
+        return `col-xxl-${Math.max(4, base)}`
+    }
+
+    // ...max 2 (xl)
+    if (breakpoints.isGreaterOrEqual('xl')) {
+        return `col-xl-${Math.max(6, base)}`
+    }
+
+    // ..max 1 (<xl)
+    return 'col-12'
+}
+
+const columnClass = ref(getColumnClass())
+
+useResizeObserver(el, () => {
+    columnClass.value = getColumnClass()
+})
 </script>