diff --git a/ui/src/widgets/ui-button-group/UIButtonGroup.vue b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
index d37f61689..d3aaa577d 100644
--- a/ui/src/widgets/ui-button-group/UIButtonGroup.vue
+++ b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
@@ -2,7 +2,7 @@
     <div class="nrdb-ui-button-group-wrapper">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <label v-if="label" class="v-label" v-html="label" />
-        <v-btn-toggle v-model="selection" mandatory divided :rounded="props.rounded ? 'xl' : ''" :color="selectedColor" :disabled="!state.enabled" @update:model-value="onChange(selection)">
+        <v-btn-toggle v-model="selection" class="d-flex flex-wrap" mandatory divided :rounded="props.rounded ? 'xl' : ''" :color="selectedColor" :disabled="!state.enabled" @update:model-value="onChange(selection)">
             <v-btn v-for="option in options" :key="option.value" :value="option.value">
                 <template v-if="option.icon && option.label !== undefined && option.label !== ''" #prepend>
                     <v-icon size="x-large" :icon="`mdi-${option.icon.replace(/^mdi-/, '')}`" />
@@ -154,6 +154,7 @@ export default {
     width: max-content;
     border-width: thin;
     border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    min-height: fit-content;
 }
 /* default styling for an unselected option */
 .nrdb-ui-button-group-wrapper .v-btn--variant-elevated {