diff --git a/common/locales/de.json b/common/locales/de.json
index 0a06360a60..0df54a9e2d 100644
--- a/common/locales/de.json
+++ b/common/locales/de.json
@@ -56,6 +56,7 @@
       "info": "Hier kannst du den Inhalt von diesem Block planen.{br}In der linken Spalte [Zeit] kannst du die Dauer der einzelnen Elemente erfassen.{br}In der rechten Spalte [Verantwortlich] kannst du Personen zuteilen.",
       "entity": {
         "section": {
+          "controls": "Aktionen",
           "fields": {
             "column1": "Zeit",
             "column2Html": "Programm",
@@ -198,4 +199,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/common/locales/en.json b/common/locales/en.json
index 8d068b2577..85450dcef8 100644
--- a/common/locales/en.json
+++ b/common/locales/en.json
@@ -60,6 +60,7 @@
     "storyboard": {
       "info": "Here you can plan the content of this block.{br}In the left column [Time] you can record the duration of the individual elements.{br}In the right column [Responsible] you can assign persons.",
       "entity": {
+        "controls": "Controls",
         "section": {
           "fields": {
             "column1": "Time",
@@ -205,4 +206,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3b8315037e..a236d96cab 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -54,6 +54,7 @@
         "url-template": "3.1.0",
         "util": "0.12.5",
         "uuid": "9.0.0",
+        "v-resize-observer": "^1.6.3",
         "vee-validate": "3.4.14",
         "vue": "2.7.14",
         "vue-axios": "3.5.2",
@@ -19451,6 +19452,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -21338,6 +21344,15 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v-resize-observer": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/v-resize-observer/-/v-resize-observer-1.6.3.tgz",
+      "integrity": "sha512-Dm8SSaNbag34DuTrdg4OIzyIj6MnVaU1VgU48Dv9/VX33gaN4IEoRywjZp/e9ooqtmZG47OhbSfUMoGFqNiPxg==",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 98aad5d7ae..a7de4d2464 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -68,6 +68,7 @@
     "url-template": "3.1.0",
     "util": "0.12.5",
     "uuid": "9.0.0",
+    "v-resize-observer": "^1.6.3",
     "vee-validate": "3.4.14",
     "vue": "2.7.14",
     "vue-axios": "3.5.2",
diff --git a/frontend/src/components/activity/CardContentNode.vue b/frontend/src/components/activity/CardContentNode.vue
index 10bf035adb..bf558c9258 100644
--- a/frontend/src/components/activity/CardContentNode.vue
+++ b/frontend/src/components/activity/CardContentNode.vue
@@ -2,7 +2,7 @@
   <v-card :elevation="draggable ? 4 : 0" :class="{ 'mx-2 my-2': draggable }">
     <v-card-title hide-actions class="pa-0 pr-sm-2">
       <v-toolbar dense flat>
-        <v-icon class="mr-1">{{ icon }}</v-icon>
+        <v-icon class="mr-2">{{ icon }}</v-icon>
 
         <div v-if="editInstanceName" style="flex: 1" @click.stop @keyup.prevent>
           <api-text-field
@@ -94,8 +94,9 @@ export default {
 }
 </script>
 
-<style scoped>
-.v-card:deep(button) {
+<style scoped lang="scss">
+.v-card:deep(button.visible-on-hover),
+.v-card:deep(button.tooltip-activator) {
   width: 36px !important;
   height: 36px !important;
 }
diff --git a/frontend/src/components/activity/content/Storyboard.vue b/frontend/src/components/activity/content/Storyboard.vue
index d88d9d4c62..0edeb132d7 100644
--- a/frontend/src/components/activity/content/Storyboard.vue
+++ b/frontend/src/components/activity/content/Storyboard.vue
@@ -1,124 +1,65 @@
 <template>
-  <card-content-node v-bind="$props">
-    <v-container fluid>
-      <v-row no-gutters class="text-subtitle-2">
-        <v-col cols="2">
-          {{ $tc('contentNode.storyboard.entity.section.fields.column1') }}
-        </v-col>
-        <v-col cols="7">
-          {{ $tc('contentNode.storyboard.entity.section.fields.column2Html') }}
-        </v-col>
-        <v-col cols="2">
-          {{ $tc('contentNode.storyboard.entity.section.fields.column3') }}
-        </v-col>
-        <v-col cols="1" />
-      </v-row>
-
-      <api-sortable
-        v-slot="sortable"
+  <card-content-node v-resizeobserver.debounce="onResize" v-bind="$props">
+    <component :is="variant === 'default' ? 'table' : 'div'">
+      <thead v-if="variant === 'default'">
+        <tr>
+          <th scope="col" class="text-left">
+            {{ $tc('contentNode.storyboard.entity.section.fields.column1') }}
+          </th>
+          <th scope="col" class="text-left">
+            {{ $tc('contentNode.storyboard.entity.section.fields.column2Html') }}
+          </th>
+          <th scope="col" class="text-left">
+            {{ $tc('contentNode.storyboard.entity.section.fields.column3') }}
+          </th>
+          <th>
+            <span class="d-sr-only">
+              {{ $tc('contentNode.storyboard.entity.section.controls') }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <StoryboardSortable
+        :entity="contentNode"
         :disabled="layoutMode || disabled"
         :items="sections"
+        :layout-mode="layoutMode"
+        :is-last-section="isLastSection"
+        :variant="variant"
         @sort="updateSections"
-      >
-        <api-form :entity="contentNode">
-          <v-row dense>
-            <v-col cols="2">
-              <api-text-field
-                :fieldname="`data.sections[${sortable.itemKey}].column1`"
-                :disabled="layoutMode || disabled"
-                :filled="layoutMode"
-              />
-            </v-col>
-            <v-col cols="7">
-              <api-richtext
-                :fieldname="`data.sections[${sortable.itemKey}].column2Html`"
-                rows="4"
-                :disabled="layoutMode || disabled"
-                :filled="layoutMode"
-              />
-            </v-col>
-            <v-col cols="2">
-              <api-text-field
-                :fieldname="`data.sections[${sortable.itemKey}].column3`"
-                :disabled="layoutMode || disabled"
-                :filled="layoutMode"
-              />
-            </v-col>
-            <v-col cols="1">
-              <v-container v-if="!layoutMode && !disabled" class="ma-0 pa-0">
-                <v-row no-gutters>
-                  <v-col cols="6">
-                    <div class="section-buttons">
-                      <dialog-remove-section
-                        @submit="sortable.on.delete(sortable.itemKey)"
-                      >
-                        <template #activator="{ on }">
-                          <v-btn
-                            icon
-                            x-small
-                            color="error"
-                            :disabled="isLastSection"
-                            v-on="on"
-                          >
-                            <v-icon>mdi-delete</v-icon>
-                          </v-btn>
-                        </template>
-                      </dialog-remove-section>
-                    </div>
-                    <v-btn
-                      icon
-                      x-small
-                      class="drag-and-drop-handle"
-                      :disabled="isLastSection"
-                    >
-                      <v-icon>mdi-drag-horizontal-variant</v-icon>
-                    </v-btn>
-                  </v-col>
-                  <v-col cols="6">
-                    <div class="section-buttons">
-                      <v-btn
-                        icon
-                        x-small
-                        :disabled="isLastSection"
-                        @click="sortable.on.moveUp(sortable.itemKey)"
-                      >
-                        <v-icon>mdi-arrow-up-bold</v-icon>
-                      </v-btn>
-
-                      <v-btn
-                        icon
-                        x-small
-                        :disabled="isLastSection"
-                        @click="sortable.on.moveDown(sortable.itemKey)"
-                      >
-                        <v-icon>mdi-arrow-down-bold</v-icon>
-                      </v-btn>
-                    </div>
-                  </v-col>
-                </v-row>
-              </v-container>
-            </v-col>
-          </v-row>
-        </api-form>
-      </api-sortable>
-
-      <!-- add at end position -->
-      <v-row no-gutters justify="center">
-        <v-col cols="1">
-          <v-btn
-            v-if="!layoutMode && !disabled"
-            icon
-            small
-            class="button-add"
-            color="success"
-            :loading="isAdding"
-            @click="addSection"
-          >
-            <v-icon>mdi-plus</v-icon>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-container>
+      />
+      <template v-if="!layoutMode && !disabled">
+        <tfoot v-if="variant === 'default'">
+          <tr>
+            <td colspan="4">
+              <v-btn
+                block
+                icon
+                class="button-add"
+                color="success"
+                rounded
+                :loading="isAdding"
+                @click="addSection"
+              >
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </td>
+          </tr>
+        </tfoot>
+        <v-btn
+          v-else
+          block
+          icon
+          class="button-add"
+          color="success"
+          rounded
+          :loading="isAdding"
+          @click="addSection"
+        >
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </template>
+    </component>
   </card-content-node>
 </template>
 
@@ -128,18 +69,19 @@ import CardContentNode from '@/components/activity/CardContentNode.vue'
 import { contentNodeMixin } from '@/mixins/contentNodeMixin.js'
 import ApiSortable from '@/components/form/api/ApiSortable.vue'
 
-import DialogRemoveSection from './StoryboardDialogRemoveSection.vue'
-
 import { v4 as uuidv4 } from 'uuid'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
+import StoryboardRow from '@/components/activity/content/StoryboardRow.vue'
+import StoryboardSortable from '@/components/activity/content/StoryboardSortable.vue'
 
 export default {
   name: 'Storyboard',
   components: {
+    StoryboardSortable,
+    StoryboardRow,
     CardContentNode,
     ApiForm,
     ApiSortable,
-    DialogRemoveSection,
   },
   mixins: [contentNodeMixin],
   props: {
@@ -148,6 +90,7 @@ export default {
   data() {
     return {
       isAdding: false,
+      clientWidth: 1000,
     }
   },
   computed: {
@@ -165,8 +108,17 @@ export default {
     isLastSection() {
       return Object.keys(this.sections).length === 1
     },
+    variant() {
+      return this.clientWidth <= 910 ? 'dense' : 'default'
+    },
+  },
+  mounted() {
+    this.clientWidth = this.$el.clientWidth
   },
   methods: {
+    onResize({ width }) {
+      this.clientWidth = width
+    },
     async addSection() {
       this.isAdding = true
 
@@ -207,32 +159,13 @@ export default {
 }
 </script>
 
-<style scoped>
-.section-buttons {
-  width: 40px;
-}
-
-.row-inter {
-  height: 4px;
-  transition: 0s height;
-  transition-duration: 0.5s;
-}
-.row-inter:hover {
-  height: 30px;
-  background-color: #eeeeee;
-  transition-delay: 0.3s;
-}
-
-.row-inter .button-add {
-  opacity: 0;
-  height: 0;
-  transition: 0s height, opacity;
-  transition-duration: 0.5s;
-}
-
-.row-inter:hover .button-add {
-  opacity: 1;
-  height: 30px;
-  transition-delay: 0.3s;
+<style scoped lang="scss">
+:deep {
+  .v-text-field.v-text-field--enclosed.v-text-field--outlined:not(.v-input--dense)
+    .editor {
+    margin-top: 10px;
+    padding-top: 5px;
+    margin-bottom: 10px;
+  }
 }
 </style>
diff --git a/frontend/src/components/activity/content/StoryboardRow.vue b/frontend/src/components/activity/content/StoryboardRow.vue
new file mode 100644
index 0000000000..769a2f49d8
--- /dev/null
+++ b/frontend/src/components/activity/content/StoryboardRow.vue
@@ -0,0 +1,188 @@
+<template>
+  <tr
+    class="e-storyboard-row"
+    :class="{
+      'e-storyboard-row--default': variant === 'default',
+      'e-storyboard-row--dense': variant === 'dense',
+    }"
+  >
+    <td class="e-storyboard-row__time">
+      <api-text-field
+        :label="
+          variant === 'dense'
+            ? $tc('contentNode.storyboard.entity.section.fields.column1')
+            : null
+        "
+        :single-line="variant === 'default'"
+        :fieldname="`data.sections[${itemKey}].column1`"
+        :disabled="layoutMode || disabled"
+        :filled="layoutMode"
+      />
+    </td>
+    <td class="e-storyboard-row__text">
+      <api-richtext
+        :label="
+          variant === 'dense'
+            ? $tc('contentNode.storyboard.entity.section.fields.column2Html')
+            : null
+        "
+        :fieldname="`data.sections[${itemKey}].column2Html`"
+        rows="4"
+        :disabled="layoutMode || disabled"
+        :filled="layoutMode"
+      />
+    </td>
+    <td class="e-storyboard-row__responsible">
+      <api-text-field
+        :label="
+          variant === 'dense'
+            ? $tc('contentNode.storyboard.entity.section.fields.column3')
+            : null
+        "
+        :single-line="variant === 'default'"
+        :fieldname="`data.sections[${itemKey}].column3`"
+        :disabled="layoutMode || disabled"
+        :filled="layoutMode"
+      />
+    </td>
+    <td v-if="!layoutMode && !disabled" class="e-storyboard-row__controls">
+      <div class="e-storyboard-row__controls__move">
+        <v-btn
+          v-if="variant === 'dense'"
+          icon
+          small
+          :disabled="isLastSection"
+          @click="$emit('moveUp', itemKey)"
+        >
+          <v-icon>mdi-arrow-up</v-icon>
+        </v-btn>
+        <v-btn
+          v-if="variant !== 'dense'"
+          icon
+          small
+          class="drag-and-drop-handle"
+          :disabled="isLastSection"
+        >
+          <v-icon>mdi-drag</v-icon>
+        </v-btn>
+        <v-btn
+          v-if="variant === 'dense'"
+          icon
+          small
+          :disabled="isLastSection"
+          @click="$emit('moveDown', itemKey)"
+        >
+          <v-icon>mdi-arrow-down</v-icon>
+        </v-btn>
+      </div>
+      <dialog-remove-section @submit="$emit('delete', itemKey)">
+        <template #activator="{ on }">
+          <v-btn
+            icon
+            small
+            class="e-storyboard-row__delete"
+            color="error"
+            :disabled="isLastSection"
+            v-on="on"
+          >
+            <v-icon>mdi-delete-outline</v-icon>
+          </v-btn>
+        </template>
+      </dialog-remove-section>
+    </td>
+  </tr>
+</template>
+<script>
+import DialogRemoveSection from './StoryboardDialogRemoveSection.vue'
+
+export default {
+  name: 'StoryboardRow',
+  components: { DialogRemoveSection },
+  props: {
+    isLastSection: { type: Boolean, required: true },
+    itemKey: { type: String, required: true },
+    layoutMode: { type: Boolean, required: true },
+    disabled: { type: Boolean, default: false },
+    variant: { type: String, default: 'default' },
+  },
+}
+</script>
+<style scoped lang="scss">
+.e-storyboard-row {
+  &:hover .e-storyboard-row__delete {
+    opacity: 1;
+  }
+}
+
+.e-storyboard-row__delete {
+  color: rgba(0, 0, 0, 0.54) !important;
+
+  &:hover {
+    color: #d32f2f !important;
+  }
+}
+
+.e-storyboard-row--dense {
+  display: grid;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  grid-template-areas:
+    'time responsible controls'
+    'text text        controls';
+  grid-template-columns: 1fr 1fr min-content;
+
+  .e-storyboard-row__time {
+    grid-area: time;
+  }
+
+  .e-storyboard-row__text {
+    grid-area: text;
+  }
+
+  .e-storyboard-row__responsible {
+    grid-area: responsible;
+  }
+
+  .e-storyboard-row__controls {
+    grid-area: controls;
+    display: grid;
+  }
+
+  .e-storyboard-row__delete {
+    margin-top: auto;
+  }
+}
+
+.e-storyboard-row--default {
+  vertical-align: top;
+
+  .e-storyboard-row__time {
+    width: 15%;
+    padding-right: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .e-storyboard-row__text {
+    width: 70%;
+    padding-right: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .e-storyboard-row__responsible {
+    width: 15%;
+    padding-bottom: 0.5rem;
+  }
+
+  .e-storyboard-row__controls {
+    align-content: space-between;
+  }
+
+  .e-storyboard-row__delete {
+    opacity: 0;
+  }
+}
+
+.e-form-container + .e-form-container {
+  margin-top: 0;
+}
+</style>
diff --git a/frontend/src/components/activity/content/StoryboardSortable.vue b/frontend/src/components/activity/content/StoryboardSortable.vue
new file mode 100644
index 0000000000..edf0f15102
--- /dev/null
+++ b/frontend/src/components/activity/content/StoryboardSortable.vue
@@ -0,0 +1,189 @@
+<template>
+  <draggable
+    v-model="localSortedKeys"
+    ghost-class="ghost"
+    handle=".drag-and-drop-handle"
+    :animation="200"
+    :force-fallback="true"
+    :disabled="disabled"
+    class="d-contents"
+    @sort="onSort"
+    @start="dragging = true"
+    @end="dragging = false"
+  >
+    <!-- disable transition for drag&drop as draggable already comes with its own animations -->
+    <transition-group
+      :name="!dragging ? 'flip-list' : null"
+      :tag="variant === 'dense' ? 'div' : 'tbody'"
+      role="rowgroup"
+    >
+      <StoryboardRow
+        v-for="key in localSortedKeys"
+        :key="key"
+        :is-last-section="isLastSection"
+        :variant="variant"
+        :item-key="key"
+        :disabled="disabled"
+        :layout-mode="layoutMode"
+        @delete="deleteItem"
+        @moveDown="moveDown"
+        @moveUp="moveUp"
+      />
+    </transition-group>
+  </draggable>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { isEqual } from 'lodash'
+import StoryboardRow from '@/components/activity/content/StoryboardRow.vue'
+
+export default {
+  name: 'StoryboardSortable',
+  components: {
+    StoryboardRow,
+    draggable,
+  },
+  provide() {
+    return {
+      apiUri: this.entity._meta.self,
+    }
+  },
+  props: {
+    items: { type: Object, required: true },
+    isLastSection: { type: Boolean, required: true },
+    disabled: { type: Boolean, default: false },
+    layoutMode: { type: Boolean, required: true },
+    entity: { type: Object, required: true },
+    variant: { type: String, required: true },
+  },
+  data() {
+    return {
+      dragging: false,
+      dirty: false,
+      localSortedKeys: [],
+      eventHandlers: {
+        moveUp: this.moveUp,
+        moveDown: this.moveDown,
+        delete: this.delete,
+      },
+    }
+  },
+  computed: {
+    // keys within items property, sorted by position (and key as fallback)
+    sortedKeys() {
+      return Object.keys(this.items).sort((keyA, keyB) => {
+        const positionA = this.items[keyA].position
+        const positionB = this.items[keyB].position
+
+        if (positionA !== positionB) {
+          // firstly: sort by position property
+          return positionA - positionB
+        } else {
+          // secondly: sort by id (string compare)
+          return keyA.localeCompare(keyB)
+        }
+      })
+    },
+  },
+  watch: {
+    sortedKeys: {
+      handler: function (sortedKeys) {
+        // update local sorting with external sorting if not dirty
+        // or if number of items don't match (new incoming items or deleted items)
+        if (!this.dirty || sortedKeys.length !== this.localSortedKeys.length) {
+          this.localSortedKeys = sortedKeys
+          this.dirty = false
+
+          // remove dirty flag if external sorting is equal to local sorting (e.g. saving to API was successful)
+        } else if (isEqual(this.localSortedKeys, sortedKeys)) {
+          this.dirty = false
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    async moveUp(key) {
+      this.swapPosition(key, -1)
+    },
+    async moveDown(key) {
+      this.swapPosition(key, +1)
+    },
+
+    // swaps position of entity with the element which is deltaPosition down/ahead in the list
+    async swapPosition(key, deltaPosition) {
+      const list = this.localSortedKeys
+      const oldIndex = list.indexOf(key)
+
+      const newIndex = oldIndex + deltaPosition
+
+      // newIndex has to be within the list (cannot move first element up or last element down)
+      if (newIndex >= 0 && newIndex < list.length) {
+        // swap spaces in sortedKeys
+        const movingListItem = list[oldIndex]
+        this.$set(list, oldIndex, list[newIndex])
+        this.$set(list, newIndex, movingListItem)
+
+        this.onSort()
+      }
+    },
+
+    async deleteItem(key) {
+      this.dirty = true
+
+      // remove item from array of sorted keys
+      const indexToDelete = this.localSortedKeys.indexOf(key)
+      this.localSortedKeys.splice(indexToDelete, 1)
+
+      // generate positions
+      const payload = this.recalculatePositions()
+
+      // replace deleted item with null value
+      payload[key] = null
+
+      this.$emit('sort', payload)
+    },
+
+    /**
+     * Triggers on every sorting change
+     */
+    onSort() {
+      this.dirty = true
+
+      this.$emit('sort', this.recalculatePositions())
+    },
+
+    /**
+     * Recalculates position properties based on current sorting and prepares patch payload
+     */
+    recalculatePositions() {
+      const payload = {}
+      let position = 1
+      this.localSortedKeys.forEach((key) => {
+        payload[key] = { position }
+        position++
+      })
+
+      return payload
+    },
+  },
+}
+</script>
+
+<style scoped>
+.flip-list-move {
+  transition: transform 0.5s;
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+:deep(.drag-and-drop-handle) {
+  cursor: grab;
+}
+</style>
diff --git a/frontend/src/components/form/tiptap/VTiptapEditor.vue b/frontend/src/components/form/tiptap/VTiptapEditor.vue
index cd4a86f125..b6f7b9810f 100644
--- a/frontend/src/components/form/tiptap/VTiptapEditor.vue
+++ b/frontend/src/components/form/tiptap/VTiptapEditor.vue
@@ -78,6 +78,7 @@ div.v-text-field__slot {
 .v-text-field.v-text-field--enclosed.v-text-field--single-line:not(.v-input--dense)
   .editor,
 .v-text-field.v-text-field--enclosed.v-text-field--outlined:not(.v-input--dense) .editor {
-  margin-top: 10px;
+  margin-top: 6px;
+  margin-bottom: 6px;
 }
 </style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f3be61c188..3c5498ffe9 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -19,6 +19,7 @@ import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 
 import { Resize } from 'vuetify/lib/directives'
+import ResizeObserver from 'v-resize-observer'
 
 if (window.environment && window.environment.SENTRY_FRONTEND_DSN) {
   const environment = window.environment.SENTRY_ENVIRONMENT ?? 'http://localhost:3000'
@@ -45,6 +46,7 @@ Vue.use(Toast, {
 
 // manually importing necessary vuetify directives (there's no auomatic vuetify-loader for vitejs)
 Vue.directive('resize', Resize)
+Vue.directive('resizeobserver', ResizeObserver.directive)
 
 new Vue({
   router,
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index 37b11af379..e409db2aa0 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -98,3 +98,7 @@ body {
 .d-flow-root {
   display: flow-root;
 }
+
+.d-contents {
+  display: contents;
+}