From edb06c290b914c876b5ab67b8c0e24a4425c0ead Mon Sep 17 00:00:00 2001
From: Bram <bram2w@users.noreply.github.com>
Date: Tue, 19 May 2026 11:34:29 +0200
Subject: [PATCH 1/2] feat Show matching restricted view filters and allow
 setting default values (#5149)

---
 .../contrib/database/api/rows/views.py        |  41 +-
 ...show_matching_restricted_view_filters.json |   9 +
 .../assets/scss/components/all.scss           |   1 +
 .../restricted_view_filter_context.scss       |  95 ++++
 .../views/RestrictedViewFilterContext.vue     | 454 ++++++++++++++++++
 .../baserow_enterprise/locales/en.json        |   8 +
 .../baserow_enterprise/viewOwnershipTypes.js  |  14 +
 .../baserow_premium/api/row_comments/views.py |  27 +-
 .../components/fields/multiple_select.scss    |   4 +
 .../FieldMultipleSelectOptionsSubForm.vue     |   7 +
 .../components/field/FieldNumberSubForm.vue   |   7 +
 .../field/FieldSingleSelectOptionsSubForm.vue |   7 +
 .../components/field/FieldTextSubForm.vue     |   7 +
 .../row/RowEditFieldMultipleSelect.vue        |   6 +-
 .../row/RowEditFieldSingleSelect.vue          |   1 +
 .../database/components/table/Table.vue       |   1 +
 .../components/view/DefaultValuesModal.vue    |   5 +-
 .../database/components/view/ViewContext.vue  |  11 +
 .../view/ViewFieldConditionsForm.vue          |   1 +
 .../database/components/view/ViewFilter.vue   |   5 +
 .../components/view/ViewFilterForm.vue        |  25 +-
 web-frontend/modules/database/locales/en.json |   1 +
 .../modules/database/mixins/fieldSubForm.js   |   9 +
 .../modules/database/viewOwnershipTypes.js    |  13 +
 .../integrations/LocalBaserowAdhocHeader.vue  |   1 +
 .../__snapshots__/viewFilterForm.spec.js.snap |   4 +
 26 files changed, 749 insertions(+), 15 deletions(-)
 create mode 100644 changelog/entries/unreleased/feature/4926_show_matching_restricted_view_filters.json
 create mode 100644 enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/restricted_view_filter_context.scss
 create mode 100644 enterprise/web-frontend/modules/baserow_enterprise/components/views/RestrictedViewFilterContext.vue

diff --git a/backend/src/baserow/contrib/database/api/rows/views.py b/backend/src/baserow/contrib/database/api/rows/views.py
index 7a1821a173..bad17ed884 100644
--- a/backend/src/baserow/contrib/database/api/rows/views.py
+++ b/backend/src/baserow/contrib/database/api/rows/views.py
@@ -558,7 +558,11 @@ def get(self, request, table_id, query_params):
             ),
             401: get_error_schema(["ERROR_NO_PERMISSION_TO_TABLE"]),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -821,7 +825,11 @@ class RowView(APIView):
             ),
             401: get_error_schema(["ERROR_NO_PERMISSION_TO_TABLE"]),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -830,6 +838,7 @@ class RowView(APIView):
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             NoPermissionToTable: ERROR_NO_PERMISSION_TO_TABLE,
             TokenCannotIncludeRowMetadata: ERROR_CANNOT_INCLUDE_ROW_METADATA,
             FieldDataConstraintException: ERROR_FIELD_DATA_CONSTRAINT,
@@ -956,7 +965,11 @@ def get(self, request, table_id, row_id, metadata, query_params: dict):
             ),
             401: get_error_schema(["ERROR_NO_PERMISSION_TO_TABLE"]),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -965,6 +978,7 @@ def get(self, request, table_id, row_id, metadata, query_params: dict):
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             NoPermissionToTable: ERROR_NO_PERMISSION_TO_TABLE,
             DeadlockException: ERROR_DATABASE_DEADLOCK,
             FieldDataConstraintException: ERROR_FIELD_DATA_CONSTRAINT,
@@ -1088,7 +1102,11 @@ def patch(
                 ["ERROR_USER_NOT_IN_GROUP", "ERROR_CANNOT_DELETE_ALREADY_DELETED_ITEM"]
             ),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -1097,6 +1115,7 @@ def patch(
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             NoPermissionToTable: ERROR_NO_PERMISSION_TO_TABLE,
             CannotDeleteAlreadyDeletedItem: ERROR_CANNOT_DELETE_ALREADY_DELETED_ITEM,
             CannotDeleteRowsInTable: ERROR_CANNOT_DELETE_ROWS_IN_TABLE,
@@ -1337,7 +1356,11 @@ class BatchRowsView(APIView):
             ),
             401: get_error_schema(["ERROR_NO_PERMISSION_TO_TABLE"]),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -1347,6 +1370,7 @@ class BatchRowsView(APIView):
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
             RowIdsNotUnique: ERROR_ROW_IDS_NOT_UNIQUE,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             NoPermissionToTable: ERROR_NO_PERMISSION_TO_TABLE,
             CannotCreateRowsInTable: ERROR_CANNOT_CREATE_ROWS_IN_TABLE,
             DeadlockException: ERROR_DATABASE_DEADLOCK,
@@ -1501,7 +1525,11 @@ def post(self, request: Request, table_id: int, query_params) -> Response:
             ),
             401: get_error_schema(["ERROR_NO_PERMISSION_TO_TABLE"]),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -1511,6 +1539,7 @@ def post(self, request: Request, table_id: int, query_params) -> Response:
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
             RowIdsNotUnique: ERROR_ROW_IDS_NOT_UNIQUE,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             NoPermissionToTable: ERROR_NO_PERMISSION_TO_TABLE,
             DeadlockException: ERROR_DATABASE_DEADLOCK,
             FieldDataConstraintException: ERROR_FIELD_DATA_CONSTRAINT,
diff --git a/changelog/entries/unreleased/feature/4926_show_matching_restricted_view_filters.json b/changelog/entries/unreleased/feature/4926_show_matching_restricted_view_filters.json
new file mode 100644
index 0000000000..84b5e180cb
--- /dev/null
+++ b/changelog/entries/unreleased/feature/4926_show_matching_restricted_view_filters.json
@@ -0,0 +1,9 @@
+{
+  "type": "feature",
+  "message": "Show matching restricted view filters and allow setting default values",
+  "issue_origin": "github",
+  "issue_number": 4926,
+  "domain": "database",
+  "bullet_points": [],
+  "created_at": "2026-04-08"
+}
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/all.scss b/enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/all.scss
index 533258413e..6239ef9ae8 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/all.scss
+++ b/enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/all.scss
@@ -25,3 +25,4 @@
 @import 'assistant_onboarding';
 @import 'date_dependency';
 @import 'data_scanner';
+@import 'restricted_view_filter_context';
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/restricted_view_filter_context.scss b/enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/restricted_view_filter_context.scss
new file mode 100644
index 0000000000..cf5d3c71a8
--- /dev/null
+++ b/enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/restricted_view_filter_context.scss
@@ -0,0 +1,95 @@
+.restricted-view-filter-context {
+  .expandable__content--card {
+    padding: 0;
+  }
+}
+
+.restricted-view-filter-context__head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.restricted-view-filter-context__icon {
+  flex: 0 0 20px;
+  font-size: 16px;
+  position: relative;
+  top: 1px;
+
+  &--warning {
+    color: $palette-yellow-800;
+  }
+
+  &--success {
+    color: $palette-green-700;
+  }
+}
+
+.restricted-view-filter-context__text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.restricted-view-filter-context__title {
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 20px;
+  margin-bottom: 4px;
+}
+
+.restricted-view-filter-context__subtitle {
+  font-size: 12px;
+  color: $palette-neutral-900;
+  margin-top: 2px;
+  line-height: 16px;
+}
+
+.restricted-view-filter-context__toggle {
+  flex: 0 0 auto;
+  font-size: 14px;
+  color: $color-neutral-500;
+  position: relative;
+  top: 3px;
+}
+
+.restricted-view-filter-context__body {
+  padding: 20px 16px 20px 46px;
+}
+
+.restricted-view-filter-context__field {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &:not(:last-child) {
+    margin-bottom: 24px;
+  }
+}
+
+.restricted-view-filter-context__field-label {
+  @extend %ellipsis;
+
+  width: 110px;
+  flex: 0 0 110px;
+  margin-right: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  color: $palette-neutral-1200;
+}
+
+.restricted-view-filter-context__field-icon {
+  width: 16px;
+  color: $palette-neutral-600;
+  font-size: 14px;
+}
+
+.restricted-view-filter-context__field-input {
+  width: 100%;
+}
+
+.restricted-view-filter-context__remove {
+  display: inline-block;
+  margin-top: 4px;
+  font-size: 12px;
+}
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/components/views/RestrictedViewFilterContext.vue b/enterprise/web-frontend/modules/baserow_enterprise/components/views/RestrictedViewFilterContext.vue
new file mode 100644
index 0000000000..f3724cc93b
--- /dev/null
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/views/RestrictedViewFilterContext.vue
@@ -0,0 +1,454 @@
+<template>
+  <div v-if="visibleFields.length > 0" class="restricted-view-filter-context">
+    <Expandable card toggle-on-click>
+      <template #header="{ expanded }">
+        <div class="restricted-view-filter-context__head">
+          <div class="restricted-view-filter-context__icon">
+            <i
+              :class="
+                matches
+                  ? 'iconoir-check-circle restricted-view-filter-context__icon--success'
+                  : 'iconoir-warning-triangle restricted-view-filter-context__icon--warning'
+              "
+            ></i>
+          </div>
+          <div class="restricted-view-filter-context__text">
+            <div class="restricted-view-filter-context__title">
+              {{
+                matches
+                  ? $t('restrictedViewFilterContext.matchTitle')
+                  : $t('restrictedViewFilterContext.mismatchTitle')
+              }}
+            </div>
+            <div class="restricted-view-filter-context__subtitle">
+              {{
+                matches
+                  ? $t('restrictedViewFilterContext.matchSubtitle')
+                  : $t('restrictedViewFilterContext.mismatchSubtitle')
+              }}
+            </div>
+          </div>
+          <i
+            class="restricted-view-filter-context__toggle"
+            :class="
+              expanded ? 'iconoir-nav-arrow-up' : 'iconoir-nav-arrow-down'
+            "
+          ></i>
+        </div>
+      </template>
+      <div class="restricted-view-filter-context__body">
+        <div
+          v-for="field in visibleFields"
+          :key="field.id"
+          class="restricted-view-filter-context__field"
+        >
+          <div class="restricted-view-filter-context__field-label">
+            <i
+              :class="field._.type.iconClass"
+              class="restricted-view-filter-context__field-icon"
+            ></i>
+            {{ field.name }}
+          </div>
+          <div class="restricted-view-filter-context__field-input">
+            <div
+              v-if="getFieldFunctions(field).length > 0"
+              class="margin-bottom-1"
+            >
+              <RadioButton
+                :model-value="fieldModes[field.id]"
+                value="static"
+                @input="onModeChange(field, 'static')"
+              >
+                {{ $t('defaultValuesModal.staticValue') }}
+              </RadioButton>
+              <RadioButton
+                v-for="func in getFieldFunctions(field)"
+                :key="func.name"
+                :model-value="fieldModes[field.id]"
+                :value="func.name"
+                class="margin-left-1"
+                @input="onModeChange(field, func.name)"
+              >
+                {{ func.label }}
+              </RadioButton>
+            </div>
+            <component
+              :is="getFieldComponent(field)"
+              v-if="fieldModes[field.id] === 'static'"
+              :ref="'field-' + field.id"
+              :slug="false"
+              :field="field"
+              :value="defaultViewRowValues[`field_${field.id}`]"
+              :read-only="readOnly"
+              :workspace-id="database.workspace.id"
+              :row="defaultViewRowValues"
+              :all-fields-in-table="fields"
+              @update="onFieldUpdate(field, $event)"
+            />
+            <div
+              v-if="canRemoveDefaultValue(field)"
+              class="flex align-items-center margin-top-1"
+              style="--gap: 4px"
+            >
+              <a
+                class="restricted-view-filter-context__remove"
+                @click.prevent="removeDefaultValue(field)"
+              >
+                {{ $t('restrictedViewFilterContext.removeDefaultValue') }}
+              </a>
+              <HelpIcon
+                :tooltip="
+                  $t('restrictedViewFilterContext.removeDefaultValueHelper')
+                "
+                tooltip-content-type="plain"
+                :tooltip-content-classes="[
+                  'tooltip__content--expandable',
+                  'tooltip__content--expandable-plain-text',
+                ]"
+                icon="info-empty"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Expandable>
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { notifyIf } from '@baserow/modules/core/utils/error'
+import { matchSearchFilters } from '@baserow/modules/database/utils/view'
+import ViewService from '@baserow/modules/database/services/view'
+import { clone } from '@baserow/modules/core/utils/object'
+
+/**
+ * Builds the API payload from a default_row_values snapshot, applying local
+ * overrides (value/mode changes and removals) on top.
+ */
+function buildPayload(baseItems, overrides, removedFieldIds) {
+  const itemsByFieldId = new Map(baseItems.map((item) => [item.field, item]))
+  for (const fieldId of removedFieldIds) {
+    itemsByFieldId.delete(fieldId)
+  }
+  for (const override of overrides) {
+    itemsByFieldId.set(override.field, override)
+  }
+  return Array.from(itemsByFieldId.values())
+}
+
+export default {
+  name: 'RestrictedViewFilterContext',
+  props: {
+    view: {
+      type: Object,
+      required: true,
+    },
+    fields: {
+      type: Array,
+      required: true,
+    },
+    database: {
+      type: Object,
+      required: true,
+    },
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // Local UI state derived from view.default_row_values.
+      defaultViewRowValues: {},
+      fieldModes: {},
+      removedFieldIds: [],
+      // Snapshot of view.default_row_values taken before the first local edit
+      // in a batch. Used to revert if the in-flight request fails.
+      requestSnapshot: null,
+      // Snapshot taken when edits arrive while a request is in flight. If the
+      // in-flight request succeeds, this becomes the new requestSnapshot for
+      // the queued save.
+      pendingSnapshot: null,
+      saving: false,
+      saveQueued: false,
+    }
+  },
+  computed: {
+    filteredFieldIds() {
+      const ids = new Set()
+      for (const filter of this.view.filters) {
+        ids.add(filter.field)
+      }
+      return ids
+    },
+    enabledDefaultFieldIds() {
+      const ids = new Set()
+      for (const item of this.view.default_row_values || []) {
+        if (item.enabled) {
+          ids.add(item.field)
+        }
+      }
+      return ids
+    },
+    // Fields that are either used in a filter or have an enabled default value,
+    // excluding fields the user has locally removed.
+    visibleFields() {
+      return this.fields.filter((field) => {
+        if (this.removedFieldIds.includes(field.id)) return false
+        if (
+          !this.filteredFieldIds.has(field.id) &&
+          !this.enabledDefaultFieldIds.has(field.id)
+        ) {
+          return false
+        }
+        const fieldType = this.$registry.get('field', field.type)
+        return (
+          !fieldType.isReadOnlyField(field) && fieldType.canBeDefaultValue()
+        )
+      })
+    },
+    // Build a values object that resolves functions to their actual values,
+    // so that matchSearchFilters can check them against the filters. Includes
+    // all filtered fields (even read-only ones that aren't editable) so the
+    // filter matching doesn't hit undefined values.
+    resolvedDefaultViewRowValues() {
+      const resolved = {}
+      for (const field of this.fields) {
+        if (
+          !this.filteredFieldIds.has(field.id) &&
+          !this.fieldModes[field.id]
+        ) {
+          continue
+        }
+        const name = `field_${field.id}`
+        const mode = this.fieldModes[field.id]
+        if (mode && mode !== 'static') {
+          const fieldType = this.$registry.get('field', field.type)
+          resolved[name] = fieldType.resolveDefaultValueFunction(mode, field)
+        } else {
+          const fieldType = this.$registry.get('field', field.type)
+          resolved[name] =
+            this.defaultViewRowValues[name] ?? fieldType.getEmptyValue(field)
+        }
+      }
+      return resolved
+    },
+    matches() {
+      return matchSearchFilters(
+        this.$registry,
+        this.view.filter_type,
+        this.view.filters,
+        this.view.filter_groups,
+        this.fields,
+        this.resolvedDefaultViewRowValues
+      )
+    },
+  },
+  watch: {
+    'view.default_row_values': {
+      handler() {
+        if (!this.saving && !this.saveQueued) {
+          this.parseDefaultValues()
+        }
+      },
+      deep: true,
+    },
+    'view.filters': {
+      handler() {
+        if (!this.saving && !this.saveQueued) {
+          this.parseDefaultValues()
+        }
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.parseDefaultValues()
+    this.debouncedSave = debounce(this.save, 400)
+  },
+  beforeUnmount() {
+    this.debouncedSave.flush()
+  },
+  methods: {
+    parseDefaultValues() {
+      const items = this.view.default_row_values || []
+      const itemsByFieldId = {}
+      for (const item of items) {
+        itemsByFieldId[item.field] = item
+      }
+
+      const newValues = {}
+      const newModes = {}
+      for (const field of this.fields) {
+        if (
+          !this.filteredFieldIds.has(field.id) &&
+          !itemsByFieldId[field.id]?.enabled
+        ) {
+          continue
+        }
+        const fieldType = this.$registry.get('field', field.type)
+        if (fieldType.isReadOnlyField(field) || !fieldType.canBeDefaultValue())
+          continue
+
+        const name = `field_${field.id}`
+        newValues[name] = fieldType.getEmptyValue(field)
+        newModes[field.id] = 'static'
+
+        const item = itemsByFieldId[field.id]
+        if (!item || !item.enabled) continue
+
+        if (item.value != null && item.field_type === field.type) {
+          newValues[name] = fieldType.parseDefaultRowValue(field, item.value)
+        }
+
+        const supportedFunctions = fieldType
+          .getSupportedDefaultValueFunctions()
+          .map((f) => f.name)
+        if (item.function && supportedFunctions.includes(item.function)) {
+          newModes[field.id] = item.function
+        }
+      }
+      this.defaultViewRowValues = newValues
+      this.fieldModes = newModes
+      this.removedFieldIds = []
+    },
+    getFieldComponent(field) {
+      const fieldType = this.$registry.get('field', field.type)
+      return fieldType.getRowEditFieldComponent(field)
+    },
+    getFieldFunctions(field) {
+      const fieldType = this.$registry.get('field', field.type)
+      return fieldType.getSupportedDefaultValueFunctions()
+    },
+    canRemoveDefaultValue(field) {
+      return (
+        !this.readOnly &&
+        !this.filteredFieldIds.has(field.id) &&
+        this.enabledDefaultFieldIds.has(field.id)
+      )
+    },
+    /**
+     * Takes a snapshot of view.default_row_values before the first local edit.
+     * If a request is already in flight, the snapshot goes into pendingSnapshot
+     * (so that a queued save can use it). Otherwise it goes into requestSnapshot.
+     */
+    snapshotBeforeEdit() {
+      if (this.saving) {
+        if (!this.pendingSnapshot) {
+          this.pendingSnapshot = clone(this.view.default_row_values || [])
+        }
+      } else if (!this.requestSnapshot) {
+        this.requestSnapshot = clone(this.view.default_row_values || [])
+      }
+    },
+    removeDefaultValue(field) {
+      this.snapshotBeforeEdit()
+      this.removedFieldIds = [...this.removedFieldIds, field.id]
+      const newValues = { ...this.defaultViewRowValues }
+      delete newValues[`field_${field.id}`]
+      this.defaultViewRowValues = newValues
+      const newModes = { ...this.fieldModes }
+      delete newModes[field.id]
+      this.fieldModes = newModes
+      this.debouncedSave()
+    },
+    onModeChange(field, mode) {
+      this.snapshotBeforeEdit()
+      this.fieldModes = { ...this.fieldModes, [field.id]: mode }
+      this.debouncedSave()
+    },
+    onFieldUpdate(field, value) {
+      this.snapshotBeforeEdit()
+      this.defaultViewRowValues = {
+        ...this.defaultViewRowValues,
+        [`field_${field.id}`]: value,
+      }
+      this.debouncedSave()
+    },
+    /**
+     * Builds the list of local overrides from the current UI state for fields
+     * that are visible (not removed).
+     */
+    buildOverrides() {
+      return this.visibleFields.map((field) => {
+        const fieldType = this.$registry.get('field', field.type)
+        const mode = this.fieldModes[field.id]
+        const funcName = mode && mode !== 'static' ? mode : null
+
+        let value = null
+        if (!funcName) {
+          value = fieldType.prepareValueForUpdate(
+            field,
+            this.defaultViewRowValues[`field_${field.id}`]
+          )
+        }
+        return {
+          field: field.id,
+          enabled: true,
+          value,
+          function: funcName,
+        }
+      })
+    },
+    async save() {
+      if (this.saving) {
+        this.saveQueued = true
+        return
+      }
+      this.saving = true
+
+      const overrides = this.buildOverrides()
+      const removedIds = [...this.removedFieldIds]
+      const baseItems = clone(this.view.default_row_values || [])
+
+      try {
+        const items = buildPayload(baseItems, overrides, removedIds)
+        const { data } = await ViewService(this.$client).updateDefaultValues(
+          this.view.id,
+          items
+        )
+
+        await this.$store.dispatch('view/forceUpdate', {
+          view: this.view,
+          values: { default_row_values: data },
+        })
+        await this.$nextTick()
+
+        if (this.saveQueued) {
+          // More edits arrived during the request. The pendingSnapshot
+          // becomes the requestSnapshot for the next save.
+          this.requestSnapshot = this.pendingSnapshot
+          this.pendingSnapshot = null
+        } else {
+          this.requestSnapshot = null
+          this.pendingSnapshot = null
+          this.removedFieldIds = []
+        }
+      } catch (err) {
+        // Revert to the snapshot taken before the edits that triggered this
+        // save, cancel any queued save, and re-parse from it.
+        this.debouncedSave.cancel()
+        this.saveQueued = false
+        if (this.requestSnapshot) {
+          await this.$store.dispatch('view/forceUpdate', {
+            view: this.view,
+            values: { default_row_values: this.requestSnapshot },
+          })
+        }
+        this.requestSnapshot = null
+        this.pendingSnapshot = null
+        this.parseDefaultValues()
+        notifyIf(err, 'view')
+      } finally {
+        this.saving = false
+        if (this.saveQueued) {
+          this.saveQueued = false
+          this.save()
+        }
+      }
+    },
+  },
+}
+</script>
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/locales/en.json b/enterprise/web-frontend/modules/baserow_enterprise/locales/en.json
index 958d50c02d..7726f6fce8 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/locales/en.json
+++ b/enterprise/web-frontend/modules/baserow_enterprise/locales/en.json
@@ -801,6 +801,14 @@
     "restricted": "Restricted",
     "restrictedDescription": "Editors and lower can only see the filtered data and visible fields. It's possible to manage the members."
   },
+  "restrictedViewFilterContext": {
+    "matchTitle": "Default view values match the filters",
+    "matchSubtitle": "Editors will see the rows they create.",
+    "mismatchTitle": "Default values don't match the filters",
+    "mismatchSubtitle": "Editors will be able to create rows but won't see them.",
+    "removeDefaultValue": "Remove default value",
+    "removeDefaultValueHelper": "This field has a default value but no filter. You can remove it here, or manage all default values by clicking the three dots next to the view and then on \"Default row values\"."
+  },
   "databaseStep": {
     "ai": "Kuma AI"
   },
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/viewOwnershipTypes.js b/enterprise/web-frontend/modules/baserow_enterprise/viewOwnershipTypes.js
index 3a3a67bfe1..dcc9b77f93 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/viewOwnershipTypes.js
+++ b/enterprise/web-frontend/modules/baserow_enterprise/viewOwnershipTypes.js
@@ -3,6 +3,7 @@ import EnterpriseFeatures from '@baserow_enterprise/features'
 import PaidFeaturesModal from '@baserow_premium/components/PaidFeaturesModal'
 import { RBACPaidFeature } from '@baserow_enterprise/paidFeatures'
 import { FormViewType } from '@baserow/modules/database/viewTypes.js'
+import RestrictedViewFilterContext from '@baserow_enterprise/components/views/RestrictedViewFilterContext'
 
 export class RestrictedViewOwnershipType extends ViewOwnershipType {
   static getType() {
@@ -83,6 +84,19 @@ export class RestrictedViewOwnershipType extends ViewOwnershipType {
     return !canListFields
   }
 
+  getFilterContextComponent(view, database) {
+    if (
+      !this.app.$hasPermission(
+        'database.table.view.update_default_values',
+        view,
+        database.workspace.id
+      )
+    ) {
+      return null
+    }
+    return RestrictedViewFilterContext
+  }
+
   _canUpdateFieldOptions(view, database) {
     return this.app.$hasPermission(
       'database.table.view.update_field_options',
diff --git a/premium/backend/src/baserow_premium/api/row_comments/views.py b/premium/backend/src/baserow_premium/api/row_comments/views.py
index 01da3c0ef8..c903e240b7 100755
--- a/premium/backend/src/baserow_premium/api/row_comments/views.py
+++ b/premium/backend/src/baserow_premium/api/row_comments/views.py
@@ -18,8 +18,10 @@
 from baserow.api.serializers import get_example_pagination_serializer_class
 from baserow.contrib.database.api.rows.errors import ERROR_ROW_DOES_NOT_EXIST
 from baserow.contrib.database.api.tables.errors import ERROR_TABLE_DOES_NOT_EXIST
+from baserow.contrib.database.api.views.errors import ERROR_VIEW_DOES_NOT_EXIST
 from baserow.contrib.database.rows.exceptions import RowDoesNotExist
 from baserow.contrib.database.table.exceptions import TableDoesNotExist
+from baserow.contrib.database.views.exceptions import ViewDoesNotExist
 from baserow.core.action.registries import action_type_registry
 from baserow.core.exceptions import UserNotInWorkspace
 from baserow_premium.api.row_comments.errors import (
@@ -117,6 +119,7 @@ class RowCommentsView(APIView):
                 [
                     "ERROR_TABLE_DOES_NOT_EXIST",
                     "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
                 ]
             ),
         },
@@ -125,6 +128,7 @@ class RowCommentsView(APIView):
         {
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
         }
     )
@@ -176,7 +180,11 @@ def get(self, request, table_id, row_id, query_params):
                 ["ERROR_USER_NOT_IN_GROUP", "ERROR_INVALID_COMMENT_MENTION"]
             ),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -184,6 +192,7 @@ def get(self, request, table_id, row_id, query_params):
         {
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
             InvalidRowCommentMentionException: ERROR_INVALID_COMMENT_MENTION,
         }
@@ -233,7 +242,11 @@ class RowCommentView(APIView):
             ),
             401: get_error_schema(["ERROR_NO_PERMISSION_TO_TABLE"]),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_COMMENT_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_COMMENT_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -241,6 +254,7 @@ class RowCommentView(APIView):
         {
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowCommentDoesNotExist: ERROR_ROW_COMMENT_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
             UserNotRowCommentAuthorException: ERROR_USER_NOT_COMMENT_AUTHOR,
             InvalidRowCommentMentionException: ERROR_INVALID_COMMENT_MENTION,
@@ -285,7 +299,11 @@ def patch(self, request, table_id, comment_id, data, query_params):
             ),
             401: get_error_schema(["ERROR_NO_PERMISSION_TO_TABLE"]),
             404: get_error_schema(
-                ["ERROR_TABLE_DOES_NOT_EXIST", "ERROR_ROW_COMMENT_DOES_NOT_EXIST"]
+                [
+                    "ERROR_TABLE_DOES_NOT_EXIST",
+                    "ERROR_ROW_COMMENT_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
+                ]
             ),
         },
     )
@@ -293,6 +311,7 @@ def patch(self, request, table_id, comment_id, data, query_params):
         {
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowCommentDoesNotExist: ERROR_ROW_COMMENT_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
             UserNotRowCommentAuthorException: ERROR_USER_NOT_COMMENT_AUTHOR,
         }
@@ -340,6 +359,7 @@ class RowCommentsNotificationModeView(APIView):
                 [
                     "ERROR_TABLE_DOES_NOT_EXIST",
                     "ERROR_ROW_DOES_NOT_EXIST",
+                    "ERROR_VIEW_DOES_NOT_EXIST",
                 ]
             ),
         },
@@ -348,6 +368,7 @@ class RowCommentsNotificationModeView(APIView):
         {
             TableDoesNotExist: ERROR_TABLE_DOES_NOT_EXIST,
             RowDoesNotExist: ERROR_ROW_DOES_NOT_EXIST,
+            ViewDoesNotExist: ERROR_VIEW_DOES_NOT_EXIST,
             UserNotInWorkspace: ERROR_USER_NOT_IN_GROUP,
         }
     )
diff --git a/web-frontend/modules/core/assets/scss/components/fields/multiple_select.scss b/web-frontend/modules/core/assets/scss/components/fields/multiple_select.scss
index 19d97ed11f..696ae7de45 100644
--- a/web-frontend/modules/core/assets/scss/components/fields/multiple_select.scss
+++ b/web-frontend/modules/core/assets/scss/components/fields/multiple_select.scss
@@ -4,6 +4,10 @@
   list-style: none;
   margin: 0 0 10px;
   padding: 0;
+
+  &--empty {
+    margin-bottom: 0;
+  }
 }
 
 .field-multiple-select__item {
diff --git a/web-frontend/modules/database/components/field/FieldMultipleSelectOptionsSubForm.vue b/web-frontend/modules/database/components/field/FieldMultipleSelectOptionsSubForm.vue
index 36f9fa1656..1020f2d778 100644
--- a/web-frontend/modules/database/components/field/FieldMultipleSelectOptionsSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldMultipleSelectOptionsSubForm.vue
@@ -29,6 +29,13 @@
             :value="option.id"
           />
         </Dropdown>
+        <div v-if="hasViewLevelDefaultValue" class="control__messages">
+          <p
+            class="warning control__helper-text control__helper-text--warning field-context__inner-element-width"
+          >
+            {{ $t('fieldForm.defaultValueOverriddenByView') }}
+          </p>
+        </div>
       </FormGroup>
     </template>
   </div>
diff --git a/web-frontend/modules/database/components/field/FieldNumberSubForm.vue b/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
index b721ede520..e190091731 100644
--- a/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
@@ -93,6 +93,13 @@
           {{ $t('fieldForm.defaultValueDisabledByConstraint') }}
         </p>
       </div>
+      <div v-if="hasViewLevelDefaultValue" class="control__messages">
+        <p
+          class="warning control__helper-text control__helper-text--warning field-context__inner-element-width"
+        >
+          {{ $t('fieldForm.defaultValueOverriddenByView') }}
+        </p>
+      </div>
     </FormGroup>
   </div>
 </template>
diff --git a/web-frontend/modules/database/components/field/FieldSingleSelectOptionsSubForm.vue b/web-frontend/modules/database/components/field/FieldSingleSelectOptionsSubForm.vue
index ec215b5d5f..6bfb3eb7b8 100644
--- a/web-frontend/modules/database/components/field/FieldSingleSelectOptionsSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldSingleSelectOptionsSubForm.vue
@@ -40,6 +40,13 @@
             {{ $t('fieldForm.defaultValueDisabledByConstraint') }}
           </p>
         </div>
+        <div v-if="hasViewLevelDefaultValue" class="control__messages">
+          <p
+            class="warning control__helper-text control__helper-text--warning field-context__inner-element-width"
+          >
+            {{ $t('fieldForm.defaultValueOverriddenByView') }}
+          </p>
+        </div>
       </FormGroup>
     </template>
   </div>
diff --git a/web-frontend/modules/database/components/field/FieldTextSubForm.vue b/web-frontend/modules/database/components/field/FieldTextSubForm.vue
index e190d751de..3f2e183328 100644
--- a/web-frontend/modules/database/components/field/FieldTextSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldTextSubForm.vue
@@ -17,6 +17,13 @@
         {{ $t('fieldForm.defaultValueDisabledByConstraint') }}
       </p>
     </div>
+    <div v-if="hasViewLevelDefaultValue" class="control__messages">
+      <p
+        class="warning control__helper-text control__helper-text--warning field-context__inner-element-width"
+      >
+        {{ $t('fieldForm.defaultValueOverriddenByView') }}
+      </p>
+    </div>
   </FormGroup>
 </template>
 
diff --git a/web-frontend/modules/database/components/row/RowEditFieldMultipleSelect.vue b/web-frontend/modules/database/components/row/RowEditFieldMultipleSelect.vue
index 805b6cd859..8ba73384e6 100644
--- a/web-frontend/modules/database/components/row/RowEditFieldMultipleSelect.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldMultipleSelect.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="control__elements">
-    <ul class="field-multiple-select__items">
+    <ul
+      class="field-multiple-select__items"
+      :class="{ 'field-multiple-select__items--empty': value.length === 0 }"
+    >
       <li
         v-for="item in value"
         :key="item.id"
@@ -31,6 +34,7 @@
       :disabled="readOnly"
       :show-input="false"
       :show-empty-value="false"
+      :fixed-items="true"
       :error="touched && !valid"
       @input="updateValue($event, value)"
       @create-option="createOption($event)"
diff --git a/web-frontend/modules/database/components/row/RowEditFieldSingleSelect.vue b/web-frontend/modules/database/components/row/RowEditFieldSingleSelect.vue
index 660296ae1f..73d001d56c 100644
--- a/web-frontend/modules/database/components/row/RowEditFieldSingleSelect.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldSingleSelect.vue
@@ -6,6 +6,7 @@
       :allow-create-option="allowCreateOptions"
       :disabled="readOnly"
       :error="touched && !valid"
+      :fixed-items="true"
       size="large"
       @input="updateValue($event, value)"
       @create-option="createOption($event)"
diff --git a/web-frontend/modules/database/components/table/Table.vue b/web-frontend/modules/database/components/table/Table.vue
index 07c1dd0ba0..9403010650 100644
--- a/web-frontend/modules/database/components/table/Table.vue
+++ b/web-frontend/modules/database/components/table/Table.vue
@@ -107,6 +107,7 @@
             :view="view"
             :is-public-view="isPublic"
             :fields="fields"
+            :database="database"
             :read-only="adhocFiltering"
             :disable-filter="disableFilter"
             @changed="refresh()"
diff --git a/web-frontend/modules/database/components/view/DefaultValuesModal.vue b/web-frontend/modules/database/components/view/DefaultValuesModal.vue
index 9dfc12ec7f..ff8783ea7e 100644
--- a/web-frontend/modules/database/components/view/DefaultValuesModal.vue
+++ b/web-frontend/modules/database/components/view/DefaultValuesModal.vue
@@ -177,10 +177,7 @@ export default {
           this.enabledFieldIds.push(field.id)
         }
 
-        if (
-          item.value != null &&
-          (!item.field_type || item.field_type === field.type)
-        ) {
+        if (item.value != null && item.field_type === field.type) {
           this.rowValues[name] = fieldType.parseDefaultRowValue(
             field,
             item.value
diff --git a/web-frontend/modules/database/components/view/ViewContext.vue b/web-frontend/modules/database/components/view/ViewContext.vue
index a8c61129fa..0a810992fe 100644
--- a/web-frontend/modules/database/components/view/ViewContext.vue
+++ b/web-frontend/modules/database/components/view/ViewContext.vue
@@ -103,6 +103,12 @@
         <a class="context__menu-item-link" @click="openDefaultValuesModal()">
           <i class="context__menu-item-icon iconoir-settings"></i>
           {{ $t('viewContext.defaultRowValues') }}
+          <Badge
+            v-if="enabledDefaultRowValues.length >= 1"
+            color="neutral"
+            size="small"
+            >{{ enabledDefaultRowValues.length }}</Badge
+          >
         </a>
       </li>
       <li
@@ -245,6 +251,11 @@ export default {
         )
         .filter((component) => component !== null)
     },
+    enabledDefaultRowValues() {
+      return this.view.default_row_values.filter(
+        (defaultRowValue) => defaultRowValue.enabled
+      )
+    },
   },
   methods: {
     enableRename() {
diff --git a/web-frontend/modules/database/components/view/ViewFieldConditionsForm.vue b/web-frontend/modules/database/components/view/ViewFieldConditionsForm.vue
index 6829f3cf9e..bf7fe472a1 100644
--- a/web-frontend/modules/database/components/view/ViewFieldConditionsForm.vue
+++ b/web-frontend/modules/database/components/view/ViewFieldConditionsForm.vue
@@ -71,6 +71,7 @@
       >
       </ViewFieldConditionGroup>
     </div>
+    <slot></slot>
   </div>
 </template>
 
diff --git a/web-frontend/modules/database/components/view/ViewFilter.vue b/web-frontend/modules/database/components/view/ViewFilter.vue
index a105b021cf..662077e7a7 100644
--- a/web-frontend/modules/database/components/view/ViewFilter.vue
+++ b/web-frontend/modules/database/components/view/ViewFilter.vue
@@ -24,6 +24,7 @@
       <ViewFilterForm
         :fields="fields"
         :view="view"
+        :database="database"
         :is-public-view="isPublicView"
         :read-only="readOnly"
         :disable-filter="disableFilter"
@@ -48,6 +49,10 @@ export default {
       type: Object,
       required: true,
     },
+    database: {
+      type: Object,
+      required: true,
+    },
     isPublicView: {
       type: Boolean,
       required: false,
diff --git a/web-frontend/modules/database/components/view/ViewFilterForm.vue b/web-frontend/modules/database/components/view/ViewFilterForm.vue
index bce977ae2b..40d4fbab9f 100644
--- a/web-frontend/modules/database/components/view/ViewFilterForm.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterForm.vue
@@ -33,7 +33,16 @@
       @delete-filter-group="deleteFilterGroup($event)"
       @update-filter="updateFilter($event)"
       @update-filter-type="updateFilterType(view, $event)"
-    />
+    >
+      <component
+        :is="filterContextComponent"
+        v-if="filterContextComponent"
+        :view="view"
+        :fields="fields"
+        :database="database"
+        :read-only="readOnly"
+      />
+    </ViewFieldConditionsForm>
     <div v-if="!disableFilter" class="context__footer">
       <ButtonText icon="iconoir-plus" @click.prevent="addFilter()">
         {{ $t('viewFilterContext.addFilter') }}</ButtonText
@@ -80,6 +89,10 @@ export default {
       type: Object,
       required: true,
     },
+    database: {
+      type: Object,
+      required: true,
+    },
     isPublicView: {
       type: Boolean,
       required: false,
@@ -95,6 +108,16 @@ export default {
     },
   },
   emits: ['changed'],
+  computed: {
+    filterContextComponent() {
+      if (!this.view.ownership_type || !this.database) return null
+      const ownershipType = this.$registry.get(
+        'viewOwnershipType',
+        this.view.ownership_type
+      )
+      return ownershipType.getFilterContextComponent(this.view, this.database)
+    },
+  },
   methods: {
     sortableUid: ulid,
     async addFilter({ filterGroupId = null, parentGroupId = null } = {}) {
diff --git a/web-frontend/modules/database/locales/en.json b/web-frontend/modules/database/locales/en.json
index dd4a7e8f36..9b34874bd6 100644
--- a/web-frontend/modules/database/locales/en.json
+++ b/web-frontend/modules/database/locales/en.json
@@ -328,6 +328,7 @@
     "dbIndexError": "This field type cannot have an index. Please remove it before saving or change the field type.",
     "dbIndexDescription": "Indexing can significantly improve filtering performance, but slows down create, update, and delete operations.",
     "defaultValueDisabledByConstraint": "Cannot set a default value with a unique constraint",
+    "defaultValueOverriddenByView": "A view-level default value is set for this field and will take precedence over this default value.",
     "dbIndexDisabledTooltip": "Indexing is not available for this field type."
   },
   "fieldSelectThroughFieldSubForm": {
diff --git a/web-frontend/modules/database/mixins/fieldSubForm.js b/web-frontend/modules/database/mixins/fieldSubForm.js
index ba2b8f3c32..c47b258756 100644
--- a/web-frontend/modules/database/mixins/fieldSubForm.js
+++ b/web-frontend/modules/database/mixins/fieldSubForm.js
@@ -31,6 +31,15 @@ export default {
     },
   },
   computed: {
+    hasViewLevelDefaultValue() {
+      const fieldId = this.defaultValues?.id
+      if (!fieldId || !this.view?.default_row_values) {
+        return false
+      }
+      return this.view.default_row_values.some(
+        (item) => item.field === fieldId && item.enabled
+      )
+    },
     isDefaultValueFieldDisabled() {
       if (!this.fieldConstraints || this.fieldConstraints.length === 0) {
         return false
diff --git a/web-frontend/modules/database/viewOwnershipTypes.js b/web-frontend/modules/database/viewOwnershipTypes.js
index cba6659326..851359d599 100644
--- a/web-frontend/modules/database/viewOwnershipTypes.js
+++ b/web-frontend/modules/database/viewOwnershipTypes.js
@@ -157,6 +157,19 @@ export class ViewOwnershipType extends Registerable {
   getDecoratorContextWarning(view, fields, visibleFields, database) {
     return null
   }
+
+  /**
+   * Returns a component to display below the filter form, or `null` if nothing extra
+   * is needed. This lets ownership types inject contextual UI (e.g. default-value
+   * warnings) into the filter context menu.
+   *
+   * @param {Object} view - The view object.
+   * @param {Object} database - The database object.
+   * @returns {Object|null} A Vue component or null.
+   */
+  getFilterContextComponent(view, database) {
+    return null
+  }
 }
 
 export class CollaborativeViewOwnershipType extends ViewOwnershipType {
diff --git a/web-frontend/modules/integrations/localBaserow/components/integrations/LocalBaserowAdhocHeader.vue b/web-frontend/modules/integrations/localBaserow/components/integrations/LocalBaserowAdhocHeader.vue
index e230b65740..d366bd69c8 100644
--- a/web-frontend/modules/integrations/localBaserow/components/integrations/LocalBaserowAdhocHeader.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/integrations/LocalBaserowAdhocHeader.vue
@@ -7,6 +7,7 @@
           read-only
           :view="view"
           :fields="filterableFields"
+          :database="database"
           :disable-filter="false"
           @changed="handleFiltersChange"
         ></ViewFilter>
diff --git a/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap b/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
index a28c194666..a084c87b02 100644
--- a/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
@@ -1106,6 +1106,8 @@ exports[`ViewFilterForm match snapshots > Full view filter component 1`] = `
     
     
     
+    
+    
   </div>
   <div
     class="context__footer"
@@ -1605,6 +1607,8 @@ exports[`ViewFilterForm match snapshots > rating filter 1`] = `
     
     
     
+    
+    
   </div>
   <div
     class="context__footer"

From 56a4d7f3a1b40ea0bd7eb116cf72c3e3a7913a7a Mon Sep 17 00:00:00 2001
From: Jonathan Adeline <jonathan@baserow.io>
Date: Tue, 19 May 2026 15:05:00 +0400
Subject: [PATCH 2/2] chore: replace moveToBody with `<Teleport />` built-in
 vue3 component (#4872)

---
 ...mixin_with_builtin_teleport_component.json |    9 +
 .../components/row_comments/RowComment.vue    |    3 +-
 .../views/grid/fields/GridViewFieldAI.vue     |    8 +-
 .../unit/premium/premiumViewTypes.spec.js     |   27 +-
 .../modules/core/components/Context.vue       |  188 +-
 .../modules/core/components/Modal.vue         |  158 +-
 .../core/components/NotificationPanel.vue     |  250 +-
 .../formula/FormulaInputErrorContext.vue      |    9 +-
 .../components/formula/FormulaInputField.vue  |    8 +-
 .../workspace/WorkspaceSearchModal.vue        |   58 +-
 web-frontend/modules/core/mixins/baseModal.js |   51 +-
 web-frontend/modules/core/mixins/context.js   |    4 +
 web-frontend/modules/core/mixins/modal.js     |    4 +
 .../modules/core/mixins/moveToBody.js         |  104 -
 web-frontend/modules/core/utils/dom.js        |  123 +-
 .../components/field/FileFieldModal.vue       |  210 +-
 .../components/row/ForeignRowEditModal.vue    |    2 +
 .../components/row/SelectRowContent.vue       |    2 +-
 .../components/row/SelectRowModal.vue         |    6 -
 .../components/view/form/FormViewField.vue    |   40 +-
 .../view/grid/fields/GridViewFieldArray.vue   |   12 +-
 .../view/grid/fields/GridViewFieldDate.vue    |   15 +-
 .../view/grid/fields/GridViewFieldFile.vue    |    7 +-
 .../view/grid/fields/GridViewFieldLinkRow.vue |   23 +-
 .../view/grid/fields/SingleFileArrayModal.vue |    5 +
 .../view/public/EnablePasswordModal.vue       |    2 +-
 web-frontend/test/helpers/userAdminHelpers.js |   50 +-
 .../DateTimePickerElement.spec.js.snap        |  162 +
 .../__snapshots__/userAdmin.spec.js.snap      |   30 +
 .../unit/core/admin/users/userAdmin.spec.js   |    4 +-
 .../test/unit/core/components/context.spec.js |   14 +-
 .../__snapshots__/publicView.spec.js.snap     |   95 +
 .../database/__snapshots__/table.spec.js.snap |  262 +-
 .../exportTableModal.spec.js.snap             | 6461 +++++++++--------
 .../viewDecoratorContext.spec.js.snap         |  542 +-
 .../galleryViewDecoration.spec.js.snap        |   30 +
 .../gridViewDecoration.spec.js.snap           |  231 +
 .../gridViewFieldFooter.spec.js.snap          |  558 +-
 web-frontend/vitest.setup.ts                  |    6 +
 web-frontend/yarn.lock                        |   31 +-
 40 files changed, 5424 insertions(+), 4380 deletions(-)
 create mode 100644 changelog/entries/unreleased/refactor/replace_moveToBody_mixin_with_builtin_teleport_component.json
 delete mode 100644 web-frontend/modules/core/mixins/moveToBody.js

diff --git a/changelog/entries/unreleased/refactor/replace_moveToBody_mixin_with_builtin_teleport_component.json b/changelog/entries/unreleased/refactor/replace_moveToBody_mixin_with_builtin_teleport_component.json
new file mode 100644
index 0000000000..4a201a5dc5
--- /dev/null
+++ b/changelog/entries/unreleased/refactor/replace_moveToBody_mixin_with_builtin_teleport_component.json
@@ -0,0 +1,9 @@
+{
+  "type": "refactor",
+  "message": "Replace custom moveToBody mixin with Vue 3 built-in Teleport component.",
+  "issue_origin": "github",
+  "issue_number": null,
+  "domain": "core",
+  "bullet_points": [],
+  "created_at": "2026-04-08"
+}
diff --git a/premium/web-frontend/modules/baserow_premium/components/row_comments/RowComment.vue b/premium/web-frontend/modules/baserow_premium/components/row_comments/RowComment.vue
index 44cc71a924..a0a993bdfc 100644
--- a/premium/web-frontend/modules/baserow_premium/components/row_comments/RowComment.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/row_comments/RowComment.vue
@@ -215,9 +215,10 @@ export default {
       this.editing = true
 
       this.onClickOutsideHandler = (evt) => {
+        const contextRoot = this.$refs.commentContext.getTeleportedElement()
         if (
           !this.$el.contains(evt.target) &&
-          !this.$refs.commentContext.$el.contains(evt.target) &&
+          (!contextRoot || !contextRoot.contains(evt.target)) &&
           !evt.composedPath().includes(this.$el)
         ) {
           this.stopEdit()
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/grid/fields/GridViewFieldAI.vue b/premium/web-frontend/modules/baserow_premium/components/views/grid/fields/GridViewFieldAI.vue
index d76c9afb51..21d93b157a 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/grid/fields/GridViewFieldAI.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/grid/fields/GridViewFieldAI.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { isElement } from '@baserow/modules/core/utils/dom'
+import { isInsideTeleportedElement } from '@baserow/modules/core/utils/dom'
 import gridField from '@baserow/modules/database/mixins/gridField'
 import gridFieldAI from '@baserow_premium/mixins/gridFieldAI'
 
@@ -142,10 +142,10 @@ export default {
       return true
     },
     canUnselectByClickingOutside(event) {
-      if (this.isDeactivated && this.workspace) {
-        return !isElement(this.$refs.clickModal.$el, event.target)
+      if (!this.isDeactivated || !this.workspace) {
+        return true
       }
-      return true
+      return !isInsideTeleportedElement(this.$refs.clickModal, event)
     },
     canSelectNext(event) {
       if (
diff --git a/premium/web-frontend/test/unit/premium/premiumViewTypes.spec.js b/premium/web-frontend/test/unit/premium/premiumViewTypes.spec.js
index fc899f3733..65d18a673b 100644
--- a/premium/web-frontend/test/unit/premium/premiumViewTypes.spec.js
+++ b/premium/web-frontend/test/unit/premium/premiumViewTypes.spec.js
@@ -3,6 +3,7 @@ import PaidFeaturesModal from '@baserow_premium/components/PaidFeaturesModal'
 import { PremiumTestApp } from '@baserow_premium_test/helpers/premiumTestApp'
 import flushPromises from 'flush-promises'
 import CreateViewModal from '@baserow/modules/database/components/view/CreateViewModal'
+import CreateViewLink from '@baserow/modules/database/components/view/CreateViewLink'
 
 async function openViewContextAndClickOnCreateKanbanView(
   testApp,
@@ -18,17 +19,15 @@ async function openViewContextAndClickOnCreateKanbanView(
   })
 
   await viewsContext.vm.show(viewsContext)
-  // Show runs some extra code in a nextTick so flush them now.
   await flushPromises()
 
   const paidFeaturesModal = viewsContext.findComponent(PaidFeaturesModal)
-  expect(paidFeaturesModal.isVisible()).toBe(false)
+  expect(paidFeaturesModal.vm.$refs.modal.open).toBe(false)
 
-  const kanbanLink = viewsContext
-    .findAll('.select__footer-create-link')
-    .filter((node) => node.text() === 'premium.viewType.kanban')
-    .at(0)
-  await kanbanLink.trigger('click')
+  const kanbanCreateLink = viewsContext
+    .findAllComponents(CreateViewLink)
+    .find((c) => c.vm.viewType.getType() === 'kanban')
+  kanbanCreateLink.vm.select()
   await flushPromises()
   return viewsContext
 }
@@ -48,9 +47,11 @@ describe('Premium View Type Component Tests', () => {
     expect(
       viewsContext
         .findAllComponents(CreateViewModal)
-        .filter((m) => m.isVisible())
+        .filter((m) => m.vm.$refs.modal.open)
     ).toHaveLength(0)
-    expect(viewsContext.findComponent(PaidFeaturesModal).isVisible()).toBe(true)
+    expect(
+      viewsContext.findComponent(PaidFeaturesModal).vm.$refs.modal.open
+    ).toBe(true)
   })
   test('User with global premium features can create Kanban view', async () => {
     testApp.giveCurrentUserGlobalPremiumFeatures()
@@ -60,10 +61,10 @@ describe('Premium View Type Component Tests', () => {
 
     const visibleCreateViewModals = viewsContext
       .findAllComponents(CreateViewModal)
-      .filter((m) => m.isVisible())
+      .filter((m) => m.vm.$refs.modal.open)
     expect(visibleCreateViewModals).toHaveLength(1)
-    expect(viewsContext.findComponent(PaidFeaturesModal).isVisible()).toBe(
-      false
-    )
+    expect(
+      viewsContext.findComponent(PaidFeaturesModal).vm.$refs.modal.open
+    ).toBe(false)
   })
 })
diff --git a/web-frontend/modules/core/components/Context.vue b/web-frontend/modules/core/components/Context.vue
index dadfc2949c..ff3ababa3e 100644
--- a/web-frontend/modules/core/components/Context.vue
+++ b/web-frontend/modules/core/components/Context.vue
@@ -1,28 +1,48 @@
 <template>
-  <div
-    v-auto-overflow-scroll="open && overflowScroll"
-    class="context"
-    :class="{
-      'visibility-hidden': !open || !updatedOnce,
-      'context--overflow-scroll': overflowScroll,
-    }"
-  >
-    <slot v-if="openedOnce"></slot>
-  </div>
+  <Teleport to="body">
+    <div
+      ref="contextEl"
+      v-auto-overflow-scroll="open && overflowScroll"
+      v-bind="$attrs"
+      class="context"
+      :class="{
+        'visibility-hidden': !open || !updatedOnce,
+        'context--overflow-scroll': overflowScroll,
+      }"
+    >
+      <slot v-if="openedOnce"></slot>
+    </div>
+  </Teleport>
 </template>
 
 <script>
 import {
-  isElement,
+  collectTeleportRootsForOutsideClick,
+  getTeleportedElementFromRef,
   isDomElement,
+  isElement,
   onClickOutside,
 } from '@baserow/modules/core/utils/dom'
 
-import MoveToBody from '@baserow/modules/core/mixins/moveToBody'
-
 export default {
   name: 'Context',
-  mixins: [MoveToBody],
+  provide() {
+    return {
+      registerChild: this.registerChild,
+      unregisterChild: this.unregisterChild,
+    }
+  },
+  inject: {
+    parentRegisterChild: {
+      from: 'registerChild',
+      default: null,
+    },
+    parentUnregisterChild: {
+      from: 'unregisterChild',
+      default: null,
+    },
+  },
+  inheritAttrs: false,
   props: {
     hideOnClickOutside: {
       type: Boolean,
@@ -69,7 +89,19 @@ export default {
       // If opened once, should stay in DOM to keep nested content
       openedOnce: false,
       maxHeightOffset: 10,
+      children: [],
+    }
+  },
+  mounted() {
+    if (this.parentRegisterChild) {
+      this.parentRegisterChild(this)
+    }
+  },
+  beforeUnmount() {
+    if (this.parentUnregisterChild) {
+      this.parentUnregisterChild(this)
     }
+    this.hide(false)
   },
   methods: {
     /**
@@ -131,6 +163,7 @@ export default {
     ) {
       const isElementOrigin = isDomElement(target)
       const updatePosition = () => {
+        const el = this.$refs.contextEl
         const css = isElementOrigin
           ? this.calculatePositionElement(
               target,
@@ -160,11 +193,10 @@ export default {
           return
         }
 
-        // Set the calculated positions of the context.
         for (const key in css) {
           const cssValue =
             css[key] !== null ? Math.ceil(css[key]) + 'px' : 'auto'
-          this.$el.style[key] = cssValue
+          el.style[key] = cssValue
         }
 
         // The max height can optionally be automatically to prevent the context from
@@ -178,7 +210,7 @@ export default {
                   this.getWindowScrollHeight()
                 }px)`
               : 'none'
-          this.$el.style['max-height'] = maxHeight
+          el.style['max-height'] = maxHeight
         }
 
         this.updatedOnce = true
@@ -195,54 +227,62 @@ export default {
       await this.$nextTick()
       updatePosition()
 
-      this.$el.cancelOnClickOutside = onClickOutside(this.$el, (target) => {
-        if (
-          this.open &&
-          // If the prop allows it to be closed by clicking outside.
-          this.hideOnClickOutside &&
-          // If the click was not on the opener because they can trigger the toggle
-          // method.
-          !isElement(this.opener, target) &&
-          // If the click was not inside one of the context children of this context
-          // menu.
-          !this.moveToBody.children.some((child) => {
-            return isElement(child.$el, target)
-          })
-        ) {
-          this.hide()
+      // Cancel any previous handlers before setting up new ones
+      this._cleanupEventHandlers()
+
+      const el = this.getTeleportedElement()
+
+      const ignoreElements = () => {
+        const childRoots = []
+        for (const child of this.children) {
+          childRoots.push(...collectTeleportRootsForOutsideClick(child))
+        }
+        return [
+          this.opener,
+          ...new Set(childRoots.filter((el) => el instanceof HTMLElement)),
+        ].filter(Boolean)
+      }
+
+      this._cancelOnClickOutside = onClickOutside(
+        el,
+        () => {
+          if (this.open && this.hideOnClickOutside) {
+            this.hide()
+          }
+        },
+        {
+          ignoreElements,
         }
-      })
+      )
 
-      this.$el.updatePositionViaScrollEvent = (event) => {
+      this._updatePositionViaScrollEvent = (event) => {
         if (this.hideOnScroll) {
           this.hide()
         } else if (
-          // The context menu itself can have a scrollbar, and resizing everytime you
-          // scroll internally doesn't make sense because it can't influence the position.
-          !isElement(this.$el, event.target) &&
-          // If the scroll was not inside one of the context children of this context
-          // menu.
-          !this.moveToBody.children.some((child) => {
-            return isElement(child.$el, target)
-          })
+          !isElement(this.getTeleportedElement(), event.target) &&
+          !this.children.some((child) =>
+            collectTeleportRootsForOutsideClick(child).some((root) =>
+              isElement(root, event.target)
+            )
+          )
         ) {
           updatePosition()
         }
       }
       window.addEventListener(
         'scroll',
-        this.$el.updatePositionViaScrollEvent,
+        this._updatePositionViaScrollEvent,
         true
       )
 
-      this.$el.updatePositionViaResizeEvent = () => {
+      this._updatePositionViaResizeEvent = () => {
         if (this.hideOnResize) {
           this.hide()
         } else {
           updatePosition()
         }
       }
-      window.addEventListener('resize', this.$el.updatePositionViaResizeEvent)
+      window.addEventListener('resize', this._updatePositionViaResizeEvent)
 
       this.$emit('shown')
     },
@@ -309,22 +349,25 @@ export default {
         this.$emit('hidden')
       }
 
-      // If the context menu was never opened, it doesn't have the
-      // `cancelOnClickOutside`, so we can't call it.
-      if (
-        Object.prototype.hasOwnProperty.call(this.$el, 'cancelOnClickOutside')
-      ) {
-        this.$el.cancelOnClickOutside()
+      this._cleanupEventHandlers()
+    },
+    _cleanupEventHandlers() {
+      if (this._cancelOnClickOutside) {
+        this._cancelOnClickOutside()
+        this._cancelOnClickOutside = null
+      }
+      if (this._updatePositionViaScrollEvent) {
+        window.removeEventListener(
+          'scroll',
+          this._updatePositionViaScrollEvent,
+          true
+        )
+        this._updatePositionViaScrollEvent = null
+      }
+      if (this._updatePositionViaResizeEvent) {
+        window.removeEventListener('resize', this._updatePositionViaResizeEvent)
+        this._updatePositionViaResizeEvent = null
       }
-      window.removeEventListener(
-        'scroll',
-        this.$el.updatePositionViaScrollEvent,
-        true
-      )
-      window.removeEventListener(
-        'resize',
-        this.$el.updatePositionViaResizeEvent
-      )
     },
     /**
      * Calculates the absolute position of the context based on the original clicked
@@ -483,11 +526,9 @@ export default {
       verticalOffset,
       horizontalOffset
     ) {
-      const contextRect = this.$el.getBoundingClientRect()
-      // We need to use the scrollHeight in the calculations because we need to work
-      // with the full height of the element without scrollbar to calculate the optimal
-      // position.
-      const scrollHeight = this.$el.scrollHeight
+      const el = this.$refs.contextEl
+      const contextRect = el.getBoundingClientRect()
+      const scrollHeight = el.scrollHeight
       const canTop =
         targetRect.top -
           scrollHeight -
@@ -543,6 +584,23 @@ export default {
     isOpen() {
       return this.open
     },
+    /**
+     * Root element rendered inside `<Teleport>` (not the anchor `this.$el`).
+     *
+     * @returns {HTMLElement|null}
+     */
+    getTeleportedElement() {
+      return getTeleportedElementFromRef(this.$refs, 'contextEl')
+    },
+    registerChild(child) {
+      this.children.push(child)
+    },
+    unregisterChild(child) {
+      const index = this.children.indexOf(child)
+      if (index !== -1) {
+        this.children.splice(index, 1)
+      }
+    },
   },
 }
 </script>
diff --git a/web-frontend/modules/core/components/Modal.vue b/web-frontend/modules/core/components/Modal.vue
index dcba5b53ee..edfbb0d83a 100644
--- a/web-frontend/modules/core/components/Modal.vue
+++ b/web-frontend/modules/core/components/Modal.vue
@@ -1,95 +1,98 @@
 <template>
-  <div
-    v-if="open || keepContent"
-    v-show="(keepContent && open) || !keepContent"
-    ref="modalWrapper"
-    class="modal__wrapper"
-    @click="outside($event)"
-  >
+  <Teleport to="body">
     <div
-      class="modal__box"
-      :class="{
-        'modal__box--full-height': fullHeight,
-        'modal__box--full-max-height': !fullHeight && contentScrollable,
-        'modal__box--with-sidebar': sidebar,
-        'modal__box--full-screen': fullScreen,
-        'modal__box--wide': wide,
-        'modal__box--small': small,
-        'modal__box--tiny': tiny,
-        'modal__box--right': right,
-        'modal__box--no-padding': !boxPadding,
-      }"
+      v-if="open || keepContent"
+      v-show="(keepContent && open) || !keepContent"
+      ref="modalEl"
+      v-bind="$attrs"
+      class="modal__wrapper"
+      @click="outside($event)"
     >
-      <template v-if="sidebar">
-        <div
-          v-if="leftSidebar"
-          class="modal__box-sidebar modal__box-sidebar--left"
-          :class="{ 'modal__box-sidebar--scrollable': leftSidebarScrollable }"
-        >
-          <slot name="sidebar"></slot>
-        </div>
-        <div
-          class="modal__box-content"
-          :class="{
-            'modal__box-content--scrollable': contentScrollable,
-            'modal__box-content-no-padding': !contentPadding,
-          }"
-        >
+      <div
+        class="modal__box"
+        :class="{
+          'modal__box--full-height': fullHeight,
+          'modal__box--full-max-height': !fullHeight && contentScrollable,
+          'modal__box--with-sidebar': sidebar,
+          'modal__box--full-screen': fullScreen,
+          'modal__box--wide': wide,
+          'modal__box--small': small,
+          'modal__box--tiny': tiny,
+          'modal__box--right': right,
+          'modal__box--no-padding': !boxPadding,
+        }"
+      >
+        <template v-if="sidebar">
+          <div
+            v-if="leftSidebar"
+            class="modal__box-sidebar modal__box-sidebar--left"
+            :class="{ 'modal__box-sidebar--scrollable': leftSidebarScrollable }"
+          >
+            <slot name="sidebar"></slot>
+          </div>
+          <div
+            class="modal__box-content"
+            :class="{
+              'modal__box-content--scrollable': contentScrollable,
+              'modal__box-content-no-padding': !contentPadding,
+            }"
+          >
+            <slot name="content"></slot>
+            <div class="modal__actions">
+              <a
+                v-if="closeButton && canClose"
+                role="button"
+                :title="$t('action.close')"
+                class="modal__close"
+                @click="hide()"
+              >
+                <i class="iconoir-cancel"></i>
+              </a>
+
+              <a
+                v-if="collapsibleRightSidebar"
+                class="modal__collapse"
+                @click="collapseSidebar"
+              >
+                <i
+                  :class="{
+                    'iconoir-fast-arrow-right': !sidebarCollapsed,
+                    'iconoir-fast-arrow-left': sidebarCollapsed,
+                  }"
+                ></i>
+              </a>
+              <slot name="actions"></slot>
+            </div>
+          </div>
+
+          <div
+            v-if="rightSidebar"
+            class="modal__box-sidebar modal__box-sidebar--right"
+            :class="{
+              'modal__box-sidebar--scrollable': rightSidebarScrollable,
+              'modal__box-sidebar--collapsed': sidebarCollapsed,
+            }"
+          >
+            <slot v-if="!sidebarCollapsed" name="sidebar"></slot>
+          </div>
+        </template>
+        <template v-if="!sidebar">
+          <slot></slot>
           <slot name="content"></slot>
           <div class="modal__actions">
             <a
               v-if="closeButton && canClose"
-              role="button"
-              :title="$t('action.close')"
               class="modal__close"
               @click="hide()"
             >
               <i class="iconoir-cancel"></i>
             </a>
-
-            <a
-              v-if="collapsibleRightSidebar"
-              class="modal__collapse"
-              @click="collapseSidebar"
-            >
-              <i
-                :class="{
-                  'iconoir-fast-arrow-right': !sidebarCollapsed,
-                  'iconoir-fast-arrow-left': sidebarCollapsed,
-                }"
-              ></i>
-            </a>
             <slot name="actions"></slot>
           </div>
-        </div>
-
-        <div
-          v-if="rightSidebar"
-          class="modal__box-sidebar modal__box-sidebar--right"
-          :class="{
-            'modal__box-sidebar--scrollable': rightSidebarScrollable,
-            'modal__box-sidebar--collapsed': sidebarCollapsed,
-          }"
-        >
-          <slot v-if="!sidebarCollapsed" name="sidebar"></slot>
-        </div>
-      </template>
-      <template v-if="!sidebar">
-        <slot></slot>
-        <slot name="content"></slot>
-        <div class="modal__actions">
-          <a
-            v-if="closeButton && canClose"
-            class="modal__close"
-            @click="hide()"
-          >
-            <i class="iconoir-cancel"></i>
-          </a>
-          <slot name="actions"></slot>
-        </div>
-      </template>
+        </template>
+      </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script>
@@ -98,6 +101,7 @@ import baseModal from '@baserow/modules/core/mixins/baseModal'
 export default {
   name: 'Modal',
   mixins: [baseModal],
+  inheritAttrs: false,
   props: {
     leftSidebar: {
       type: Boolean,
diff --git a/web-frontend/modules/core/components/NotificationPanel.vue b/web-frontend/modules/core/components/NotificationPanel.vue
index bdaac91c3d..77481d80f8 100644
--- a/web-frontend/modules/core/components/NotificationPanel.vue
+++ b/web-frontend/modules/core/components/NotificationPanel.vue
@@ -1,120 +1,127 @@
 <template>
-  <div
-    class="notification-panel"
-    :class="{ 'visibility-hidden': !open }"
-    ph-autocapture="notifications"
-  >
-    <div class="notification-panel__head">
-      <div class="notification-panel__title">
-        {{ $t('notificationPanel.title') }}
-      </div>
-      <div v-show="totalCount > 0" class="notification-panel__actions">
-        <a
-          v-show="unreadCount > 0"
-          class="notification-panel__action"
-          @click="markAllAsRead"
-        >
-          {{ $t('notificationPanel.markAllAsRead') }}
-        </a>
-        <a
-          class="notification-panel__action"
-          @click="$refs.clearAllConfirmModal.show()"
-        >
-          {{ $t('notificationPanel.clearAll') }}
-        </a>
-      </div>
-    </div>
-    <div v-if="!loaded && loading" class="loading-absolute-center"></div>
-    <div v-else-if="totalCount === 0" class="notification-panel__empty">
-      <i class="notification-panel__empty-icon iconoir-bell-off"></i>
-      <div class="notification-panel__empty-title">
-        {{ $t('notificationPanel.noNotificationTitle') }}
-      </div>
-      <div class="notification-panel__empty-text">
-        {{ $t('notificationPanel.noNotification') }}
+  <Teleport to="body">
+    <div
+      ref="panelEl"
+      v-bind="$attrs"
+      class="notification-panel"
+      :class="{ 'visibility-hidden': !open }"
+      ph-autocapture="notifications"
+    >
+      <div class="notification-panel__head">
+        <div class="notification-panel__title">
+          {{ $t('notificationPanel.title') }}
+        </div>
+        <div v-show="totalCount > 0" class="notification-panel__actions">
+          <a
+            v-show="unreadCount > 0"
+            class="notification-panel__action"
+            @click="markAllAsRead"
+          >
+            {{ $t('notificationPanel.markAllAsRead') }}
+          </a>
+          <a
+            class="notification-panel__action"
+            @click="$refs.clearAllConfirmModal.show()"
+          >
+            {{ $t('notificationPanel.clearAll') }}
+          </a>
+        </div>
       </div>
-    </div>
-    <div v-else class="notification-panel__body">
-      <div v-if="needRefresh" class="notification-panel__refresh-hint">
-        <div class="notification-panel__refresh-hint-text">
-          <span class="notification-panel__refresh-hint-icon"></span>
-          {{ $t('notificationPanel.newNotificationsAvailable') }}
+      <div v-if="!loaded && loading" class="loading-absolute-center"></div>
+      <div v-else-if="totalCount === 0" class="notification-panel__empty">
+        <i class="notification-panel__empty-icon iconoir-bell-off"></i>
+        <div class="notification-panel__empty-title">
+          {{ $t('notificationPanel.noNotificationTitle') }}
+        </div>
+        <div class="notification-panel__empty-text">
+          {{ $t('notificationPanel.noNotification') }}
         </div>
-        <Button type="secondary" @click.prevent="initialLoad">
-          {{ $t('notificationPanel.refresh') }}
-        </Button>
       </div>
-      <InfiniteScroll
-        ref="infiniteScroll"
-        :current-count="currentCount"
-        :max-count="totalCount"
-        :loading="loading"
-        :render-end="false"
-        @load-next-page="loadNextPage"
-      >
-        <template #default>
-          <div
-            v-for="(notification, index) in notifications"
-            :key="index"
-            class="notification-panel__notification"
-            :class="{
-              'notification-panel__notification--unread': !notification.read,
-            }"
-          >
-            <div class="notification-panel__notification-icon">
-              <component
-                :is="getNotificationIcon(notification)"
-                :notification="notification"
-                v-bind="getNotificationIconProps(notification)"
-              >
-              </component>
-            </div>
-            <div class="notification-panel__notification-content">
-              <component
-                :is="getNotificationContent(notification)"
-                :notification="notification"
-                :workspace="workspace"
-                @close-panel="hide"
-              >
-              </component>
-              <div class="notification-panel__notification-time">
-                {{ timeAgo(notification.created_on) }}
+      <div v-else class="notification-panel__body">
+        <div v-if="needRefresh" class="notification-panel__refresh-hint">
+          <div class="notification-panel__refresh-hint-text">
+            <span class="notification-panel__refresh-hint-icon"></span>
+            {{ $t('notificationPanel.newNotificationsAvailable') }}
+          </div>
+          <Button type="secondary" @click.prevent="initialLoad">
+            {{ $t('notificationPanel.refresh') }}
+          </Button>
+        </div>
+        <InfiniteScroll
+          ref="infiniteScroll"
+          :current-count="currentCount"
+          :max-count="totalCount"
+          :loading="loading"
+          :render-end="false"
+          @load-next-page="loadNextPage"
+        >
+          <template #default>
+            <div
+              v-for="(notification, index) in notifications"
+              :key="index"
+              class="notification-panel__notification"
+              :class="{
+                'notification-panel__notification--unread': !notification.read,
+              }"
+            >
+              <div class="notification-panel__notification-icon">
+                <component
+                  :is="getNotificationIcon(notification)"
+                  :notification="notification"
+                  v-bind="getNotificationIconProps(notification)"
+                >
+                </component>
+              </div>
+              <div class="notification-panel__notification-content">
+                <component
+                  :is="getNotificationContent(notification)"
+                  :notification="notification"
+                  :workspace="workspace"
+                  @close-panel="hide"
+                >
+                </component>
+                <div class="notification-panel__notification-time">
+                  {{ timeAgo(notification.created_on) }}
+                </div>
+              </div>
+              <div class="notification-panel__notification-status">
+                <span v-if="!notification.read"></span>
               </div>
             </div>
-            <div class="notification-panel__notification-status">
-              <span v-if="!notification.read"></span>
-            </div>
-          </div>
-        </template>
-      </InfiniteScroll>
+          </template>
+        </InfiniteScroll>
+      </div>
+      <ClearAllNotificationsConfirmModal
+        ref="clearAllConfirmModal"
+        @confirm="
+          ($event) => {
+            $event.preventDefault()
+            $event.stopPropagation()
+            clearAll()
+          }
+        "
+        @cancel="
+          ($event) => {
+            $event.preventDefault()
+            $event.stopPropagation()
+          }
+        "
+      ></ClearAllNotificationsConfirmModal>
     </div>
-    <ClearAllNotificationsConfirmModal
-      ref="clearAllConfirmModal"
-      @confirm="
-        ($event) => {
-          $event.preventDefault()
-          $event.stopPropagation()
-          clearAll()
-        }
-      "
-      @cancel="
-        ($event) => {
-          $event.preventDefault()
-          $event.stopPropagation()
-        }
-      "
-    ></ClearAllNotificationsConfirmModal>
-  </div>
+  </Teleport>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import moment from '@baserow/modules/core/moment'
-import { isElement, onClickOutside } from '@baserow/modules/core/utils/dom'
+import {
+  collectTeleportRootsForOutsideClick,
+  getTeleportedElementFromRef,
+  onClickOutside,
+} from '@baserow/modules/core/utils/dom'
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import InfiniteScroll from '@baserow/modules/core/components/helpers/InfiniteScroll'
 import ClearAllNotificationsConfirmModal from '@baserow/modules/core/components/modals/ClearAllNotificationsConfirmModal'
-import MoveToBody from '@baserow/modules/core/mixins/moveToBody'
 
 export default {
   name: 'NotificationPanel',
@@ -122,13 +129,19 @@ export default {
     ClearAllNotificationsConfirmModal,
     InfiniteScroll,
   },
-  mixins: [MoveToBody],
+  provide() {
+    return {
+      registerChild: this.registerChild,
+    }
+  },
+  inheritAttrs: false,
   emits: ['hidden', 'shown'],
   data() {
     return {
       open: false,
       needRefresh: false,
       removeOnClickOutsideHandler: null,
+      children: [],
     }
   },
   computed: {
@@ -166,6 +179,9 @@ export default {
     },
   },
   methods: {
+    getTeleportedElement() {
+      return getTeleportedElementFromRef(this.$refs, 'panelEl')
+    },
     async initialLoad() {
       this.needRefresh = false
       try {
@@ -182,19 +198,27 @@ export default {
       }
       this.open = true
       const opener = target
-      this.removeOnClickOutsideHandler = onClickOutside(this.$el, (target) => {
-        if (
-          this.open &&
-          !isElement(opener, target) &&
-          !this.moveToBody.children.some((child) => {
-            return isElement(child.$el, target)
-          })
-        ) {
-          this.hide()
+      this.removeOnClickOutsideHandler = onClickOutside(
+        this.getTeleportedElement(),
+        () => {
+          if (this.open) {
+            this.hide()
+          }
+        },
+        {
+          ignoreElements: () => {
+            const childRoots = this.children.flatMap((child) =>
+              collectTeleportRootsForOutsideClick(child)
+            )
+            return [opener, ...new Set(childRoots)].filter(Boolean)
+          },
         }
-      })
+      )
       this.$emit('shown')
     },
+    registerChild(child) {
+      this.children.push(child)
+    },
     hide() {
       this.open = false
       this.opener = null
diff --git a/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue b/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue
index 39962d6595..ccb5cd8f6a 100644
--- a/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue
+++ b/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue
@@ -57,8 +57,13 @@ export default {
       if (!el || !this.$refs.context) {
         return
       }
-      const { width } = el.getBoundingClientRect()
-      this.$refs.context.$el.style.width = `${width}px`
+      // Ensure that the context's width is dynamically set
+      // to the targetElement's width, as it can be variable.
+      const contextEl = this.$refs.context?.getTeleportedElement()
+      if (contextEl) {
+        const { width } = el.getBoundingClientRect()
+        contextEl.style.width = `${width}px`
+      }
       return this.$refs.context.show(
         el,
         verticalPosition,
diff --git a/web-frontend/modules/core/components/formula/FormulaInputField.vue b/web-frontend/modules/core/components/formula/FormulaInputField.vue
index 39ad54bc6e..5f9285038d 100644
--- a/web-frontend/modules/core/components/formula/FormulaInputField.vue
+++ b/web-frontend/modules/core/components/formula/FormulaInputField.vue
@@ -323,7 +323,8 @@ export default {
             this.isFocused = val
           },
           getRootEl: () => this.$el,
-          getContextEl: () => this.$refs.formulaInputExplorerContext?.$el,
+          getContextEl: () =>
+            this.$refs.formulaInputExplorerContext?.getTeleportedElement(),
           showExplorerContextMenu: () => {
             this.$nextTick(() => {
               if (!this.isFocused) return
@@ -586,8 +587,9 @@ export default {
 
       if (config.needsDynamicOffset) {
         const inputRect = this.$el?.getBoundingClientRect()
-        const contextRect =
-          this.$refs.formulaInputExplorerContext?.$el?.getBoundingClientRect()
+        const contextRect = this.$refs.formulaInputExplorerContext
+          ?.getTeleportedElement()
+          ?.getBoundingClientRect()
 
         switch (this.contextPosition) {
           case 'left':
diff --git a/web-frontend/modules/core/components/workspace/WorkspaceSearchModal.vue b/web-frontend/modules/core/components/workspace/WorkspaceSearchModal.vue
index 1b3b75f91e..9cae3cfe2e 100644
--- a/web-frontend/modules/core/components/workspace/WorkspaceSearchModal.vue
+++ b/web-frontend/modules/core/components/workspace/WorkspaceSearchModal.vue
@@ -47,7 +47,7 @@
         >
           <!-- Search results -->
           <div v-if="hasResults" class="workspace-search__results">
-            <div class="workspace-search__results-list">
+            <div ref="resultsList" class="workspace-search__results-list">
               <div
                 v-for="(result, index) in allResults"
                 :key="`${result.type}-${result.id}-${index}`"
@@ -173,9 +173,11 @@ import debounce from 'lodash/debounce'
 import { mapGetters, mapState } from 'vuex'
 import { searchTypeRegistry } from '@baserow/modules/core/search/types/registry'
 import { notifyIf } from '@baserow/modules/core/utils/error'
+import modal from '@baserow/modules/core/mixins/modal'
 
 export default {
   name: 'WorkspaceSearchModal',
+  mixins: [modal],
 
   data() {
     return {
@@ -250,16 +252,6 @@ export default {
     },
   },
 
-  mounted() {
-    this.$nextTick(() => {
-      this.attachScrollListener()
-    })
-  },
-
-  beforeUnmount() {
-    this.removeScrollListener()
-  },
-
   methods: {
     onMouseMove(event) {
       if (event && (event.movementX !== 0 || event.movementY !== 0)) {
@@ -271,50 +263,11 @@ export default {
         searchTerm: this.searchTerm,
       })
     },
-    attachScrollListener() {
-      try {
-        const modalElement = this.$refs.modal?.$el
-
-        if (modalElement && typeof modalElement.querySelector === 'function') {
-          const modalContent = modalElement.querySelector('.modal__box-content')
-
-          if (modalContent) {
-            modalContent.addEventListener('scroll', this.handleScroll)
-          }
-        }
-      } catch (error) {
-        console.error('Error attaching scroll listener:', error)
-      }
-    },
-
-    removeScrollListener() {
-      try {
-        const modalElement = this.$refs.modal?.$el
-        if (modalElement && typeof modalElement.querySelector === 'function') {
-          const modalContent = modalElement.querySelector('.modal__box-content')
-          if (modalContent) {
-            modalContent.removeEventListener('scroll', this.handleScroll)
-          }
-        }
-      } catch (error) {
-        console.error('Error removing scroll listener:', error)
-      }
-    },
-
-    show() {
-      this.$refs.modal.show()
-    },
-
-    hide() {
-      this.$refs.modal.hide()
-    },
-
     onShow() {
       this.$nextTick(() => {
         if (this.$refs.searchInput) {
           this.$refs.searchInput.focus()
         }
-        this.attachScrollListener()
       })
     },
 
@@ -444,10 +397,7 @@ export default {
           this.allResults &&
           this.allResults.length > 0
         ) {
-          const resultItems = this.$el.querySelectorAll(
-            '.workspace-search__result-item'
-          )
-          const activeItem = resultItems[this.activeIndex]
+          const activeItem = this.$refs.resultsList?.children[this.activeIndex]
 
           if (activeItem) {
             activeItem.scrollIntoView({
diff --git a/web-frontend/modules/core/mixins/baseModal.js b/web-frontend/modules/core/mixins/baseModal.js
index 2b0d67200c..1a29109969 100644
--- a/web-frontend/modules/core/mixins/baseModal.js
+++ b/web-frontend/modules/core/mixins/baseModal.js
@@ -1,7 +1,23 @@
-import MoveToBody from '@baserow/modules/core/mixins/moveToBody'
+import { getModalTeleportedElement } from '@baserow/modules/core/utils/dom'
 
 export default {
-  mixins: [MoveToBody],
+  mixins: [],
+  provide() {
+    return {
+      registerChild: this.registerChild,
+      unregisterChild: this.unregisterChild,
+    }
+  },
+  inject: {
+    parentRegisterModal: {
+      from: 'registerChild',
+      default: null,
+    },
+    parentUnregisterModal: {
+      from: 'unregisterChild',
+      default: null,
+    },
+  },
   emits: ['hidden', 'show'],
   data() {
     return {
@@ -11,6 +27,7 @@ export default {
       // variable to be set on mousedown to be consistent.
       downElement: null,
       isModal: true,
+      children: [],
     }
   },
   props: {
@@ -23,10 +40,16 @@ export default {
   },
   mounted() {
     this.$bus.$on('close-modals', this.hide)
+    if (this.parentRegisterModal) {
+      this.parentRegisterModal(this)
+    }
   },
   beforeUnmount() {
     this.$bus.$off('close-modals', this.hide)
     window.removeEventListener('keyup', this.keyup)
+    if (this.parentUnregisterModal) {
+      this.parentUnregisterModal(this)
+    }
   },
   methods: {
     /**
@@ -73,13 +96,13 @@ export default {
         return
       }
 
-      const hasOpenModalAsChild = this.moveToBody.children.some((child) => {
-        return child.isModal === true && child.open === true
-      })
+      const hasOpenChild = this.children.some((child) => child.open === true)
+
       // When the `esc` key is pressed and multiple modals are open, then we don't
       // want to close them all. Only last opened modal should close. This will make
-      // sure that if there is an open child modal, it will not hide the parent modal.
-      if (hasOpenModalAsChild) {
+      // sure that if there is an open child (modal or context), it will not hide
+      // the parent modal.
+      if (hasOpenChild) {
         return
       }
 
@@ -105,12 +128,21 @@ export default {
         this.$emit('hidden')
       }
     },
+    registerChild(child) {
+      this.children.push(child)
+    },
+    unregisterChild(child) {
+      const index = this.children.indexOf(child)
+      if (index !== -1) {
+        this.children.splice(index, 1)
+      }
+    },
     /**
      * If someone actually clicked on the modal wrapper and not one of his children the
      * modal should be closed.
      */
     outside() {
-      if (this.downElement === this.$refs.modalWrapper && this.canClose) {
+      if (this.downElement === this.$refs.modalEl && this.canClose) {
         this.hide()
       }
     },
@@ -122,5 +154,8 @@ export default {
         this.hide()
       }
     },
+    getTeleportedElement() {
+      return getModalTeleportedElement(this.$refs)
+    },
   },
 }
diff --git a/web-frontend/modules/core/mixins/context.js b/web-frontend/modules/core/mixins/context.js
index 524b97e843..19577bd77b 100644
--- a/web-frontend/modules/core/mixins/context.js
+++ b/web-frontend/modules/core/mixins/context.js
@@ -32,5 +32,9 @@ export default {
       const context = this.getRootContext()
       context && context.hide(...args)
     },
+    getTeleportedElement() {
+      const context = this.getRootContext()
+      return context?.getTeleportedElement() ?? null
+    },
   },
 }
diff --git a/web-frontend/modules/core/mixins/modal.js b/web-frontend/modules/core/mixins/modal.js
index 089ba0ab25..9d119626d5 100644
--- a/web-frontend/modules/core/mixins/modal.js
+++ b/web-frontend/modules/core/mixins/modal.js
@@ -12,6 +12,10 @@ export default {
 
       return null
     },
+    getTeleportedElement() {
+      const modal = this.getRootModal()
+      return modal ? modal.getTeleportedElement() : null
+    },
     toggle(...args) {
       const modal = this.getRootModal()
       modal && modal.toggle(...args)
diff --git a/web-frontend/modules/core/mixins/moveToBody.js b/web-frontend/modules/core/mixins/moveToBody.js
deleted file mode 100644
index bc6acb9708..0000000000
--- a/web-frontend/modules/core/mixins/moveToBody.js
+++ /dev/null
@@ -1,104 +0,0 @@
-export default {
-  data() {
-    return {
-      moveToBody: {
-        children: [],
-        hasMoved: false,
-        movedEventHandlers: [],
-      },
-    }
-  },
-  /**
-   * Because we want the to be able to stack nested elements that are moved to
-   * the body, they have to be placed at the correct position. If it has no
-   * parent it must be moved to the top of the body, but if there is a parent it
-   * must be directly under that so it will always display on over of that
-   * component.
-   */
-  mounted() {
-    let parent = this.$parent
-    let first = null
-
-    // Loop over the parent components to register himself as child in order
-    // to prevent closing when clicking in a child. We also check which parent
-    // is first so can correctly move the element.
-    while (parent) {
-      if (parent?.$data?.moveToBody) {
-        parent.registerMoveToBodyChild(this)
-        if (first === null) first = parent
-      }
-      // There could be components that need to know which child element have
-      // been moved to the body, but haven't moved to the body themselves. If they
-      // only have a `registerMoveToBodyChild` method, we register this
-      // component a there.
-      else if (parent && typeof parent.registerMoveToBodyChild === 'function') {
-        parent.registerMoveToBodyChild(this)
-      }
-      parent = parent.$parent
-    }
-
-    if (first) {
-      // If there is a parent where we can register we want to position the
-      // element directly after that one so it will always be positioned over
-      // the parent when opened.
-      const handler = () => {
-        // Some times we have to wait for elements to render like with v-if.
-        this.$nextTick(() => {
-          if (first.$el && first.$el.parentNode && this.$el) {
-            first.$el.parentNode.insertBefore(this.$el, first.$el.nextSibling)
-            this.fireMovedToBodyHandlers()
-          }
-        })
-      }
-
-      // If the element has already moved to the body we can directly move it to
-      // the correct position. If not we have to wait until it will move.
-      if (first.moveToBody.hasMoved) {
-        handler()
-      } else {
-        first.addMovedToBodyHandler(handler)
-      }
-    } else if (this.$el) {
-      // Because there is no parent we can directly move the component to the
-      // top of the body so it will be positioned over any other element.
-      const body = document.body
-      body.insertBefore(this.$el, body.firstChild)
-      this.fireMovedToBodyHandlers()
-    }
-
-    this.moveToBody.hasMoved = true
-  },
-  /**
-   * Make sure the context menu is not open and all the events on the body are
-   * removed and that the element is removed from the body.
-   */
-  beforeUnmount() {
-    this.hide(false)
-  },
-  unmounted() {
-    if (this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el)
-    }
-  },
-  methods: {
-    /**
-     * Event handlers when the element has moved to the body can be registered
-     * here.
-     */
-    addMovedToBodyHandler(handler) {
-      this.moveToBody.movedEventHandlers.push(handler)
-    },
-    /**
-     *
-     */
-    fireMovedToBodyHandlers() {
-      this.moveToBody.movedEventHandlers.forEach((handler) => handler())
-    },
-    /**
-     *
-     */
-    registerMoveToBodyChild(child) {
-      this.moveToBody.children.push(child)
-    },
-  },
-}
diff --git a/web-frontend/modules/core/utils/dom.js b/web-frontend/modules/core/utils/dom.js
index 4865826210..14d9a6b56c 100644
--- a/web-frontend/modules/core/utils/dom.js
+++ b/web-frontend/modules/core/utils/dom.js
@@ -7,7 +7,7 @@ import { Comment, Fragment } from 'vue'
  * @returns boolean
  */
 export const isElement = (element, target) => {
-  return element !== null && (element === target || element.contains(target))
+  return element != null && (element === target || element.contains(target))
 }
 
 /**
@@ -72,15 +72,52 @@ export const findScrollableParent = (element) => {
   )
 }
 
+/**
+ * @typedef {Object} OnClickOutsideOptions
+ * @property {Array<HTMLElement|null|undefined>|(() => Array<HTMLElement|null|undefined>)} [ignoreElements]
+ *   Extra elements (e.g. opener button, teleported child menus) that count as “inside” for
+ *   closing. Pass a function to resolve element on each event so late-mounted nodes work.
+ *   Mousedown is snapshotted when the target is not under `el` so optimistic unmounts
+ *   before `click` still count as inside.
+ */
+
+/**
+ * Resolves ignoreElements option to a list of DOM elements.
+ *
+ * @param {OnClickOutsideOptions|undefined} options
+ * @returns {HTMLElement[]}
+ */
+const resolveIgnoreElements = (options) => {
+  if (!options || !options.ignoreElements) {
+    return []
+  }
+  const raw =
+    typeof options.ignoreElements === 'function'
+      ? options.ignoreElements()
+      : options.ignoreElements
+  const list = Array.isArray(raw) ? raw : []
+  return list.filter((node) => node != null)
+}
+
+/**
+ * @param {HTMLElement[]} elements
+ * @param {EventTarget|null} target
+ * @returns {boolean}
+ */
+const isTargetInsideAnyElement = (elements, target) => {
+  return elements.some((element) => isElement(element, target))
+}
+
 /**
  * Detects clicks outside el element and call callback
  *
  * Returns a callback to unregister click handlers after successful outside click
- * @param el
- * @param callback
- * @returns {(function(): void)|*}
+ * @param {HTMLElement} el
+ * @param {(target: EventTarget, event: MouseEvent) => void} callback
+ * @param {OnClickOutsideOptions} [options]
+ * @returns {() => void}
  */
-export const onClickOutside = (el, callback) => {
+export const onClickOutside = (el, callback, options) => {
   const insideEvent = new Set()
 
   // Firefox and Chrome both can both have a different `target` element on `click`
@@ -88,6 +125,9 @@ export const onClickOutside = (el, callback) => {
   // variable to be set on mousedown to be consistent.
   let downElement = null
 
+  /** True if mousedown started inside an ignore element (while not under `el`); see snapshot comment below. */
+  let mousedownInsideIgnored = false
+
   // Add the event to the `insideEvent` map. This allow to be sure a click event has
   // been triggered from an element inside this context, even if the element has
   // been removed after in the meantime.
@@ -98,6 +138,15 @@ export const onClickOutside = (el, callback) => {
 
   const clickOutsideMouseDownEvent = (event) => {
     downElement = event.target
+    const elements = resolveIgnoreElements(options)
+    // Only snapshot when not on `el`; clicks on `el` are handled via insideEvent.
+    // When ignore elements are teleported outside `el`, we must record mousedown here so
+    // optimistic updates that unmount before `click` still count as inside.
+    if (!isElement(el, event.target) && elements.length > 0) {
+      mousedownInsideIgnored = isTargetInsideAnyElement(elements, event.target)
+    } else {
+      mousedownInsideIgnored = false
+    }
   }
   document.body.addEventListener('mousedown', clickOutsideMouseDownEvent)
 
@@ -112,9 +161,16 @@ export const onClickOutside = (el, callback) => {
       insideEvent.delete(event)
     }
 
+    const elements = resolveIgnoreElements(options)
+    const insideIgnoredElement =
+      mousedownInsideIgnored ||
+      (elements.length > 0 &&
+        isTargetInsideAnyElement(elements, downElement || event.target))
+    mousedownInsideIgnored = false
+
     // If the click was outside the context element because we want to ignore
     // clicks inside it or any child of this element
-    if (!isElement(el, target) && !insideContext) {
+    if (!isElement(el, target) && !insideContext && !insideIgnoredElement) {
       callback(target, event)
     }
   }
@@ -240,3 +296,58 @@ export const getElementFromRef = (ref) => {
   // component ref -> root DOM element
   if (target?.$el instanceof Element) return target.$el
 }
+
+/**
+ * Teleported overlay root resolved from `$refs[key]` (via `getElementFromRef`),
+ * or null if not an HTMLElement.
+ */
+export const getTeleportedElementFromRef = (refs, refKey) => {
+  if (!refs || !refKey) {
+    return null
+  }
+  const el = getElementFromRef(refs[refKey])
+  return el instanceof HTMLElement ? el : null
+}
+
+// Wrapper for `modalEl` (Modal / baseModal teleported DOM root).
+export const getModalTeleportedElement = (refs) =>
+  getTeleportedElementFromRef(refs, 'modalEl')
+
+// All teleported overlay roots under `component` (and `children`) to treat as inside for outside-click handling.
+export const collectTeleportRootsForOutsideClick = (component) => {
+  const elements = []
+  if (!component) {
+    return elements
+  }
+  if (typeof component.getTeleportedElement === 'function') {
+    const el = component.getTeleportedElement()
+    if (el instanceof HTMLElement) {
+      elements.push(el)
+    }
+  }
+
+  // Resolve the component that owns `children`.
+  // Wrapper components (modal/context mixins) delegate to an inner Modal/Context
+  // via getRootModal()/getRootContext(). The real `children` array lives on that
+  // inner component, not on the wrapper itself.
+  let inner = component
+  if (typeof component.getRootModal === 'function') {
+    inner = component.getRootModal() ?? component
+  } else if (typeof component.getRootContext === 'function') {
+    inner = component.getRootContext() ?? component
+  }
+  for (const nested of inner.children || []) {
+    elements.push(...collectTeleportRootsForOutsideClick(nested))
+  }
+  return elements
+}
+
+/**
+ * Returns true if `event.target` is inside any teleported root of the given
+ * component ref (including nested children).
+ */
+export const isInsideTeleportedElement = (componentRef, event) => {
+  if (!componentRef) return false
+  const roots = collectTeleportRootsForOutsideClick(componentRef)
+  return roots.some((el) => isElement(el, event.target))
+}
diff --git a/web-frontend/modules/database/components/field/FileFieldModal.vue b/web-frontend/modules/database/components/field/FileFieldModal.vue
index 945a952b4f..8048bc8737 100644
--- a/web-frontend/modules/database/components/field/FileFieldModal.vue
+++ b/web-frontend/modules/database/components/field/FileFieldModal.vue
@@ -1,114 +1,117 @@
 <template>
-  <div
-    v-if="open"
-    ref="modalWrapper"
-    class="modal__wrapper file-field-modal__wrapper"
-    @mousedown="outside($event)"
-  >
-    <div class="file-field-modal">
-      <div class="file-field-modal__head">
-        <div class="file-field-modal__name">
-          <template v-if="preview">
-            <Editable
-              ref="rename"
-              :value="preview.visible_name"
-              @change="
-                $emit('renamed', {
-                  value: files,
-                  index: selected,
-                  value: $event.value,
-                })
-              "
-              @editing="renaming = $event"
-            ></Editable>
-            <a
-              v-if="!readOnly"
-              v-show="!renaming"
-              class="file-field-modal__rename"
-              @click="$refs.rename.edit()"
-            >
-              <i class="iconoir-edit-pencil"></i>
-            </a>
-          </template>
-        </div>
-        <a class="file-field-modal__close" @click="hide()">
-          <i class="iconoir-cancel"></i>
-        </a>
-      </div>
-      <div class="file-field-modal__body">
-        <a
-          class="file-field-modal__body-nav file-field-modal__body-nav--previous"
-          @click="previous()"
-        >
-          <i class="iconoir-nav-arrow-left"></i>
-        </a>
-        <a
-          class="file-field-modal__body-nav file-field-modal__body-nav--next"
-          @click="next()"
-        >
-          <i class="iconoir-nav-arrow-right"></i>
-        </a>
-        <div v-if="preview !== null" class="file-field-modal__preview">
-          <PreviewAny
-            ref="modalPreview"
-            :mime-type="preview.mime_type"
-            :url="preview.url"
-          >
-            <template #fallback>
-              <div class="file-field-modal__preview-icon">
-                <i :class="getIconClass(preview.mime_type)"></i>
-              </div>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      ref="modalEl"
+      v-bind="$attrs"
+      class="modal__wrapper file-field-modal__wrapper"
+      @mousedown="outside($event)"
+    >
+      <div class="file-field-modal">
+        <div class="file-field-modal__head">
+          <div class="file-field-modal__name">
+            <template v-if="preview">
+              <Editable
+                ref="rename"
+                :value="preview.visible_name"
+                @change="
+                  $emit('renamed', {
+                    value: files,
+                    index: selected,
+                    value: $event.value,
+                  })
+                "
+                @editing="renaming = $event"
+              ></Editable>
+              <a
+                v-if="!readOnly"
+                v-show="!renaming"
+                class="file-field-modal__rename"
+                @click="$refs.rename.edit()"
+              >
+                <i class="iconoir-edit-pencil"></i>
+              </a>
             </template>
-          </PreviewAny>
+          </div>
+          <a class="file-field-modal__close" @click="hide()">
+            <i class="iconoir-cancel"></i>
+          </a>
         </div>
-      </div>
-      <div class="file-field-modal__foot">
-        <ul class="file-field-modal__nav">
-          <li
-            v-for="(file, index) in files"
-            :key="file.name + '-' + index"
-            class="file-field-modal__nav-item"
-          >
-            <a
-              class="file-field-modal__nav-link"
-              :class="{ active: index === selected }"
-              @click="selected = index"
-            >
-              <img
-                v-if="file.is_image"
-                :src="file.thumbnails.small.url"
-                class="file-field-modal__nav-image"
-              />
-              <i
-                v-else
-                class="file-field-modal__nav-icon"
-                :class="getIconClass(file.mime_type)"
-              ></i>
-            </a>
-          </li>
-        </ul>
-        <ul v-if="preview" class="file-field-modal__actions">
-          <DownloadLink
-            class="file-field-modal__action"
-            :url="preview.url"
-            :filename="preview.visible_name"
-            :loading-class="'file-field-modal__action--loading'"
+        <div class="file-field-modal__body">
+          <a
+            class="file-field-modal__body-nav file-field-modal__body-nav--previous"
+            @click="previous()"
           >
-            <template #default="{ loading }">
-              <i v-if="!loading" class="iconoir-download" />
-            </template>
-          </DownloadLink>
+            <i class="iconoir-nav-arrow-left"></i>
+          </a>
           <a
-            v-if="!readOnly"
-            class="file-field-modal__action"
-            @click="remove(selected)"
+            class="file-field-modal__body-nav file-field-modal__body-nav--next"
+            @click="next()"
           >
-            <i class="iconoir-bin"></i>
+            <i class="iconoir-nav-arrow-right"></i>
           </a>
-        </ul>
+          <div v-if="preview !== null" class="file-field-modal__preview">
+            <PreviewAny
+              ref="modalPreview"
+              :mime-type="preview.mime_type"
+              :url="preview.url"
+            >
+              <template #fallback>
+                <div class="file-field-modal__preview-icon">
+                  <i :class="getIconClass(preview.mime_type)"></i>
+                </div>
+              </template>
+            </PreviewAny>
+          </div>
+        </div>
+        <div class="file-field-modal__foot">
+          <ul class="file-field-modal__nav">
+            <li
+              v-for="(file, index) in files"
+              :key="file.name + '-' + index"
+              class="file-field-modal__nav-item"
+            >
+              <a
+                class="file-field-modal__nav-link"
+                :class="{ active: index === selected }"
+                @click="selected = index"
+              >
+                <img
+                  v-if="file.is_image"
+                  :src="file.thumbnails.small.url"
+                  class="file-field-modal__nav-image"
+                />
+                <i
+                  v-else
+                  class="file-field-modal__nav-icon"
+                  :class="getIconClass(file.mime_type)"
+                ></i>
+              </a>
+            </li>
+          </ul>
+          <ul v-if="preview" class="file-field-modal__actions">
+            <DownloadLink
+              class="file-field-modal__action"
+              :url="preview.url"
+              :filename="preview.visible_name"
+              :loading-class="'file-field-modal__action--loading'"
+            >
+              <template #default="{ loading }">
+                <i v-if="!loading" class="iconoir-download" />
+              </template>
+            </DownloadLink>
+            <a
+              v-if="!readOnly"
+              class="file-field-modal__action"
+              @click="remove(selected)"
+            >
+              <i class="iconoir-bin"></i>
+            </a>
+          </ul>
+        </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script>
@@ -126,6 +129,7 @@ export default {
     PreviewAny,
   },
   mixins: [baseModal],
+  inheritAttrs: false,
   props: {
     files: {
       type: Array,
@@ -202,7 +206,7 @@ export default {
         doesAncestorMatchPredicate(
           event.target,
           (el) => el.tagName === 'A',
-          this.$el
+          this.$refs.modalEl
         )
 
       const protectedElements = [
diff --git a/web-frontend/modules/database/components/row/ForeignRowEditModal.vue b/web-frontend/modules/database/components/row/ForeignRowEditModal.vue
index 04956fa466..74470032a4 100644
--- a/web-frontend/modules/database/components/row/ForeignRowEditModal.vue
+++ b/web-frontend/modules/database/components/row/ForeignRowEditModal.vue
@@ -16,6 +16,7 @@
 
 <script>
 import { DatabaseApplicationType } from '@baserow/modules/database/applicationTypes'
+import modal from '@baserow/modules/core/mixins/modal'
 import RowEditModal from '@baserow/modules/database/components/row/RowEditModal'
 import FieldService from '@baserow/modules/database/services/field'
 import RowService from '@baserow/modules/database/services/row'
@@ -34,6 +35,7 @@ import {
 export default {
   name: 'ForeignRowEditModal',
   components: { RowEditModal },
+  mixins: [modal],
   props: {
     tableId: {
       type: Number,
diff --git a/web-frontend/modules/database/components/row/SelectRowContent.vue b/web-frontend/modules/database/components/row/SelectRowContent.vue
index de120462b7..e7473766df 100644
--- a/web-frontend/modules/database/components/row/SelectRowContent.vue
+++ b/web-frontend/modules/database/components/row/SelectRowContent.vue
@@ -147,7 +147,7 @@ export default {
       default: '',
     },
   },
-  emits: ['hide', 'unselected', 'selected'],
+  emits: ['hide', 'selected', 'unselected'],
   data() {
     return {
       // Indicates if we're loading new rows.
diff --git a/web-frontend/modules/database/components/row/SelectRowModal.vue b/web-frontend/modules/database/components/row/SelectRowModal.vue
index 17aa046952..f0d0e34a1e 100644
--- a/web-frontend/modules/database/components/row/SelectRowModal.vue
+++ b/web-frontend/modules/database/components/row/SelectRowModal.vue
@@ -5,12 +5,6 @@
     box-class="select-row-modal__box"
     @hidden="$emit('hidden')"
   >
-    <!--
-    Because of how the moveToBody mixin works it takes a small moment before the $refs
-    become available. In order for the Scrollbars components to work the refs need to
-    be available right away. That is the reason why the contents of the SelectRowModal
-    have been moved to a separate component.
-    -->
     <SelectRowContent
       :table-id="tableId"
       :view-id="viewId"
diff --git a/web-frontend/modules/database/components/view/form/FormViewField.vue b/web-frontend/modules/database/components/view/form/FormViewField.vue
index c730cbc2af..ffbffb6e88 100644
--- a/web-frontend/modules/database/components/view/form/FormViewField.vue
+++ b/web-frontend/modules/database/components/view/form/FormViewField.vue
@@ -188,16 +188,23 @@
 </template>
 
 <script>
-import { isElement, onClickOutside } from '@baserow/modules/core/utils/dom'
+import {
+  collectTeleportRootsForOutsideClick,
+  onClickOutside,
+} from '@baserow/modules/core/utils/dom'
 import { clone } from '@baserow/modules/core/utils/object'
 import { DEFAULT_FORM_VIEW_FIELD_COMPONENT_KEY } from '@baserow/modules/database/constants'
-import FieldContext from '@baserow/modules/database/components/field/FieldContext'
 import ViewFieldConditionsForm from '@baserow/modules/database/components/view/ViewFieldConditionsForm'
 import { createFiltersTree } from '@baserow/modules/database/utils/view'
 
 export default {
   name: 'FormViewField',
-  components: { FieldContext, ViewFieldConditionsForm },
+  components: { ViewFieldConditionsForm },
+  provide() {
+    return {
+      registerChild: this.registerChild,
+    }
+  },
   props: {
     database: {
       type: Object,
@@ -240,7 +247,7 @@ export default {
       editingName: false,
       editingDescription: false,
       value: null,
-      movedToBodyChildren: [],
+      children: [],
     }
   },
   computed: {
@@ -308,19 +315,19 @@ export default {
       this.selected = true
       this.$el.clickOutsideEventCancel = onClickOutside(
         this.$el,
-        (target, event) => {
+        (_target, event) => {
           if (
             this.selected &&
             // If the event was not related to deleting the filter.
-            !event.deletedFilterEvent &&
-            // If the event target is related to a child element that has moved to the
-            // body using the `moveToBody` mixin.
-            !this.movedToBodyChildren.some((child) => {
-              return isElement(child.$el, target)
-            })
+            !event.deletedFilterEvent
           ) {
             this.unselect()
           }
+        },
+        {
+          ignoreElements: () => {
+            return this.children.flatMap(collectTeleportRootsForOutsideClick)
+          },
         }
       )
     },
@@ -505,15 +512,8 @@ export default {
         })
       })
     },
-    /**
-     * This method is called by every child that has moved to the body, using the
-     * `moveToBody` mixin. In order to make sure that this component isn't unselected
-     * when clicking inside a child that has moved to body component, we add them to an
-     * array and check if the event target is actually a child when clicking outside of
-     * the element related to this component.
-     */
-    registerMoveToBodyChild(child) {
-      this.movedToBodyChildren.push(child)
+    registerChild(child) {
+      this.children.push(child)
     },
   },
 }
diff --git a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldArray.vue b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldArray.vue
index 9f094744b7..39448dbfd7 100644
--- a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldArray.vue
+++ b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldArray.vue
@@ -24,7 +24,7 @@
 <script>
 import FunctionalGridViewFieldArray from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldArray'
 import gridField from '@baserow/modules/database/mixins/gridField'
-import { isElement } from '@baserow/modules/core/utils/dom'
+import { isInsideTeleportedElement } from '@baserow/modules/core/utils/dom'
 import arrayLoading from '@baserow/modules/database/mixins/arrayLoading'
 
 export default {
@@ -66,12 +66,10 @@ export default {
       return !this.needsModal || !this.$refs.modal.open
     },
     canUnselectByClickingOutside(event) {
-      return (
-        !this.needsModal ||
-        ((!this.$refs.modal ||
-          !isElement(this.$refs.modal.$el, event.target)) &&
-          !isElement(this.$refs.modal.$el, event.target))
-      )
+      if (!this.needsModal) {
+        return true
+      }
+      return !isInsideTeleportedElement(this.$refs.modal, event)
     },
   },
 }
diff --git a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldDate.vue b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldDate.vue
index cf4d53ef37..58cefcb6cc 100644
--- a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldDate.vue
+++ b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldDate.vue
@@ -77,7 +77,7 @@
 
 <script>
 import TimeSelectContext from '@baserow/modules/core/components/TimeSelectContext'
-import { isElement } from '@baserow/modules/core/utils/dom'
+import { isInsideTeleportedElement } from '@baserow/modules/core/utils/dom'
 import gridField from '@baserow/modules/database/mixins/gridField'
 import gridFieldInput from '@baserow/modules/database/mixins/gridFieldInput'
 import dateField from '@baserow/modules/database/mixins/dateField'
@@ -132,11 +132,16 @@ export default {
         return false
       }
 
+      if (!this.editing) {
+        return true
+      }
+
       return (
-        !this.editing ||
-        (!isElement(this.$refs.dateContext.$el, event.target) &&
-          (!this.field.date_include_time ||
-            !isElement(this.$refs.timeContext.$el, event.target)))
+        !isInsideTeleportedElement(this.$refs.dateContext, event) &&
+        !(
+          this.field.date_include_time &&
+          isInsideTeleportedElement(this.$refs.timeContext, event)
+        )
       )
     },
     /**
diff --git a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldFile.vue b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldFile.vue
index e42e4905ad..75ab0566be 100644
--- a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldFile.vue
+++ b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldFile.vue
@@ -74,7 +74,7 @@
 
 <script>
 import { uuid } from '@baserow/modules/core/utils/string'
-import { isElement } from '@baserow/modules/core/utils/dom'
+import { isInsideTeleportedElement } from '@baserow/modules/core/utils/dom'
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import UserFilesModal from '@baserow/modules/core/components/files/UserFilesModal'
 import { UploadFileUserFileUploadType } from '@baserow/modules/core/userFileUploadTypes'
@@ -181,9 +181,8 @@ export default {
      */
     canUnselectByClickingOutside(event) {
       return (
-        (!this.$refs.uploadModal ||
-          !isElement(this.$refs.uploadModal.$el, event.target)) &&
-        !isElement(this.$refs.fileModal.$el, event.target)
+        !isInsideTeleportedElement(this.$refs.uploadModal, event) &&
+        !isInsideTeleportedElement(this.$refs.fileModal, event)
       )
     },
     /**
diff --git a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue
index d1a4649e0b..3767d2cd3f 100644
--- a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue
+++ b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue
@@ -89,7 +89,7 @@
 import { mapGetters } from 'vuex'
 
 import { getPersistentFieldOptionsKey } from '@baserow/modules/database/utils/field'
-import { isElement } from '@baserow/modules/core/utils/dom'
+import { isInsideTeleportedElement } from '@baserow/modules/core/utils/dom'
 import gridField from '@baserow/modules/database/mixins/gridField'
 import linkRowField from '@baserow/modules/database/mixins/linkRowField'
 import arrayLoading from '@baserow/modules/database/mixins/arrayLoading'
@@ -169,26 +169,9 @@ export default {
         return true
       }
 
-      const openModals = [
-        ...this.$refs.selectModal.$refs.modal.moveToBody.children.map(
-          (child) => child.$el
-        ),
-        this.$refs.selectModal.$el,
-        ...this.$refs.rowEditModal.$refs.modal.$refs.modal.moveToBody.children.map(
-          (child) => child.$el
-        ),
-        this.$refs.rowEditModal.$refs.modal.$el,
-      ]
-
       return (
-        // If the user clicks inside the select or row edit modal, we don't want to
-        // allow unselecting.
-        !openModals.some((modal) => {
-          return isElement(modal, event.target)
-        }) &&
-        // If an element is not part of the body anymore, then it was deleted, and then
-        // we don't have to unselect. This can for example happen when the user clicks
-        // on something that will deleted because of it.
+        !isInsideTeleportedElement(this.$refs.selectModal, event) &&
+        !isInsideTeleportedElement(this.$refs.rowEditModal, event) &&
         document.body.contains(event.target)
       )
     },
diff --git a/web-frontend/modules/database/components/view/grid/fields/SingleFileArrayModal.vue b/web-frontend/modules/database/components/view/grid/fields/SingleFileArrayModal.vue
index 3a8b2c5f38..ec616f81e6 100644
--- a/web-frontend/modules/database/components/view/grid/fields/SingleFileArrayModal.vue
+++ b/web-frontend/modules/database/components/view/grid/fields/SingleFileArrayModal.vue
@@ -25,6 +25,11 @@ export default {
     },
   },
   methods: {
+    /** @see FileFieldModal#getTeleportedElement */
+    getTeleportedElement() {
+      const fileModal = this.$refs.fileModal
+      return fileModal ? fileModal.getTeleportedElement() : null
+    },
     show(index) {
       this.$refs.fileModal.show(index)
     },
diff --git a/web-frontend/modules/database/components/view/public/EnablePasswordModal.vue b/web-frontend/modules/database/components/view/public/EnablePasswordModal.vue
index ce484d075e..ce0e267374 100644
--- a/web-frontend/modules/database/components/view/public/EnablePasswordModal.vue
+++ b/web-frontend/modules/database/components/view/public/EnablePasswordModal.vue
@@ -104,7 +104,7 @@ export default {
       this.clearInput()
       modal.methods.show.bind(this)()
       this.$nextTick(() => {
-        this.$el.querySelector('input')?.focus()
+        this.getTeleportedElement()?.querySelector('input')?.focus()
       })
     },
     async setPassword() {
diff --git a/web-frontend/test/helpers/userAdminHelpers.js b/web-frontend/test/helpers/userAdminHelpers.js
index 36f1191ef4..c8665570f1 100644
--- a/web-frontend/test/helpers/userAdminHelpers.js
+++ b/web-frontend/test/helpers/userAdminHelpers.js
@@ -2,9 +2,11 @@ import EditUserContext from '@baserow/modules/core/components/admin/users/contex
 import ChangeUserPasswordModal from '@baserow/modules/core/components/admin/users/modals/ChangeUserPasswordModal'
 import ChangePasswordForm from '@baserow/modules/core/components/admin/users/forms/ChangePasswordForm'
 import EditUserModal from '@baserow/modules/core/components/admin/users/modals/EditUserModal'
+import UserForm from '@baserow/modules/core/components/admin/users/forms/UserForm'
 import CrudTableSearch from '@baserow/modules/core/components/crudTable/CrudTableSearch'
 import DeleteUserModal from '@baserow/modules/core/components/admin/users/modals/DeleteUserModal'
 import { expect } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
 
 export default class UserAdminUserHelpers {
   constructor(userAdminComponent) {
@@ -73,24 +75,27 @@ export default class UserAdminUserHelpers {
     return this.c.findComponent(EditUserContext)
   }
 
-  clickDeleteUser(editUserContext) {
-    return editUserContext.find('.iconoir-bin').trigger('click')
+  async clickDeleteUser(editUserContext) {
+    editUserContext.vm.$refs.deleteUserModal.show()
+    await flushPromises()
   }
 
-  clickDeactivateUser(editUserContext) {
-    return editUserContext.find('.iconoir-cancel').trigger('click')
+  async clickDeactivateUser(editUserContext) {
+    await editUserContext.find('.iconoir-cancel').trigger('click')
   }
 
-  clickActivateUser(editUserContext) {
-    return editUserContext.find('.iconoir-check').trigger('click')
+  async clickActivateUser(editUserContext) {
+    await editUserContext.find('.iconoir-check').trigger('click')
   }
 
-  clickEditUser(editUserContext) {
-    return editUserContext.find('.iconoir-edit-pencil').trigger('click')
+  async clickEditUser(editUserContext) {
+    editUserContext.vm.$refs.editUserModal.show()
+    await flushPromises()
   }
 
-  clickChangeUserPassword(editUserContext) {
-    return editUserContext.find('.iconoir-key-alt').trigger('click')
+  async clickChangeUserPassword(editUserContext) {
+    editUserContext.vm.$refs.changePasswordModal.show()
+    await flushPromises()
   }
 
   async attemptToChangePasswordReturningModalError(password, repeatPassword) {
@@ -115,6 +120,7 @@ export default class UserAdminUserHelpers {
     const editUserContext = await this.openFirstUserActionsMenu()
 
     await this.clickChangeUserPassword(editUserContext)
+    await flushPromises()
 
     const changePasswordModal = this.c.findComponent(ChangeUserPasswordModal)
 
@@ -125,7 +131,7 @@ export default class UserAdminUserHelpers {
     passwordInputs.at(1).element.value = repeatPassword
     await passwordInputs.at(1).trigger('input')
 
-    await changePasswordModal.find('button').trigger('click')
+    await changePasswordModal.find('form').trigger('submit')
 
     return changePasswordModal
   }
@@ -157,6 +163,7 @@ export default class UserAdminUserHelpers {
     const editUserContext = await this.openFirstUserActionsMenu()
 
     await this.clickEditUser(editUserContext)
+    await flushPromises()
 
     const editUserModal = this.c.findComponent(EditUserModal)
 
@@ -166,7 +173,7 @@ export default class UserAdminUserHelpers {
     await userEditInputs.at(inputIndex).trigger('input')
 
     if (clickSave) {
-      await editUserModal.find('button').trigger('click')
+      await editUserModal.find('form').trigger('submit')
     }
 
     if (exit) {
@@ -180,13 +187,18 @@ export default class UserAdminUserHelpers {
     const editUserContext = await this.openFirstUserActionsMenu()
 
     await this.clickEditUser(editUserContext)
+    await flushPromises()
 
     const editUserModal = this.c.findComponent(EditUserModal)
-    const checkboxes = editUserModal.findAll('.checkbox')
+    const userForm = editUserModal.findComponent(UserForm)
+    const checkboxInputs = userForm.findAll('input[type="checkbox"]')
 
-    checkboxes.at(checkboxIndex).trigger('click')
+    const input = checkboxInputs[checkboxIndex]
+    input.element.checked = !input.element.checked
+    await input.trigger('change')
+    await flushPromises()
 
-    await editUserModal.find('button').trigger('click')
+    await editUserModal.find('form').trigger('submit')
 
     return editUserModal
   }
@@ -235,9 +247,9 @@ export default class UserAdminUserHelpers {
   }
 
   async clickConfirmDeleteUserInModal() {
-    await this.c
-      .findComponent(DeleteUserModal)
-      .find('.button--danger')
-      .trigger('click')
+    await flushPromises()
+    const deleteModal = this.c.findComponent(DeleteUserModal)
+    await deleteModal.vm.deleteUser()
+    await flushPromises()
   }
 }
diff --git a/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap b/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap
index d1ac5700b9..54e15b3800 100644
--- a/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap
+++ b/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap
@@ -40,6 +40,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -96,6 +114,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -152,6 +188,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -213,6 +267,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -274,6 +346,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -335,6 +425,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -396,6 +504,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -457,6 +583,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
@@ -518,6 +662,24 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
               class="flex-grow-1"
             />
             <!--v-if-->
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__calendar--context context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="ab-datetime-picker__clock context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
           
           <!--v-if-->
diff --git a/web-frontend/test/unit/core/admin/users/__snapshots__/userAdmin.spec.js.snap b/web-frontend/test/unit/core/admin/users/__snapshots__/userAdmin.spec.js.snap
index c98bf3dfbb..4d6bb0bed4 100644
--- a/web-frontend/test/unit/core/admin/users/__snapshots__/userAdmin.spec.js.snap
+++ b/web-frontend/test/unit/core/admin/users/__snapshots__/userAdmin.spec.js.snap
@@ -109,6 +109,11 @@ exports[`User Admin Component Tests > A users attributes will be displayed 1`] =
               <div class="expand-overflow-list">
                 <div class="expand-overflow-list__container">
                   <!--v-if--><span class="expand-overflow-list__empty-item"></span><span class="expand-overflow-list__item" style="order: 0;">users's workspace <i class="user-admin-group__icon iconoir-user-crown"></i></span><span class="expand-overflow-list__item" style="order: 1;">other_workspace </span><a class="expand-overflow-list__expand" style="order: 1; display: none;">+0</a>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
             </div>
@@ -144,6 +149,11 @@ exports[`User Admin Component Tests > A users attributes will be displayed 1`] =
       <div class="paginator__content"><span>paginator.page</span><input type="text" class="paginator__content-input" required="" size="1" value="1"><span>paginator.of</span></div><a class="paginator__button paginator__button--disabled"><i class="iconoir-nav-arrow-right"></i></a>
     </div>
   </div>
+  <teleport-stub to="body">
+    <div class="context visibility-hidden context--overflow-scroll">
+      <!--v-if-->
+    </div>
+  </teleport-stub>
 </div>"
 `;
 
@@ -256,6 +266,11 @@ exports[`User Admin Component Tests > you can sort by multiple columns which wil
               <div class="expand-overflow-list">
                 <div class="expand-overflow-list__container">
                   <!--v-if--><span class="expand-overflow-list__empty-item"></span><span class="expand-overflow-list__item" style="order: 0;">some_workspace <i class="user-admin-group__icon iconoir-user-crown"></i></span><a class="expand-overflow-list__expand" style="order: 0; display: none;">+0</a>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
             </div>
@@ -305,6 +320,11 @@ exports[`User Admin Component Tests > you can sort by multiple columns which wil
               <div class="expand-overflow-list">
                 <div class="expand-overflow-list__container">
                   <!--v-if--><span class="expand-overflow-list__empty-item"></span><span class="expand-overflow-list__item" style="order: 0;">some_workspace <i class="user-admin-group__icon iconoir-user-crown"></i></span><a class="expand-overflow-list__expand" style="order: 0; display: none;">+0</a>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
             </div>
@@ -354,6 +374,11 @@ exports[`User Admin Component Tests > you can sort by multiple columns which wil
               <div class="expand-overflow-list">
                 <div class="expand-overflow-list__container">
                   <!--v-if--><span class="expand-overflow-list__empty-item"></span><span class="expand-overflow-list__item" style="order: 0;">some_workspace <i class="user-admin-group__icon iconoir-user-crown"></i></span><a class="expand-overflow-list__expand" style="order: 0; display: none;">+0</a>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
             </div>
@@ -389,5 +414,10 @@ exports[`User Admin Component Tests > you can sort by multiple columns which wil
       <div class="paginator__content"><span>paginator.page</span><input type="text" class="paginator__content-input" required="" size="1" value="1"><span>paginator.of</span></div><a class="paginator__button paginator__button--disabled"><i class="iconoir-nav-arrow-right"></i></a>
     </div>
   </div>
+  <teleport-stub to="body">
+    <div class="context visibility-hidden context--overflow-scroll">
+      <!--v-if-->
+    </div>
+  </teleport-stub>
 </div>"
 `;
diff --git a/web-frontend/test/unit/core/admin/users/userAdmin.spec.js b/web-frontend/test/unit/core/admin/users/userAdmin.spec.js
index d75536c0fe..2afe4876fd 100644
--- a/web-frontend/test/unit/core/admin/users/userAdmin.spec.js
+++ b/web-frontend/test/unit/core/admin/users/userAdmin.spec.js
@@ -114,7 +114,7 @@ describe('User Admin Component Tests', () => {
   test('A user can be deleted', async () => {
     const { user, userAdmin, ui } = await whenThereIsAUserAndYouOpenUserAdmin()
 
-    expect(userAdmin.html()).toContain(user.username)
+    expect(userAdmin.find('tbody').html()).toContain(user.username)
 
     const editUserContext = await ui.openFirstUserActionsMenu()
     await ui.clickDeleteUser(editUserContext)
@@ -125,7 +125,7 @@ describe('User Admin Component Tests', () => {
 
     await flushPromises()
 
-    expect(userAdmin.html()).not.toContain(user.username)
+    expect(userAdmin.find('tbody').html()).not.toContain(user.username)
   })
 
   test('An active user can be deactivated', async () => {
diff --git a/web-frontend/test/unit/core/components/context.spec.js b/web-frontend/test/unit/core/components/context.spec.js
index f15dd253a4..71093f73b5 100644
--- a/web-frontend/test/unit/core/components/context.spec.js
+++ b/web-frontend/test/unit/core/components/context.spec.js
@@ -42,7 +42,10 @@ describe('Context.vue', () => {
       },
     })
 
-    expect(wrapper.classes()).toContain('visibility-hidden')
+    const contextEl = wrapper.find('[ref="contextEl"]').exists()
+      ? wrapper.find('[ref="contextEl"]')
+      : wrapper.find('.context')
+    expect(contextEl.classes()).toContain('visibility-hidden')
   })
 
   it('does not add the visibility-hidden class when open and updatedOnce are true', () => {
@@ -55,7 +58,8 @@ describe('Context.vue', () => {
       },
     })
 
-    expect(wrapper.classes()).not.toContain('visibility-hidden')
+    const contextEl = wrapper.find('.context')
+    expect(contextEl.classes()).not.toContain('visibility-hidden')
   })
 
   it('adds the context--overflow-scroll class when overflowScroll prop is true', () => {
@@ -65,7 +69,8 @@ describe('Context.vue', () => {
       },
     })
 
-    expect(wrapper.classes()).toContain('context--overflow-scroll')
+    const contextEl = wrapper.find('.context')
+    expect(contextEl.classes()).toContain('context--overflow-scroll')
   })
 
   it('does not add the context--overflow-scroll class when overflowScroll prop is false', () => {
@@ -75,7 +80,8 @@ describe('Context.vue', () => {
       },
     })
 
-    expect(wrapper.classes()).not.toContain('context--overflow-scroll')
+    const contextEl = wrapper.find('.context')
+    expect(contextEl.classes()).not.toContain('context--overflow-scroll')
   })
 
   it('sets the correct default props', () => {
diff --git a/web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap b/web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap
index 0c7cc4e1a2..010f8d34a3 100644
--- a/web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap
+++ b/web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap
@@ -111,6 +111,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                   viewFilter.filter - 0
                 </span>
               </a>
+              <teleport-stub
+                to="body"
+              >
+                <div
+                  class="filters context visibility-hidden"
+                >
+                  <!--v-if-->
+                </div>
+              </teleport-stub>
             </div>
           </li>
           <li
@@ -130,6 +139,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                   viewSort.sort - 0
                 </span>
               </a>
+              <teleport-stub
+                to="body"
+              >
+                <div
+                  class="sortings context visibility-hidden"
+                >
+                  <!--v-if-->
+                </div>
+              </teleport-stub>
             </div>
           </li>
           <li
@@ -149,6 +167,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                   viewGroupBy.groupBy - 0
                 </span>
               </a>
+              <teleport-stub
+                to="body"
+              >
+                <div
+                  class="group-bys context visibility-hidden"
+                >
+                  <!--v-if-->
+                </div>
+              </teleport-stub>
             </div>
           </li>
           <!--v-if-->
@@ -174,6 +201,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                   gridViewHide.hideField - 1
                 </span>
               </a>
+              <teleport-stub
+                to="body"
+              >
+                <div
+                  class="hidings context visibility-hidden"
+                >
+                  <!--v-if-->
+                </div>
+              </teleport-stub>
             </div>
           </li>
           <li
@@ -322,6 +358,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                   class="iconoir-cancel"
                 />
               </a>
+              <teleport-stub
+                to="body"
+              >
+                <div
+                  class="context visibility-hidden context--overflow-scroll"
+                >
+                  <!--v-if-->
+                </div>
+              </teleport-stub>
             </div>
           </li>
         </ul>
@@ -411,6 +456,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
               </div>
             </div>
           </div>
+          <teleport-stub
+            to="body"
+          >
+            <div
+              class="context visibility-hidden context--overflow-scroll"
+            >
+              <!--v-if-->
+            </div>
+          </teleport-stub>
           <div
             class="grid-view__divider"
             style="left: 72px;"
@@ -616,6 +670,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                       />
                        common.summarize
                     </div>
+                    <teleport-stub
+                      to="body"
+                    >
+                      <div
+                        class="context visibility-hidden"
+                      >
+                        <!--v-if-->
+                      </div>
+                    </teleport-stub>
                   </div>
                 </div>
                 <div
@@ -632,6 +695,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                       />
                        common.summarize
                     </div>
+                    <teleport-stub
+                      to="body"
+                    >
+                      <div
+                        class="context visibility-hidden"
+                      >
+                        <!--v-if-->
+                      </div>
+                    </teleport-stub>
                   </div>
                 </div>
                 <div
@@ -648,6 +720,15 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
                       />
                        common.summarize
                     </div>
+                    <teleport-stub
+                      to="body"
+                    >
+                      <div
+                        class="context visibility-hidden"
+                      >
+                        <!--v-if-->
+                      </div>
+                    </teleport-stub>
                   </div>
                 </div>
                 
@@ -680,6 +761,20 @@ exports[`Public View Page Tests > Can see a publicly shared grid view 1`] = `
               style="width: 672px; top: 0px;"
             />
           </div>
+          <teleport-stub
+            to="body"
+          >
+            <div
+              class="context visibility-hidden context--overflow-scroll"
+            >
+              <!--v-if-->
+            </div>
+          </teleport-stub>
+          <teleport-stub
+            to="body"
+          >
+            <!--v-if-->
+          </teleport-stub>
         </div>
         <!--v-if-->
       </div>
diff --git a/web-frontend/test/unit/database/__snapshots__/table.spec.js.snap b/web-frontend/test/unit/database/__snapshots__/table.spec.js.snap
index 524eff220e..d92a6027ab 100644
--- a/web-frontend/test/unit/database/__snapshots__/table.spec.js.snap
+++ b/web-frontend/test/unit/database/__snapshots__/table.spec.js.snap
@@ -7,27 +7,75 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
       <div class="header__loading" style="display: none;"></div>
       <ul class="header__filter">
         <!--v-if-->
-        <li class="header__filter-item header__filter-item--grids"><a class="header__filter-link active" data-highlight="views"><i class="header__filter-icon header-filter-icon--view color-primary iconoir-menu"></i><span class="header__filter-name header__filter-name--forced"><span contenteditable="false" placeholder="" class="">mock_view_1</span></span><i class="header__sub-icon iconoir-nav-arrow-down"></i></a></li>
-        <li class="header__filter-item header__filter-item--no-margin-left"><a class="header__filter-link" data-highlight="view-options"><i class="header__filter-icon baserow-icon-more-vertical"></i></a></li>
+        <li class="header__filter-item header__filter-item--grids"><a class="header__filter-link active" data-highlight="views"><i class="header__filter-icon header-filter-icon--view color-primary iconoir-menu"></i><span class="header__filter-name header__filter-name--forced"><span contenteditable="false" placeholder="" class="">mock_view_1</span></span><i class="header__sub-icon iconoir-nav-arrow-down"></i></a>
+          <teleport-stub to="body">
+            <div class="select context visibility-hidden" header-overflow="false">
+              <!--v-if-->
+            </div>
+          </teleport-stub>
+        </li>
+        <li class="header__filter-item header__filter-item--no-margin-left"><a class="header__filter-link" data-highlight="view-options"><i class="header__filter-icon baserow-icon-more-vertical"></i></a>
+          <teleport-stub to="body">
+            <div views="[object Object]" class="context visibility-hidden context--overflow-scroll">
+              <!--v-if-->
+            </div>
+          </teleport-stub>
+        </li>
         <li class="header__filter-item" data-highlight="view-filters">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-filter"></i><span class="header__filter-name">viewFilter.filter - 0</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-filter"></i><span class="header__filter-name">viewFilter.filter - 0</span></a>
+            <teleport-stub to="body">
+              <div class="filters context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item" data-highlight="view-sorts">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-sort"></i><span class="header__filter-name">viewSort.sort - 0</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-sort"></i><span class="header__filter-name">viewSort.sort - 0</span></a>
+            <teleport-stub to="body">
+              <div class="sortings context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item" data-highlight="view-group-by">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-book-stack"></i><span class="header__filter-name">viewGroupBy.groupBy - 0</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-book-stack"></i><span class="header__filter-name">viewGroupBy.groupBy - 0</span></a>
+            <teleport-stub to="body">
+              <div class="group-bys context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-share-android"></i><span class="header__filter-name">shareViewLink.shareView</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-share-android"></i><span class="header__filter-name">shareViewLink.shareView</span></a>
+            <teleport-stub to="body">
+              <div class="context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item">
-          <div disable-sort="false"><a class="header__filter-link"><i class="header__filter-icon iconoir-palette"></i><span class="header__filter-name">viewDecorator.decorator - 0</span></a></div>
+          <div disable-sort="false"><a class="header__filter-link"><i class="header__filter-icon iconoir-palette"></i><span class="header__filter-name">viewDecorator.decorator - 0</span></a>
+            <teleport-stub to="body">
+              <div class="context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
       </ul>
       <ul class="header__filter header__filter--full-width" table="[object Object]">
         <li class="header__filter-item">
-          <div><a class="header__filter-link active active--error"><i class="header__filter-icon iconoir-eye-off"></i><span class="header__filter-name">gridViewHide.hideField - 1</span></a></div>
+          <div><a class="header__filter-link active active--error"><i class="header__filter-icon iconoir-eye-off"></i><span class="header__filter-name">gridViewHide.hideField - 1</span></a>
+            <teleport-stub to="body">
+              <div class="hidings context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item">
           <div><a class="header__filter-link"><i class="header__filter-icon iconoir-table-rows"></i><span class="header__filter-name">gridViewRowHeight.name</span></a>
@@ -68,7 +116,13 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
           </div>
         </li>
         <li class="header__filter-item header__filter-item--full-width">
-          <div class="header__search"><a class="header__filter-link"><i class="header__search-icon iconoir-search"></i> </a><a class="header__search-clear" aria-label="viewSearch.clearSearch" style="display: none;"><i class="iconoir-cancel"></i></a></div>
+          <div class="header__search"><a class="header__filter-link"><i class="header__search-icon iconoir-search"></i> </a><a class="header__search-clear" aria-label="viewSearch.clearSearch" style="display: none;"><i class="iconoir-cancel"></i></a>
+            <teleport-stub to="body">
+              <div class="context visibility-hidden context--overflow-scroll">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
       </ul>
     </header>
@@ -83,7 +137,13 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
           <div class="grid-view__inner" style="min-width: 72px;">
             <div class="grid-view__head">
               <div class="grid-view__column grid-view__column--no-border-right" style="width: 72px;">
-                <div class="grid-view__head-row-identifier"><i class="grid-view__head-row-identifier-dropdown iconoir-numbered-list-left"></i></div>
+                <div class="grid-view__head-row-identifier"><i class="grid-view__head-row-identifier-dropdown iconoir-numbered-list-left"></i>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
+                </div>
               </div>
               <!--v-if-->
             </div>
@@ -116,6 +176,11 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
             </div>
           </div>
         </div>
+        <teleport-stub to="body">
+          <div class="context visibility-hidden context--overflow-scroll">
+            <!--v-if-->
+          </div>
+        </teleport-stub>
         <div class="grid-view__divider" style="left: 72px;"></div>
         <!--v-if-->
         <div class="grid-view__right" style="left: 72px;">
@@ -129,6 +194,11 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
                   </div>
                   <div class="grid-view__description-name" title="Name"><span>Name</span></div>
                   <!--v-if--><span class="grid-view__description-options"><!--v-if--><!--v-if--><a class="grid-view__description-icon-trigger"><i class="iconoir-nav-arrow-down"></i></a></span>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                   <div class="grid-view__description-width"></div>
                 </div>
               </div>
@@ -139,6 +209,11 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
                   </div>
                   <div class="grid-view__description-name" title="Last name"><span>Last name</span></div>
                   <!--v-if--><span class="grid-view__description-options"><!--v-if--><!--v-if--><a class="grid-view__description-icon-trigger"><i class="iconoir-nav-arrow-down"></i></a></span>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                   <div class="grid-view__description-width"></div>
                 </div>
               </div>
@@ -149,10 +224,21 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
                   </div>
                   <div class="grid-view__description-name" title="Notes"><span>Notes</span></div>
                   <!--v-if--><span class="grid-view__description-options"><!--v-if--><!--v-if--><a class="grid-view__description-icon-trigger"><i class="iconoir-nav-arrow-down"></i></a></span>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                   <div class="grid-view__description-width"></div>
                 </div>
               </div>
-              <div class="grid-view__column" style="width: 100px;"><a class="grid-view__add-column" data-highlight="add-field"><i class="grid-view__add-column-icon iconoir-plus"></i></a></div>
+              <div class="grid-view__column" style="width: 100px;"><a class="grid-view__add-column" data-highlight="add-field"><i class="grid-view__add-column-icon iconoir-plus"></i></a>
+                <teleport-stub to="body">
+                  <div class="field-context context visibility-hidden">
+                    <!--v-if-->
+                  </div>
+                </teleport-stub>
+              </div>
             </div>
             <div class="grid-view__body">
               <div class="grid-view__body-inner">
@@ -190,16 +276,31 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
               <div style="width: 200px;">
                 <div class="grid-view-aggregation">
                   <div class="grid-view-aggregation__empty"><i class="grid-view-aggregation__empty-icon iconoir-plus"></i> common.summarize</div>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
               <div style="width: 200px;">
                 <div class="grid-view-aggregation">
                   <div class="grid-view-aggregation__empty"><i class="grid-view-aggregation__empty-icon iconoir-plus"></i> common.summarize</div>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
               <div style="width: 200px;">
                 <div class="grid-view-aggregation">
                   <div class="grid-view-aggregation__empty"><i class="grid-view-aggregation__empty-icon iconoir-plus"></i> common.summarize</div>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
             </div>
@@ -213,6 +314,14 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
           <div class="grid-view__row-dragging" style="width: 672px; top: 0px;"></div>
           <div class="grid-view__row-target" style="width: 672px; top: 0px;"></div>
         </div>
+        <teleport-stub to="body">
+          <div class="context visibility-hidden context--overflow-scroll">
+            <!--v-if-->
+          </div>
+        </teleport-stub>
+        <teleport-stub to="body">
+          <!--v-if-->
+        </teleport-stub>
       </div>
       <!--v-if-->
     </div>
@@ -228,27 +337,75 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
       <div class="header__loading" style="display: none;"></div>
       <ul class="header__filter">
         <!--v-if-->
-        <li class="header__filter-item header__filter-item--grids"><a class="header__filter-link active" data-highlight="views"><i class="header__filter-icon header-filter-icon--view color-primary iconoir-menu"></i><span class="header__filter-name header__filter-name--forced"><span contenteditable="false" placeholder="" class="">mock_view_1</span></span><i class="header__sub-icon iconoir-nav-arrow-down"></i></a></li>
-        <li class="header__filter-item header__filter-item--no-margin-left"><a class="header__filter-link" data-highlight="view-options"><i class="header__filter-icon baserow-icon-more-vertical"></i></a></li>
+        <li class="header__filter-item header__filter-item--grids"><a class="header__filter-link active" data-highlight="views"><i class="header__filter-icon header-filter-icon--view color-primary iconoir-menu"></i><span class="header__filter-name header__filter-name--forced"><span contenteditable="false" placeholder="" class="">mock_view_1</span></span><i class="header__sub-icon iconoir-nav-arrow-down"></i></a>
+          <teleport-stub to="body">
+            <div class="select context visibility-hidden" header-overflow="false">
+              <!--v-if-->
+            </div>
+          </teleport-stub>
+        </li>
+        <li class="header__filter-item header__filter-item--no-margin-left"><a class="header__filter-link" data-highlight="view-options"><i class="header__filter-icon baserow-icon-more-vertical"></i></a>
+          <teleport-stub to="body">
+            <div views="[object Object]" class="context visibility-hidden context--overflow-scroll">
+              <!--v-if-->
+            </div>
+          </teleport-stub>
+        </li>
         <li class="header__filter-item" data-highlight="view-filters">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-filter"></i><span class="header__filter-name">viewFilter.filter - 0</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-filter"></i><span class="header__filter-name">viewFilter.filter - 0</span></a>
+            <teleport-stub to="body">
+              <div class="filters context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item" data-highlight="view-sorts">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-sort"></i><span class="header__filter-name">viewSort.sort - 0</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-sort"></i><span class="header__filter-name">viewSort.sort - 0</span></a>
+            <teleport-stub to="body">
+              <div class="sortings context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item" data-highlight="view-group-by">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-book-stack"></i><span class="header__filter-name">viewGroupBy.groupBy - 0</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-book-stack"></i><span class="header__filter-name">viewGroupBy.groupBy - 0</span></a>
+            <teleport-stub to="body">
+              <div class="group-bys context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item">
-          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-share-android"></i><span class="header__filter-name">shareViewLink.shareView</span></a></div>
+          <div><a class="header__filter-link"><i class="header__filter-icon iconoir-share-android"></i><span class="header__filter-name">shareViewLink.shareView</span></a>
+            <teleport-stub to="body">
+              <div class="context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item">
-          <div disable-sort="false"><a class="header__filter-link"><i class="header__filter-icon iconoir-palette"></i><span class="header__filter-name">viewDecorator.decorator - 0</span></a></div>
+          <div disable-sort="false"><a class="header__filter-link"><i class="header__filter-icon iconoir-palette"></i><span class="header__filter-name">viewDecorator.decorator - 0</span></a>
+            <teleport-stub to="body">
+              <div class="context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
       </ul>
       <ul class="header__filter header__filter--full-width" table="[object Object]">
         <li class="header__filter-item">
-          <div><a class="header__filter-link active active--error"><i class="header__filter-icon iconoir-eye-off"></i><span class="header__filter-name">gridViewHide.hideField - 1</span></a></div>
+          <div><a class="header__filter-link active active--error"><i class="header__filter-icon iconoir-eye-off"></i><span class="header__filter-name">gridViewHide.hideField - 1</span></a>
+            <teleport-stub to="body">
+              <div class="hidings context visibility-hidden">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
         <li class="header__filter-item">
           <div><a class="header__filter-link"><i class="header__filter-icon iconoir-table-rows"></i><span class="header__filter-name">gridViewRowHeight.name</span></a>
@@ -289,7 +446,13 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
           </div>
         </li>
         <li class="header__filter-item header__filter-item--full-width">
-          <div class="header__search"><a class="header__filter-link"><i class="header__search-icon iconoir-search"></i> </a><a class="header__search-clear" aria-label="viewSearch.clearSearch" style="display: none;"><i class="iconoir-cancel"></i></a></div>
+          <div class="header__search"><a class="header__filter-link"><i class="header__search-icon iconoir-search"></i> </a><a class="header__search-clear" aria-label="viewSearch.clearSearch" style="display: none;"><i class="iconoir-cancel"></i></a>
+            <teleport-stub to="body">
+              <div class="context visibility-hidden context--overflow-scroll">
+                <!--v-if-->
+              </div>
+            </teleport-stub>
+          </div>
         </li>
       </ul>
     </header>
@@ -304,7 +467,13 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
           <div class="grid-view__inner" style="min-width: 72px;">
             <div class="grid-view__head">
               <div class="grid-view__column grid-view__column--no-border-right" style="width: 72px;">
-                <div class="grid-view__head-row-identifier"><i class="grid-view__head-row-identifier-dropdown iconoir-numbered-list-left"></i></div>
+                <div class="grid-view__head-row-identifier"><i class="grid-view__head-row-identifier-dropdown iconoir-numbered-list-left"></i>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
+                </div>
               </div>
               <!--v-if-->
             </div>
@@ -337,6 +506,11 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
             </div>
           </div>
         </div>
+        <teleport-stub to="body">
+          <div class="context visibility-hidden context--overflow-scroll">
+            <!--v-if-->
+          </div>
+        </teleport-stub>
         <div class="grid-view__divider" style="left: 72px;"></div>
         <!--v-if-->
         <div class="grid-view__right" style="left: 72px;">
@@ -350,6 +524,11 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
                   </div>
                   <div class="grid-view__description-name" title="Name"><span>Name</span></div>
                   <!--v-if--><span class="grid-view__description-options"><!--v-if--><!--v-if--><a class="grid-view__description-icon-trigger"><i class="iconoir-nav-arrow-down"></i></a></span>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                   <div class="grid-view__description-width"></div>
                 </div>
               </div>
@@ -360,6 +539,11 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
                   </div>
                   <div class="grid-view__description-name" title="Last name"><span>Last name</span></div>
                   <!--v-if--><span class="grid-view__description-options"><!--v-if--><!--v-if--><a class="grid-view__description-icon-trigger"><i class="iconoir-nav-arrow-down"></i></a></span>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                   <div class="grid-view__description-width"></div>
                 </div>
               </div>
@@ -370,10 +554,21 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
                   </div>
                   <div class="grid-view__description-name" title="Notes"><span>Notes</span></div>
                   <!--v-if--><span class="grid-view__description-options"><!--v-if--><!--v-if--><a class="grid-view__description-icon-trigger"><i class="iconoir-nav-arrow-down"></i></a></span>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden context--overflow-scroll">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                   <div class="grid-view__description-width"></div>
                 </div>
               </div>
-              <div class="grid-view__column" style="width: 100px;"><a class="grid-view__add-column" data-highlight="add-field"><i class="grid-view__add-column-icon iconoir-plus"></i></a></div>
+              <div class="grid-view__column" style="width: 100px;"><a class="grid-view__add-column" data-highlight="add-field"><i class="grid-view__add-column-icon iconoir-plus"></i></a>
+                <teleport-stub to="body">
+                  <div class="field-context context visibility-hidden">
+                    <!--v-if-->
+                  </div>
+                </teleport-stub>
+              </div>
             </div>
             <div class="grid-view__body">
               <div class="grid-view__body-inner">
@@ -411,16 +606,31 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
               <div style="width: 200px;">
                 <div class="grid-view-aggregation">
                   <div class="grid-view-aggregation__empty"><i class="grid-view-aggregation__empty-icon iconoir-plus"></i> common.summarize</div>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
               <div style="width: 200px;">
                 <div class="grid-view-aggregation">
                   <div class="grid-view-aggregation__empty"><i class="grid-view-aggregation__empty-icon iconoir-plus"></i> common.summarize</div>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
               <div style="width: 200px;">
                 <div class="grid-view-aggregation">
                   <div class="grid-view-aggregation__empty"><i class="grid-view-aggregation__empty-icon iconoir-plus"></i> common.summarize</div>
+                  <teleport-stub to="body">
+                    <div class="context visibility-hidden">
+                      <!--v-if-->
+                    </div>
+                  </teleport-stub>
                 </div>
               </div>
             </div>
@@ -434,6 +644,14 @@ exports[`Table Component Tests > Adding a row to a table increases the row count
           <div class="grid-view__row-dragging" style="width: 672px; top: 0px;"></div>
           <div class="grid-view__row-target" style="width: 672px; top: 0px;"></div>
         </div>
+        <teleport-stub to="body">
+          <div class="context visibility-hidden context--overflow-scroll">
+            <!--v-if-->
+          </div>
+        </teleport-stub>
+        <teleport-stub to="body">
+          <!--v-if-->
+        </teleport-stub>
       </div>
       <!--v-if-->
     </div>
diff --git a/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap b/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap
index 4b976bd6a7..574ebd8b86 100644
--- a/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap
+++ b/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap
@@ -1,325 +1,31 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Preview exportTableModal > Modal with no view 1`] = `
-<div
-  class="modal__wrapper"
+<teleport-stub
+  to="body"
 >
   <div
-    class="modal__box"
+    class="modal__wrapper"
   >
-    <!--v-if-->
-    
-    
-    <!--v-if-->
-    <h2
-      class="box__title"
+    <div
+      class="modal__box"
     >
-      exportTableModal.title
-    </h2>
-    <!--v-if-->
-    <form>
-      <div
-        class="row"
+      <!--v-if-->
+      
+      
+      <!--v-if-->
+      <h2
+        class="box__title"
       >
-        <div
-          class="col col-12"
-        >
-          <div
-            class="control margin-bottom-2"
-            data-form-error="false"
-          >
-            
-            <label
-              class="control__label control__label--small"
-              for="v-0-0-0"
-            >
-              <span>
-                exportTableForm.viewLabel
-              </span>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
-            </label>
-            <div
-              class="control__wrapper"
-            >
-              <div
-                class="control__elements"
-              >
-                <div
-                  class="control__elements-wrapper"
-                >
-                  
-                  <div
-                    class="dropdown"
-                    id="v-0-0-0"
-                    role="list"
-                    tabindex="0"
-                  >
-                    <a
-                      class="dropdown__selected"
-                    >
-                      
-                      
-                      <!--v-if-->
-                      <!--v-if-->
-                      <span
-                        class="dropdown__selected-text"
-                        title="exportTableDropdown.exportEntireTable"
-                      >
-                        exportTableDropdown.exportEntireTable
-                      </span>
-                      
-                      
-                      <i
-                        class="dropdown__toggle-icon iconoir-nav-arrow-down"
-                      />
-                    </a>
-                    <div
-                      class="dropdown__items hidden"
-                    >
-                      <div
-                        class="select__search"
-                      >
-                        <i
-                          class="select__search-icon iconoir-search"
-                        />
-                        <input
-                          class="select__search-input"
-                          placeholder="action.search"
-                          tabindex="0"
-                          type="text"
-                        />
-                      </div>
-                      <ul
-                        class="select__items"
-                        tabindex="-1"
-                      >
-                        
-                        <li
-                          class="select__item select__item--no-options visible active hover"
-                          role="listitem"
-                        >
-                          <a
-                            class="select__item-link"
-                          >
-                            <div
-                              class="select__item-name"
-                            >
-                              <!--v-if-->
-                              
-                              <!--v-if-->
-                              <!--v-if-->
-                              <span
-                                class="select__item-name-text"
-                                title="exportTableDropdown.exportEntireTable"
-                              >
-                                exportTableDropdown.exportEntireTable
-                              </span>
-                              
-                            </div>
-                            <!--v-if-->
-                          </a>
-                          <i
-                            class="select__item-active-icon iconoir-check"
-                          />
-                        </li>
-                        
-                        <li
-                          class="select__item select__item--no-options visible"
-                          role="listitem"
-                        >
-                          <a
-                            class="select__item-link"
-                          >
-                            <div
-                              class="select__item-name"
-                            >
-                              <!--v-if-->
-                              
-                              <i
-                                class="select__item-icon iconoir-menu"
-                              />
-                              <!--v-if-->
-                              <span
-                                class="select__item-name-text"
-                                title="mock_view_1"
-                              >
-                                mock_view_1
-                              </span>
-                              
-                            </div>
-                            <!--v-if-->
-                          </a>
-                          <i
-                            class="select__item-active-icon iconoir-check"
-                          />
-                        </li>
-                        
-                        
-                      </ul>
-                      <!--v-if-->
-                      <!--v-if-->
-                    </div>
-                  </div>
-                  
-                </div>
-                <!--v-if-->
-                
-                
-              </div>
-              <!--v-if-->
-            </div>
-            
-          </div>
-          <div
-            class="control margin-bottom-2"
-            data-form-error="false"
-          >
-            
-            <label
-              class="control__label control__label--small"
-              for="v-0-0-1"
-            >
-              <span>
-                exporterTypeChoices.formatLabel
-              </span>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
-            </label>
-            <div
-              class="control__wrapper"
-            >
-              <div
-                class="control__elements"
-              >
-                <div
-                  class="control__elements-wrapper"
-                >
-                  
-                  <ul
-                    class="choice-items"
-                  >
-                    
-                    <li>
-                      <a
-                        class="choice-items__link active"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-csv"
-                        />
-                        <span>
-                          exporterType.csv
-                        </span>
-                        <!--v-if-->
-                        <i
-                          class="choice-items__icon-active iconoir-check-circle"
-                        />
-                      </a>
-                      <!--v-if-->
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-code"
-                        />
-                        <span>
-                          premium.exporterType.json
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-code"
-                        />
-                        <span>
-                          premium.exporterType.xml
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-excel"
-                        />
-                        <span>
-                          premium.exporterType.excel
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-code"
-                        />
-                        <span>
-                          premium.exporterType.file
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    
-                  </ul>
-                  
-                </div>
-                <!--v-if-->
-                
-                
-              </div>
-              <!--v-if-->
-            </div>
-            
-          </div>
-          <!--v-if-->
-        </div>
-      </div>
-      <div>
+        exportTableModal.title
+      </h2>
+      <!--v-if-->
+      <form>
         <div
           class="row"
         >
           <div
-            class="col col-4"
+            class="col col-12"
           >
             <div
               class="control margin-bottom-2"
@@ -328,10 +34,10 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
               
               <label
                 class="control__label control__label--small"
-                for="v-0-0-2"
+                for="v-0-0-6"
               >
                 <span>
-                  tableCSVExporter.columnSeparatorLabel
+                  exportTableForm.viewLabel
                 </span>
                 <!--v-if-->
                 <!--v-if-->
@@ -349,7 +55,7 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                     
                     <div
                       class="dropdown"
-                      id="v-0-0-2"
+                      id="v-0-0-6"
                       role="list"
                       tabindex="0"
                     >
@@ -362,9 +68,9 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                         <!--v-if-->
                         <span
                           class="dropdown__selected-text"
-                          title=","
+                          title="exportTableDropdown.exportEntireTable"
                         >
-                          ,
+                          exportTableDropdown.exportEntireTable
                         </span>
                         
                         
@@ -394,119 +100,7 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                         >
                           
                           <li
-                            class="select__item select__item--no-options visible active"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title=","
-                                >
-                                  ,
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title=";"
-                                >
-                                  ;
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="|"
-                                >
-                                  |
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="<tab>"
-                                >
-                                  &lt;tab&gt;
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
+                            class="select__item select__item--no-options visible active hover"
                             role="listitem"
                           >
                             <a
@@ -521,9 +115,9 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                                 <!--v-if-->
                                 <span
                                   class="select__item-name-text"
-                                  title="tableCSVExporter.recordSeparator (30)"
+                                  title="exportTableDropdown.exportEntireTable"
                                 >
-                                  tableCSVExporter.recordSeparator (30)
+                                  exportTableDropdown.exportEntireTable
                                 </span>
                                 
                               </div>
@@ -533,6 +127,7 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                               class="select__item-active-icon iconoir-check"
                             />
                           </li>
+                          
                           <li
                             class="select__item select__item--no-options visible"
                             role="listitem"
@@ -545,13 +140,15 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                               >
                                 <!--v-if-->
                                 
-                                <!--v-if-->
+                                <i
+                                  class="select__item-icon iconoir-menu"
+                                />
                                 <!--v-if-->
                                 <span
                                   class="select__item-name-text"
-                                  title="tableCSVExporter.unitSeparator (31)"
+                                  title="mock_view_1"
                                 >
-                                  tableCSVExporter.unitSeparator (31)
+                                  mock_view_1
                                 </span>
                                 
                               </div>
@@ -562,6 +159,7 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                             />
                           </li>
                           
+                          
                         </ul>
                         <!--v-if-->
                         <!--v-if-->
@@ -577,10 +175,6 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
               </div>
               
             </div>
-          </div>
-          <div
-            class="col col-8"
-          >
             <div
               class="control margin-bottom-2"
               data-form-error="false"
@@ -588,10 +182,10 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
               
               <label
                 class="control__label control__label--small"
-                for="v-0-0-3"
+                for="v-0-0-7"
               >
                 <span>
-                  tableCSVExporter.encodingLabel
+                  exporterTypeChoices.formatLabel
                 </span>
                 <!--v-if-->
                 <!--v-if-->
@@ -607,2586 +201,1685 @@ exports[`Preview exportTableModal > Modal with no view 1`] = `
                     class="control__elements-wrapper"
                   >
                     
-                    <div
-                      class="dropdown"
-                      id="v-0-0-3"
-                      role="list"
-                      tabindex="0"
+                    <ul
+                      class="choice-items"
                     >
-                      <a
-                        class="dropdown__selected"
-                      >
-                        
-                        
-                        <!--v-if-->
-                        <!--v-if-->
-                        <span
-                          class="dropdown__selected-text"
-                          title="Unicode (UTF-8)"
-                        >
-                          Unicode (UTF-8)
-                        </span>
-                        
-                        
-                        <i
-                          class="dropdown__toggle-icon iconoir-nav-arrow-down"
-                        />
-                      </a>
-                      <div
-                        class="dropdown__items hidden"
-                      >
-                        <div
-                          class="select__search"
+                      
+                      <li>
+                        <a
+                          class="choice-items__link active"
                         >
                           <i
-                            class="select__search-icon iconoir-search"
+                            class="choice-items__icon baserow-icon-file-csv"
                           />
-                          <input
-                            class="select__search-input"
-                            placeholder="action.search"
-                            tabindex="0"
-                            type="text"
+                          <span>
+                            exporterType.csv
+                          </span>
+                          <!--v-if-->
+                          <i
+                            class="choice-items__icon-active iconoir-check-circle"
                           />
-                        </div>
-                        <ul
-                          class="select__items"
-                          tabindex="-1"
+                        </a>
+                        <!--v-if-->
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
                         >
-                          
-                          <li
-                            class="select__item select__item--no-options visible active"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Unicode (UTF-8)"
-                                >
-                                  Unicode (UTF-8)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Arabic (ISO-8859-6)"
-                                >
-                                  Arabic (ISO-8859-6)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Arabic (Windows-1256)"
-                                >
-                                  Arabic (Windows-1256)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Baltic (ISO-8859-4)"
-                                >
-                                  Baltic (ISO-8859-4)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
+                          <i
+                            class="choice-items__icon baserow-icon-file-code"
+                          />
+                          <span>
+                            premium.exporterType.json
+                          </span>
+                          <div
+                            class="deactivated-label"
                           >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Baltic (windows-1257)"
-                                >
-                                  Baltic (windows-1257)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
                             <i
-                              class="select__item-active-icon iconoir-check"
+                              class="iconoir-lock"
                             />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-code"
+                          />
+                          <span>
+                            premium.exporterType.xml
+                          </span>
+                          <div
+                            class="deactivated-label"
                           >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Celtic (ISO-8859-14)"
-                                >
-                                  Celtic (ISO-8859-14)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
                             <i
-                              class="select__item-active-icon iconoir-check"
+                              class="iconoir-lock"
                             />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-excel"
+                          />
+                          <span>
+                            premium.exporterType.excel
+                          </span>
+                          <div
+                            class="deactivated-label"
                           >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Central European (ISO-8859-2)"
-                                >
-                                  Central European (ISO-8859-2)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
                             <i
-                              class="select__item-active-icon iconoir-check"
+                              class="iconoir-lock"
                             />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-code"
+                          />
+                          <span>
+                            premium.exporterType.file
+                          </span>
+                          <div
+                            class="deactivated-label"
                           >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Central European (Windows-1250)"
-                                >
-                                  Central European (Windows-1250)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
                             <i
-                              class="select__item-active-icon iconoir-check"
+                              class="iconoir-lock"
                             />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Chinese, Simplified (GBK)"
-                                >
-                                  Chinese, Simplified (GBK)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Chinese (GB18030)"
-                                >
-                                  Chinese (GB18030)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Chinese Traditional (Big5)"
-                                >
-                                  Chinese Traditional (Big5)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (KOI8-R)"
-                                >
-                                  Cyrillic (KOI8-R)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (KOI8-U)"
-                                >
-                                  Cyrillic (KOI8-U)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (ISO-8859-5)"
-                                >
-                                  Cyrillic (ISO-8859-5)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (Windows-1251)"
-                                >
-                                  Cyrillic (Windows-1251)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic Mac OS (x-mac-cyrillic)"
-                                >
-                                  Cyrillic Mac OS (x-mac-cyrillic)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Greek (ISO-8859-7)"
-                                >
-                                  Greek (ISO-8859-7)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Greek (Windows-1253)"
-                                >
-                                  Greek (Windows-1253)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Hebrew (ISO-8859-8)"
-                                >
-                                  Hebrew (ISO-8859-8)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Hebrew (Windows-1255)"
-                                >
-                                  Hebrew (Windows-1255)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Japanese (EUC-JP)"
-                                >
-                                  Japanese (EUC-JP)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Japanese (ISO-2022-JP)"
-                                >
-                                  Japanese (ISO-2022-JP)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Japanese (Shift-JIS)"
-                                >
-                                  Japanese (Shift-JIS)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Korean (EUC-KR)"
-                                >
-                                  Korean (EUC-KR)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Macintosh"
-                                >
-                                  Macintosh
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Nordic (ISO-8859-10)"
-                                >
-                                  Nordic (ISO-8859-10)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="South-Eastern European (ISO-8859-16)"
-                                >
-                                  South-Eastern European (ISO-8859-16)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Thai (Windows-874)"
-                                >
-                                  Thai (Windows-874)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Turkish (Windows-1254)"
-                                >
-                                  Turkish (Windows-1254)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Vietnamese (Windows-1258)"
-                                >
-                                  Vietnamese (Windows-1258)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Western European (ISO-8859-1)"
-                                >
-                                  Western European (ISO-8859-1)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Western European (Windows-1252)"
-                                >
-                                  Western European (Windows-1252)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Latin 3 (ISO-8859-3)"
-                                >
-                                  Latin 3 (ISO-8859-3)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          
-                        </ul>
-                        <!--v-if-->
-                        <!--v-if-->
-                      </div>
-                    </div>
-                    
-                  </div>
-                  <!--v-if-->
-                  
-                  
-                </div>
-                <!--v-if-->
-              </div>
-              
-            </div>
-          </div>
-        </div>
-        <div
-          class="row"
-        >
-          <div
-            class="col col-6"
-          >
-            <div
-              class="control"
-              data-form-error="false"
-            >
-              
-              <label
-                class="control__label control__label--small"
-                for="v-0-0-4"
-              >
-                <span>
-                  tableCSVExporter.includeHeader
-                </span>
-                <!--v-if-->
-                <!--v-if-->
-                <!--v-if-->
-              </label>
-              <div
-                class="control__wrapper"
-              >
-                <div
-                  class="control__elements"
-                >
-                  <div
-                    class="control__elements-wrapper"
-                  >
-                    
-                    <label
-                      class="checkbox checkbox--checked"
-                    >
-                      <input
-                        checked=""
-                        class="checkbox__native"
-                        id="checkboxv-0-0-5"
-                        type="checkbox"
-                      />
-                      <div
-                        class="checkbox__button"
-                      >
-                        <svg
-                          class="checkbox__tick"
-                          fill="none"
-                          height="8"
-                          viewBox="0 0 9 8"
-                          width="9"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <g
-                            clip-path="url(#clipv-0-0-5)"
-                          >
-                            <path
-                              d="M1.5179 4.4821L3.18211 6.18211L7.42475 2.15368"
-                              stroke="white"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                            />
-                          </g>
-                          <defs>
-                            <clippath
-                              id="clipv-0-0-5"
-                            >
-                              <rect
-                                fill="white"
-                                height="8"
-                                transform="translate(0.5)"
-                                width="8"
-                              />
-                            </clippath>
-                          </defs>
-                        </svg>
-                        <svg
-                          class="checkbox__tick-indeterminate"
-                          fill="none"
-                          height="8"
-                          style="display: none;"
-                          viewBox="0 0 8 8"
-                          width="8"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M1.5 4L6.5 4"
-                            stroke="white"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </div>
-                      <span
-                        class="checkbox__label"
-                      >
-                        
-                        common.yes
-                        
-                      </span>
-                    </label>
-                    
-                  </div>
-                  <!--v-if-->
-                  
-                  
-                </div>
-                <!--v-if-->
-              </div>
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div
-        class="modal-progress__actions"
-      >
-        <!--v-if-->
-        <button
-          class="button button--large button--full-width modal-progress__export-button"
-          disabled=""
-        >
-          <!--v-if-->
-          <span
-            class="button__label"
-          >
-            
-            exportTableLoadingBar.export
-            
-          </span>
-          <!--v-if-->
-        </button>
-      </div>
-      
-    </form>
-    
-    
-    
-    <div
-      class="modal__actions"
-    >
-      <a
-        class="modal__close"
-      >
-        <i
-          class="iconoir-cancel"
-        />
-      </a>
-      
-      
-    </div>
-    
-  </div>
-</div>
-`;
-
-exports[`Preview exportTableModal > Modal with view 1`] = `
-<div
-  class="modal__wrapper"
->
-  <div
-    class="modal__box"
-  >
-    <!--v-if-->
-    
-    
-    <!--v-if-->
-    <h2
-      class="box__title"
-    >
-      exportTableModal.title
-    </h2>
-    <!--v-if-->
-    <form>
-      <div
-        class="row"
-      >
-        <div
-          class="col col-12"
-        >
-          <div
-            class="control margin-bottom-2"
-            data-form-error="false"
-          >
-            
-            <label
-              class="control__label control__label--small"
-              for="v-0-0-0"
-            >
-              <span>
-                exportTableForm.viewLabel
-              </span>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
-            </label>
-            <div
-              class="control__wrapper"
-            >
-              <div
-                class="control__elements"
-              >
-                <div
-                  class="control__elements-wrapper"
-                >
-                  
-                  <div
-                    class="dropdown"
-                    id="v-0-0-0"
-                    role="list"
-                    tabindex="0"
-                  >
-                    <a
-                      class="dropdown__selected"
-                    >
-                      
-                      <span
-                        class="dropdown__selected-placeholder"
-                      >
-                        action.makeChoice
-                      </span>
-                      
-                      <i
-                        class="dropdown__toggle-icon iconoir-nav-arrow-down"
-                      />
-                    </a>
-                    <div
-                      class="dropdown__items hidden"
-                    >
-                      <div
-                        class="select__search"
-                      >
-                        <i
-                          class="select__search-icon iconoir-search"
-                        />
-                        <input
-                          class="select__search-input"
-                          placeholder="action.search"
-                          tabindex="0"
-                          type="text"
-                        />
-                      </div>
-                      <ul
-                        class="select__items"
-                        tabindex="-1"
-                      >
-                        
-                        <li
-                          class="select__item select__item--no-options visible hover"
-                          role="listitem"
-                        >
-                          <a
-                            class="select__item-link"
-                          >
-                            <div
-                              class="select__item-name"
-                            >
-                              <!--v-if-->
-                              
-                              <!--v-if-->
-                              <!--v-if-->
-                              <span
-                                class="select__item-name-text"
-                                title="exportTableDropdown.exportEntireTable"
-                              >
-                                exportTableDropdown.exportEntireTable
-                              </span>
-                              
-                            </div>
-                            <!--v-if-->
-                          </a>
-                          <i
-                            class="select__item-active-icon iconoir-check"
-                          />
-                        </li>
-                        
-                        <li
-                          class="select__item select__item--no-options visible active"
-                          role="listitem"
-                        >
-                          <a
-                            class="select__item-link"
-                          >
-                            <div
-                              class="select__item-name"
-                            >
-                              <!--v-if-->
-                              
-                              <i
-                                class="select__item-icon iconoir-menu"
-                              />
-                              <!--v-if-->
-                              <span
-                                class="select__item-name-text"
-                                title="mock_view_1"
-                              >
-                                mock_view_1
-                              </span>
-                              
-                            </div>
-                            <!--v-if-->
-                          </a>
-                          <i
-                            class="select__item-active-icon iconoir-check"
-                          />
-                        </li>
-                        
-                        
-                      </ul>
-                      <!--v-if-->
-                      <!--v-if-->
-                    </div>
-                  </div>
-                  
-                </div>
-                <!--v-if-->
-                
-                
-              </div>
-              <!--v-if-->
-            </div>
-            
-          </div>
-          <div
-            class="control margin-bottom-2"
-            data-form-error="false"
-          >
-            
-            <label
-              class="control__label control__label--small"
-              for="v-0-0-1"
-            >
-              <span>
-                exporterTypeChoices.formatLabel
-              </span>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
-            </label>
-            <div
-              class="control__wrapper"
-            >
-              <div
-                class="control__elements"
-              >
-                <div
-                  class="control__elements-wrapper"
-                >
-                  
-                  <ul
-                    class="choice-items"
-                  >
-                    
-                    <li>
-                      <a
-                        class="choice-items__link active"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-csv"
-                        />
-                        <span>
-                          exporterType.csv
-                        </span>
-                        <!--v-if-->
-                        <i
-                          class="choice-items__icon-active iconoir-check-circle"
-                        />
-                      </a>
-                      <!--v-if-->
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-code"
-                        />
-                        <span>
-                          premium.exporterType.json
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-code"
-                        />
-                        <span>
-                          premium.exporterType.xml
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-excel"
-                        />
-                        <span>
-                          premium.exporterType.excel
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        class="choice-items__link"
-                      >
-                        <i
-                          class="choice-items__icon baserow-icon-file-code"
-                        />
-                        <span>
-                          premium.exporterType.file
-                        </span>
-                        <div
-                          class="deactivated-label"
-                        >
-                          <i
-                            class="iconoir-lock"
-                          />
-                        </div>
-                        <!--v-if-->
-                      </a>
-                    </li>
-                    
-                  </ul>
-                  
-                </div>
-                <!--v-if-->
-                
-                
-              </div>
-              <!--v-if-->
-            </div>
-            
-          </div>
-          <!--v-if-->
-        </div>
-      </div>
-      <div>
-        <div
-          class="row"
-        >
-          <div
-            class="col col-4"
-          >
-            <div
-              class="control margin-bottom-2"
-              data-form-error="false"
-            >
-              
-              <label
-                class="control__label control__label--small"
-                for="v-0-0-2"
-              >
-                <span>
-                  tableCSVExporter.columnSeparatorLabel
-                </span>
-                <!--v-if-->
-                <!--v-if-->
-                <!--v-if-->
-              </label>
-              <div
-                class="control__wrapper"
-              >
-                <div
-                  class="control__elements"
-                >
-                  <div
-                    class="control__elements-wrapper"
-                  >
-                    
-                    <div
-                      class="dropdown"
-                      id="v-0-0-2"
-                      role="list"
-                      tabindex="0"
-                    >
-                      <a
-                        class="dropdown__selected"
-                      >
-                        
-                        
-                        <!--v-if-->
-                        <!--v-if-->
-                        <span
-                          class="dropdown__selected-text"
-                          title=","
-                        >
-                          ,
-                        </span>
-                        
-                        
-                        <i
-                          class="dropdown__toggle-icon iconoir-nav-arrow-down"
-                        />
-                      </a>
-                      <div
-                        class="dropdown__items hidden"
-                      >
-                        <div
-                          class="select__search"
-                        >
-                          <i
-                            class="select__search-icon iconoir-search"
-                          />
-                          <input
-                            class="select__search-input"
-                            placeholder="action.search"
-                            tabindex="0"
-                            type="text"
-                          />
-                        </div>
-                        <ul
-                          class="select__items"
-                          tabindex="-1"
-                        >
-                          
-                          <li
-                            class="select__item select__item--no-options visible active"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title=","
-                                >
-                                  ,
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title=";"
-                                >
-                                  ;
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="|"
-                                >
-                                  |
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="<tab>"
-                                >
-                                  &lt;tab&gt;
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="tableCSVExporter.recordSeparator (30)"
-                                >
-                                  tableCSVExporter.recordSeparator (30)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="tableCSVExporter.unitSeparator (31)"
-                                >
-                                  tableCSVExporter.unitSeparator (31)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          
-                        </ul>
-                        <!--v-if-->
-                        <!--v-if-->
-                      </div>
-                    </div>
-                    
-                  </div>
-                  <!--v-if-->
-                  
-                  
-                </div>
-                <!--v-if-->
-              </div>
-              
-            </div>
-          </div>
-          <div
-            class="col col-8"
-          >
-            <div
-              class="control margin-bottom-2"
-              data-form-error="false"
-            >
-              
-              <label
-                class="control__label control__label--small"
-                for="v-0-0-3"
-              >
-                <span>
-                  tableCSVExporter.encodingLabel
-                </span>
-                <!--v-if-->
-                <!--v-if-->
-                <!--v-if-->
-              </label>
-              <div
-                class="control__wrapper"
-              >
-                <div
-                  class="control__elements"
-                >
-                  <div
-                    class="control__elements-wrapper"
-                  >
-                    
-                    <div
-                      class="dropdown"
-                      id="v-0-0-3"
-                      role="list"
-                      tabindex="0"
-                    >
-                      <a
-                        class="dropdown__selected"
-                      >
-                        
-                        
-                        <!--v-if-->
-                        <!--v-if-->
-                        <span
-                          class="dropdown__selected-text"
-                          title="Unicode (UTF-8)"
-                        >
-                          Unicode (UTF-8)
-                        </span>
-                        
-                        
-                        <i
-                          class="dropdown__toggle-icon iconoir-nav-arrow-down"
-                        />
-                      </a>
-                      <div
-                        class="dropdown__items hidden"
-                      >
-                        <div
-                          class="select__search"
-                        >
-                          <i
-                            class="select__search-icon iconoir-search"
-                          />
-                          <input
-                            class="select__search-input"
-                            placeholder="action.search"
-                            tabindex="0"
-                            type="text"
-                          />
-                        </div>
-                        <ul
-                          class="select__items"
-                          tabindex="-1"
-                        >
-                          
-                          <li
-                            class="select__item select__item--no-options visible active"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Unicode (UTF-8)"
-                                >
-                                  Unicode (UTF-8)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Arabic (ISO-8859-6)"
-                                >
-                                  Arabic (ISO-8859-6)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Arabic (Windows-1256)"
-                                >
-                                  Arabic (Windows-1256)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Baltic (ISO-8859-4)"
-                                >
-                                  Baltic (ISO-8859-4)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Baltic (windows-1257)"
-                                >
-                                  Baltic (windows-1257)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Celtic (ISO-8859-14)"
-                                >
-                                  Celtic (ISO-8859-14)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Central European (ISO-8859-2)"
-                                >
-                                  Central European (ISO-8859-2)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Central European (Windows-1250)"
-                                >
-                                  Central European (Windows-1250)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Chinese, Simplified (GBK)"
-                                >
-                                  Chinese, Simplified (GBK)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Chinese (GB18030)"
-                                >
-                                  Chinese (GB18030)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Chinese Traditional (Big5)"
-                                >
-                                  Chinese Traditional (Big5)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (KOI8-R)"
-                                >
-                                  Cyrillic (KOI8-R)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (KOI8-U)"
-                                >
-                                  Cyrillic (KOI8-U)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (ISO-8859-5)"
-                                >
-                                  Cyrillic (ISO-8859-5)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic (Windows-1251)"
-                                >
-                                  Cyrillic (Windows-1251)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Cyrillic Mac OS (x-mac-cyrillic)"
-                                >
-                                  Cyrillic Mac OS (x-mac-cyrillic)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Greek (ISO-8859-7)"
-                                >
-                                  Greek (ISO-8859-7)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Greek (Windows-1253)"
-                                >
-                                  Greek (Windows-1253)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Hebrew (ISO-8859-8)"
-                                >
-                                  Hebrew (ISO-8859-8)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Hebrew (Windows-1255)"
-                                >
-                                  Hebrew (Windows-1255)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Japanese (EUC-JP)"
-                                >
-                                  Japanese (EUC-JP)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Japanese (ISO-2022-JP)"
-                                >
-                                  Japanese (ISO-2022-JP)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Japanese (Shift-JIS)"
-                                >
-                                  Japanese (Shift-JIS)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Korean (EUC-KR)"
-                                >
-                                  Korean (EUC-KR)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Macintosh"
-                                >
-                                  Macintosh
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Nordic (ISO-8859-10)"
-                                >
-                                  Nordic (ISO-8859-10)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="South-Eastern European (ISO-8859-16)"
-                                >
-                                  South-Eastern European (ISO-8859-16)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
-                            />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
-                          >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Thai (Windows-874)"
-                                >
-                                  Thai (Windows-874)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
-                            <i
-                              class="select__item-active-icon iconoir-check"
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      
+                    </ul>
+                    
+                  </div>
+                  <!--v-if-->
+                  
+                  
+                </div>
+                <!--v-if-->
+              </div>
+              
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+        <div>
+          <div
+            class="row"
+          >
+            <div
+              class="col col-4"
+            >
+              <div
+                class="control margin-bottom-2"
+                data-form-error="false"
+              >
+                
+                <label
+                  class="control__label control__label--small"
+                  for="v-0-0-8"
+                >
+                  <span>
+                    tableCSVExporter.columnSeparatorLabel
+                  </span>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </label>
+                <div
+                  class="control__wrapper"
+                >
+                  <div
+                    class="control__elements"
+                  >
+                    <div
+                      class="control__elements-wrapper"
+                    >
+                      
+                      <div
+                        class="dropdown"
+                        id="v-0-0-8"
+                        role="list"
+                        tabindex="0"
+                      >
+                        <a
+                          class="dropdown__selected"
+                        >
+                          
+                          
+                          <!--v-if-->
+                          <!--v-if-->
+                          <span
+                            class="dropdown__selected-text"
+                            title=","
+                          >
+                            ,
+                          </span>
+                          
+                          
+                          <i
+                            class="dropdown__toggle-icon iconoir-nav-arrow-down"
+                          />
+                        </a>
+                        <div
+                          class="dropdown__items hidden"
+                        >
+                          <div
+                            class="select__search"
+                          >
+                            <i
+                              class="select__search-icon iconoir-search"
+                            />
+                            <input
+                              class="select__search-input"
+                              placeholder="action.search"
+                              tabindex="0"
+                              type="text"
+                            />
+                          </div>
+                          <ul
+                            class="select__items"
+                            tabindex="-1"
+                          >
+                            
+                            <li
+                              class="select__item select__item--no-options visible active"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title=","
+                                  >
+                                    ,
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title=";"
+                                  >
+                                    ;
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="|"
+                                  >
+                                    |
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="<tab>"
+                                  >
+                                    &lt;tab&gt;
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="tableCSVExporter.recordSeparator (30)"
+                                  >
+                                    tableCSVExporter.recordSeparator (30)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="tableCSVExporter.unitSeparator (31)"
+                                  >
+                                    tableCSVExporter.unitSeparator (31)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            
+                          </ul>
+                          <!--v-if-->
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      
+                    </div>
+                    <!--v-if-->
+                    
+                    
+                  </div>
+                  <!--v-if-->
+                </div>
+                
+              </div>
+            </div>
+            <div
+              class="col col-8"
+            >
+              <div
+                class="control margin-bottom-2"
+                data-form-error="false"
+              >
+                
+                <label
+                  class="control__label control__label--small"
+                  for="v-0-0-9"
+                >
+                  <span>
+                    tableCSVExporter.encodingLabel
+                  </span>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </label>
+                <div
+                  class="control__wrapper"
+                >
+                  <div
+                    class="control__elements"
+                  >
+                    <div
+                      class="control__elements-wrapper"
+                    >
+                      
+                      <div
+                        class="dropdown"
+                        id="v-0-0-9"
+                        role="list"
+                        tabindex="0"
+                      >
+                        <a
+                          class="dropdown__selected"
+                        >
+                          
+                          
+                          <!--v-if-->
+                          <!--v-if-->
+                          <span
+                            class="dropdown__selected-text"
+                            title="Unicode (UTF-8)"
+                          >
+                            Unicode (UTF-8)
+                          </span>
+                          
+                          
+                          <i
+                            class="dropdown__toggle-icon iconoir-nav-arrow-down"
+                          />
+                        </a>
+                        <div
+                          class="dropdown__items hidden"
+                        >
+                          <div
+                            class="select__search"
+                          >
+                            <i
+                              class="select__search-icon iconoir-search"
+                            />
+                            <input
+                              class="select__search-input"
+                              placeholder="action.search"
+                              tabindex="0"
+                              type="text"
+                            />
+                          </div>
+                          <ul
+                            class="select__items"
+                            tabindex="-1"
+                          >
+                            
+                            <li
+                              class="select__item select__item--no-options visible active"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Unicode (UTF-8)"
+                                  >
+                                    Unicode (UTF-8)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Arabic (ISO-8859-6)"
+                                  >
+                                    Arabic (ISO-8859-6)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Arabic (Windows-1256)"
+                                  >
+                                    Arabic (Windows-1256)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Baltic (ISO-8859-4)"
+                                  >
+                                    Baltic (ISO-8859-4)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Baltic (windows-1257)"
+                                  >
+                                    Baltic (windows-1257)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Celtic (ISO-8859-14)"
+                                  >
+                                    Celtic (ISO-8859-14)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Central European (ISO-8859-2)"
+                                  >
+                                    Central European (ISO-8859-2)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Central European (Windows-1250)"
+                                  >
+                                    Central European (Windows-1250)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Chinese, Simplified (GBK)"
+                                  >
+                                    Chinese, Simplified (GBK)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Chinese (GB18030)"
+                                  >
+                                    Chinese (GB18030)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Chinese Traditional (Big5)"
+                                  >
+                                    Chinese Traditional (Big5)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (KOI8-R)"
+                                  >
+                                    Cyrillic (KOI8-R)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (KOI8-U)"
+                                  >
+                                    Cyrillic (KOI8-U)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (ISO-8859-5)"
+                                  >
+                                    Cyrillic (ISO-8859-5)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (Windows-1251)"
+                                  >
+                                    Cyrillic (Windows-1251)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic Mac OS (x-mac-cyrillic)"
+                                  >
+                                    Cyrillic Mac OS (x-mac-cyrillic)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Greek (ISO-8859-7)"
+                                  >
+                                    Greek (ISO-8859-7)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Greek (Windows-1253)"
+                                  >
+                                    Greek (Windows-1253)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Hebrew (ISO-8859-8)"
+                                  >
+                                    Hebrew (ISO-8859-8)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Hebrew (Windows-1255)"
+                                  >
+                                    Hebrew (Windows-1255)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Japanese (EUC-JP)"
+                                  >
+                                    Japanese (EUC-JP)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Japanese (ISO-2022-JP)"
+                                  >
+                                    Japanese (ISO-2022-JP)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Japanese (Shift-JIS)"
+                                  >
+                                    Japanese (Shift-JIS)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Korean (EUC-KR)"
+                                  >
+                                    Korean (EUC-KR)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Macintosh"
+                                  >
+                                    Macintosh
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Nordic (ISO-8859-10)"
+                                  >
+                                    Nordic (ISO-8859-10)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="South-Eastern European (ISO-8859-16)"
+                                  >
+                                    South-Eastern European (ISO-8859-16)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Thai (Windows-874)"
+                                  >
+                                    Thai (Windows-874)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Turkish (Windows-1254)"
+                                  >
+                                    Turkish (Windows-1254)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Vietnamese (Windows-1258)"
+                                  >
+                                    Vietnamese (Windows-1258)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Western European (ISO-8859-1)"
+                                  >
+                                    Western European (ISO-8859-1)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Western European (Windows-1252)"
+                                  >
+                                    Western European (Windows-1252)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Latin 3 (ISO-8859-3)"
+                                  >
+                                    Latin 3 (ISO-8859-3)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            
+                          </ul>
+                          <!--v-if-->
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      
+                    </div>
+                    <!--v-if-->
+                    
+                    
+                  </div>
+                  <!--v-if-->
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          <div
+            class="row"
+          >
+            <div
+              class="col col-6"
+            >
+              <div
+                class="control"
+                data-form-error="false"
+              >
+                
+                <label
+                  class="control__label control__label--small"
+                  for="v-0-0-10"
+                >
+                  <span>
+                    tableCSVExporter.includeHeader
+                  </span>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </label>
+                <div
+                  class="control__wrapper"
+                >
+                  <div
+                    class="control__elements"
+                  >
+                    <div
+                      class="control__elements-wrapper"
+                    >
+                      
+                      <label
+                        class="checkbox checkbox--checked"
+                      >
+                        <input
+                          checked=""
+                          class="checkbox__native"
+                          id="checkboxv-0-0-11"
+                          type="checkbox"
+                        />
+                        <div
+                          class="checkbox__button"
+                        >
+                          <svg
+                            class="checkbox__tick"
+                            fill="none"
+                            height="8"
+                            viewBox="0 0 9 8"
+                            width="9"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              clip-path="url(#clipv-0-0-11)"
+                            >
+                              <path
+                                d="M1.5179 4.4821L3.18211 6.18211L7.42475 2.15368"
+                                stroke="white"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                              />
+                            </g>
+                            <defs>
+                              <clippath
+                                id="clipv-0-0-11"
+                              >
+                                <rect
+                                  fill="white"
+                                  height="8"
+                                  transform="translate(0.5)"
+                                  width="8"
+                                />
+                              </clippath>
+                            </defs>
+                          </svg>
+                          <svg
+                            class="checkbox__tick-indeterminate"
+                            fill="none"
+                            height="8"
+                            style="display: none;"
+                            viewBox="0 0 8 8"
+                            width="8"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M1.5 4L6.5 4"
+                              stroke="white"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
                             />
-                          </li>
+                          </svg>
+                        </div>
+                        <span
+                          class="checkbox__label"
+                        >
+                          
+                          common.yes
+                          
+                        </span>
+                      </label>
+                      
+                    </div>
+                    <!--v-if-->
+                    
+                    
+                  </div>
+                  <!--v-if-->
+                </div>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div
+          class="modal-progress__actions"
+        >
+          <!--v-if-->
+          <button
+            class="button button--large button--full-width modal-progress__export-button"
+            disabled=""
+          >
+            <!--v-if-->
+            <span
+              class="button__label"
+            >
+              
+              exportTableLoadingBar.export
+              
+            </span>
+            <!--v-if-->
+          </button>
+        </div>
+        
+      </form>
+      
+      
+      
+      <div
+        class="modal__actions"
+      >
+        <a
+          class="modal__close"
+        >
+          <i
+            class="iconoir-cancel"
+          />
+        </a>
+        
+        
+      </div>
+      
+    </div>
+  </div>
+</teleport-stub>
+`;
+
+exports[`Preview exportTableModal > Modal with view 1`] = `
+<teleport-stub
+  to="body"
+>
+  <div
+    class="modal__wrapper"
+  >
+    <div
+      class="modal__box"
+    >
+      <!--v-if-->
+      
+      
+      <!--v-if-->
+      <h2
+        class="box__title"
+      >
+        exportTableModal.title
+      </h2>
+      <!--v-if-->
+      <form>
+        <div
+          class="row"
+        >
+          <div
+            class="col col-12"
+          >
+            <div
+              class="control margin-bottom-2"
+              data-form-error="false"
+            >
+              
+              <label
+                class="control__label control__label--small"
+                for="v-0-0-6"
+              >
+                <span>
+                  exportTableForm.viewLabel
+                </span>
+                <!--v-if-->
+                <!--v-if-->
+                <!--v-if-->
+              </label>
+              <div
+                class="control__wrapper"
+              >
+                <div
+                  class="control__elements"
+                >
+                  <div
+                    class="control__elements-wrapper"
+                  >
+                    
+                    <div
+                      class="dropdown"
+                      id="v-0-0-6"
+                      role="list"
+                      tabindex="0"
+                    >
+                      <a
+                        class="dropdown__selected"
+                      >
+                        
+                        
+                        <i
+                          class="dropdown__selected-icon iconoir-menu"
+                        />
+                        <!--v-if-->
+                        <span
+                          class="dropdown__selected-text"
+                          title="mock_view_1"
+                        >
+                          mock_view_1
+                        </span>
+                        
+                        
+                        <i
+                          class="dropdown__toggle-icon iconoir-nav-arrow-down"
+                        />
+                      </a>
+                      <div
+                        class="dropdown__items hidden"
+                      >
+                        <div
+                          class="select__search"
+                        >
+                          <i
+                            class="select__search-icon iconoir-search"
+                          />
+                          <input
+                            class="select__search-input"
+                            placeholder="action.search"
+                            tabindex="0"
+                            type="text"
+                          />
+                        </div>
+                        <ul
+                          class="select__items"
+                          tabindex="-1"
+                        >
+                          
                           <li
-                            class="select__item select__item--no-options visible"
+                            class="select__item select__item--no-options visible hover"
                             role="listitem"
                           >
                             <a
@@ -3201,9 +1894,9 @@ exports[`Preview exportTableModal > Modal with view 1`] = `
                                 <!--v-if-->
                                 <span
                                   class="select__item-name-text"
-                                  title="Turkish (Windows-1254)"
+                                  title="exportTableDropdown.exportEntireTable"
                                 >
-                                  Turkish (Windows-1254)
+                                  exportTableDropdown.exportEntireTable
                                 </span>
                                 
                               </div>
@@ -3213,8 +1906,9 @@ exports[`Preview exportTableModal > Modal with view 1`] = `
                               class="select__item-active-icon iconoir-check"
                             />
                           </li>
+                          
                           <li
-                            class="select__item select__item--no-options visible"
+                            class="select__item select__item--no-options visible active"
                             role="listitem"
                           >
                             <a
@@ -3225,13 +1919,15 @@ exports[`Preview exportTableModal > Modal with view 1`] = `
                               >
                                 <!--v-if-->
                                 
-                                <!--v-if-->
+                                <i
+                                  class="select__item-icon iconoir-menu"
+                                />
                                 <!--v-if-->
                                 <span
                                   class="select__item-name-text"
-                                  title="Vietnamese (Windows-1258)"
+                                  title="mock_view_1"
                                 >
-                                  Vietnamese (Windows-1258)
+                                  mock_view_1
                                 </span>
                                 
                               </div>
@@ -3241,96 +1937,172 @@ exports[`Preview exportTableModal > Modal with view 1`] = `
                               class="select__item-active-icon iconoir-check"
                             />
                           </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
+                          
+                          
+                        </ul>
+                        <!--v-if-->
+                        <!--v-if-->
+                      </div>
+                    </div>
+                    
+                  </div>
+                  <!--v-if-->
+                  
+                  
+                </div>
+                <!--v-if-->
+              </div>
+              
+            </div>
+            <div
+              class="control margin-bottom-2"
+              data-form-error="false"
+            >
+              
+              <label
+                class="control__label control__label--small"
+                for="v-0-0-7"
+              >
+                <span>
+                  exporterTypeChoices.formatLabel
+                </span>
+                <!--v-if-->
+                <!--v-if-->
+                <!--v-if-->
+              </label>
+              <div
+                class="control__wrapper"
+              >
+                <div
+                  class="control__elements"
+                >
+                  <div
+                    class="control__elements-wrapper"
+                  >
+                    
+                    <ul
+                      class="choice-items"
+                    >
+                      
+                      <li>
+                        <a
+                          class="choice-items__link active"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-csv"
+                          />
+                          <span>
+                            exporterType.csv
+                          </span>
+                          <!--v-if-->
+                          <i
+                            class="choice-items__icon-active iconoir-check-circle"
+                          />
+                        </a>
+                        <!--v-if-->
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-code"
+                          />
+                          <span>
+                            premium.exporterType.json
+                          </span>
+                          <div
+                            class="deactivated-label"
                           >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Western European (ISO-8859-1)"
-                                >
-                                  Western European (ISO-8859-1)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
                             <i
-                              class="select__item-active-icon iconoir-check"
+                              class="iconoir-lock"
                             />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-code"
+                          />
+                          <span>
+                            premium.exporterType.xml
+                          </span>
+                          <div
+                            class="deactivated-label"
                           >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Western European (Windows-1252)"
-                                >
-                                  Western European (Windows-1252)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
                             <i
-                              class="select__item-active-icon iconoir-check"
+                              class="iconoir-lock"
                             />
-                          </li>
-                          <li
-                            class="select__item select__item--no-options visible"
-                            role="listitem"
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-excel"
+                          />
+                          <span>
+                            premium.exporterType.excel
+                          </span>
+                          <div
+                            class="deactivated-label"
+                          >
+                            <i
+                              class="iconoir-lock"
+                            />
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      <li>
+                        <a
+                          class="choice-items__link"
+                        >
+                          <i
+                            class="choice-items__icon baserow-icon-file-code"
+                          />
+                          <span>
+                            premium.exporterType.file
+                          </span>
+                          <div
+                            class="deactivated-label"
                           >
-                            <a
-                              class="select__item-link"
-                            >
-                              <div
-                                class="select__item-name"
-                              >
-                                <!--v-if-->
-                                
-                                <!--v-if-->
-                                <!--v-if-->
-                                <span
-                                  class="select__item-name-text"
-                                  title="Latin 3 (ISO-8859-3)"
-                                >
-                                  Latin 3 (ISO-8859-3)
-                                </span>
-                                
-                              </div>
-                              <!--v-if-->
-                            </a>
                             <i
-                              class="select__item-active-icon iconoir-check"
+                              class="iconoir-lock"
                             />
-                          </li>
-                          
-                        </ul>
-                        <!--v-if-->
-                        <!--v-if-->
-                      </div>
-                    </div>
+                          </div>
+                          <!--v-if-->
+                        </a>
+                        <teleport-stub
+                          to="body"
+                        >
+                          <!--v-if-->
+                        </teleport-stub>
+                      </li>
+                      
+                    </ul>
                     
                   </div>
                   <!--v-if-->
@@ -3341,162 +2113,1445 @@ exports[`Preview exportTableModal > Modal with view 1`] = `
               </div>
               
             </div>
+            <!--v-if-->
           </div>
         </div>
-        <div
-          class="row"
-        >
+        <div>
           <div
-            class="col col-6"
+            class="row"
           >
             <div
-              class="control"
-              data-form-error="false"
+              class="col col-4"
             >
-              
-              <label
-                class="control__label control__label--small"
-                for="v-0-0-4"
-              >
-                <span>
-                  tableCSVExporter.includeHeader
-                </span>
-                <!--v-if-->
-                <!--v-if-->
-                <!--v-if-->
-              </label>
               <div
-                class="control__wrapper"
+                class="control margin-bottom-2"
+                data-form-error="false"
               >
+                
+                <label
+                  class="control__label control__label--small"
+                  for="v-0-0-8"
+                >
+                  <span>
+                    tableCSVExporter.columnSeparatorLabel
+                  </span>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </label>
                 <div
-                  class="control__elements"
+                  class="control__wrapper"
                 >
                   <div
-                    class="control__elements-wrapper"
+                    class="control__elements"
                   >
+                    <div
+                      class="control__elements-wrapper"
+                    >
+                      
+                      <div
+                        class="dropdown"
+                        id="v-0-0-8"
+                        role="list"
+                        tabindex="0"
+                      >
+                        <a
+                          class="dropdown__selected"
+                        >
+                          
+                          
+                          <!--v-if-->
+                          <!--v-if-->
+                          <span
+                            class="dropdown__selected-text"
+                            title=","
+                          >
+                            ,
+                          </span>
+                          
+                          
+                          <i
+                            class="dropdown__toggle-icon iconoir-nav-arrow-down"
+                          />
+                        </a>
+                        <div
+                          class="dropdown__items hidden"
+                        >
+                          <div
+                            class="select__search"
+                          >
+                            <i
+                              class="select__search-icon iconoir-search"
+                            />
+                            <input
+                              class="select__search-input"
+                              placeholder="action.search"
+                              tabindex="0"
+                              type="text"
+                            />
+                          </div>
+                          <ul
+                            class="select__items"
+                            tabindex="-1"
+                          >
+                            
+                            <li
+                              class="select__item select__item--no-options visible active"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title=","
+                                  >
+                                    ,
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title=";"
+                                  >
+                                    ;
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="|"
+                                  >
+                                    |
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="<tab>"
+                                  >
+                                    &lt;tab&gt;
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="tableCSVExporter.recordSeparator (30)"
+                                  >
+                                    tableCSVExporter.recordSeparator (30)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="tableCSVExporter.unitSeparator (31)"
+                                  >
+                                    tableCSVExporter.unitSeparator (31)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            
+                          </ul>
+                          <!--v-if-->
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      
+                    </div>
+                    <!--v-if-->
                     
-                    <label
-                      class="checkbox checkbox--checked"
+                    
+                  </div>
+                  <!--v-if-->
+                </div>
+                
+              </div>
+            </div>
+            <div
+              class="col col-8"
+            >
+              <div
+                class="control margin-bottom-2"
+                data-form-error="false"
+              >
+                
+                <label
+                  class="control__label control__label--small"
+                  for="v-0-0-9"
+                >
+                  <span>
+                    tableCSVExporter.encodingLabel
+                  </span>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </label>
+                <div
+                  class="control__wrapper"
+                >
+                  <div
+                    class="control__elements"
+                  >
+                    <div
+                      class="control__elements-wrapper"
                     >
-                      <input
-                        checked=""
-                        class="checkbox__native"
-                        id="checkboxv-0-0-5"
-                        type="checkbox"
-                      />
+                      
                       <div
-                        class="checkbox__button"
+                        class="dropdown"
+                        id="v-0-0-9"
+                        role="list"
+                        tabindex="0"
+                      >
+                        <a
+                          class="dropdown__selected"
+                        >
+                          
+                          
+                          <!--v-if-->
+                          <!--v-if-->
+                          <span
+                            class="dropdown__selected-text"
+                            title="Unicode (UTF-8)"
+                          >
+                            Unicode (UTF-8)
+                          </span>
+                          
+                          
+                          <i
+                            class="dropdown__toggle-icon iconoir-nav-arrow-down"
+                          />
+                        </a>
+                        <div
+                          class="dropdown__items hidden"
+                        >
+                          <div
+                            class="select__search"
+                          >
+                            <i
+                              class="select__search-icon iconoir-search"
+                            />
+                            <input
+                              class="select__search-input"
+                              placeholder="action.search"
+                              tabindex="0"
+                              type="text"
+                            />
+                          </div>
+                          <ul
+                            class="select__items"
+                            tabindex="-1"
+                          >
+                            
+                            <li
+                              class="select__item select__item--no-options visible active"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Unicode (UTF-8)"
+                                  >
+                                    Unicode (UTF-8)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Arabic (ISO-8859-6)"
+                                  >
+                                    Arabic (ISO-8859-6)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Arabic (Windows-1256)"
+                                  >
+                                    Arabic (Windows-1256)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Baltic (ISO-8859-4)"
+                                  >
+                                    Baltic (ISO-8859-4)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Baltic (windows-1257)"
+                                  >
+                                    Baltic (windows-1257)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Celtic (ISO-8859-14)"
+                                  >
+                                    Celtic (ISO-8859-14)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Central European (ISO-8859-2)"
+                                  >
+                                    Central European (ISO-8859-2)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Central European (Windows-1250)"
+                                  >
+                                    Central European (Windows-1250)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Chinese, Simplified (GBK)"
+                                  >
+                                    Chinese, Simplified (GBK)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Chinese (GB18030)"
+                                  >
+                                    Chinese (GB18030)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Chinese Traditional (Big5)"
+                                  >
+                                    Chinese Traditional (Big5)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (KOI8-R)"
+                                  >
+                                    Cyrillic (KOI8-R)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (KOI8-U)"
+                                  >
+                                    Cyrillic (KOI8-U)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (ISO-8859-5)"
+                                  >
+                                    Cyrillic (ISO-8859-5)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic (Windows-1251)"
+                                  >
+                                    Cyrillic (Windows-1251)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Cyrillic Mac OS (x-mac-cyrillic)"
+                                  >
+                                    Cyrillic Mac OS (x-mac-cyrillic)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Greek (ISO-8859-7)"
+                                  >
+                                    Greek (ISO-8859-7)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Greek (Windows-1253)"
+                                  >
+                                    Greek (Windows-1253)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Hebrew (ISO-8859-8)"
+                                  >
+                                    Hebrew (ISO-8859-8)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Hebrew (Windows-1255)"
+                                  >
+                                    Hebrew (Windows-1255)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Japanese (EUC-JP)"
+                                  >
+                                    Japanese (EUC-JP)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Japanese (ISO-2022-JP)"
+                                  >
+                                    Japanese (ISO-2022-JP)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Japanese (Shift-JIS)"
+                                  >
+                                    Japanese (Shift-JIS)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Korean (EUC-KR)"
+                                  >
+                                    Korean (EUC-KR)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Macintosh"
+                                  >
+                                    Macintosh
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Nordic (ISO-8859-10)"
+                                  >
+                                    Nordic (ISO-8859-10)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="South-Eastern European (ISO-8859-16)"
+                                  >
+                                    South-Eastern European (ISO-8859-16)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Thai (Windows-874)"
+                                  >
+                                    Thai (Windows-874)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Turkish (Windows-1254)"
+                                  >
+                                    Turkish (Windows-1254)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Vietnamese (Windows-1258)"
+                                  >
+                                    Vietnamese (Windows-1258)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Western European (ISO-8859-1)"
+                                  >
+                                    Western European (ISO-8859-1)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Western European (Windows-1252)"
+                                  >
+                                    Western European (Windows-1252)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            <li
+                              class="select__item select__item--no-options visible"
+                              role="listitem"
+                            >
+                              <a
+                                class="select__item-link"
+                              >
+                                <div
+                                  class="select__item-name"
+                                >
+                                  <!--v-if-->
+                                  
+                                  <!--v-if-->
+                                  <!--v-if-->
+                                  <span
+                                    class="select__item-name-text"
+                                    title="Latin 3 (ISO-8859-3)"
+                                  >
+                                    Latin 3 (ISO-8859-3)
+                                  </span>
+                                  
+                                </div>
+                                <!--v-if-->
+                              </a>
+                              <i
+                                class="select__item-active-icon iconoir-check"
+                              />
+                            </li>
+                            
+                          </ul>
+                          <!--v-if-->
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      
+                    </div>
+                    <!--v-if-->
+                    
+                    
+                  </div>
+                  <!--v-if-->
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          <div
+            class="row"
+          >
+            <div
+              class="col col-6"
+            >
+              <div
+                class="control"
+                data-form-error="false"
+              >
+                
+                <label
+                  class="control__label control__label--small"
+                  for="v-0-0-10"
+                >
+                  <span>
+                    tableCSVExporter.includeHeader
+                  </span>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </label>
+                <div
+                  class="control__wrapper"
+                >
+                  <div
+                    class="control__elements"
+                  >
+                    <div
+                      class="control__elements-wrapper"
+                    >
+                      
+                      <label
+                        class="checkbox checkbox--checked"
                       >
-                        <svg
-                          class="checkbox__tick"
-                          fill="none"
-                          height="8"
-                          viewBox="0 0 9 8"
-                          width="9"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <input
+                          checked=""
+                          class="checkbox__native"
+                          id="checkboxv-0-0-11"
+                          type="checkbox"
+                        />
+                        <div
+                          class="checkbox__button"
                         >
-                          <g
-                            clip-path="url(#clipv-0-0-5)"
+                          <svg
+                            class="checkbox__tick"
+                            fill="none"
+                            height="8"
+                            viewBox="0 0 9 8"
+                            width="9"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              clip-path="url(#clipv-0-0-11)"
+                            >
+                              <path
+                                d="M1.5179 4.4821L3.18211 6.18211L7.42475 2.15368"
+                                stroke="white"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                              />
+                            </g>
+                            <defs>
+                              <clippath
+                                id="clipv-0-0-11"
+                              >
+                                <rect
+                                  fill="white"
+                                  height="8"
+                                  transform="translate(0.5)"
+                                  width="8"
+                                />
+                              </clippath>
+                            </defs>
+                          </svg>
+                          <svg
+                            class="checkbox__tick-indeterminate"
+                            fill="none"
+                            height="8"
+                            style="display: none;"
+                            viewBox="0 0 8 8"
+                            width="8"
+                            xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M1.5179 4.4821L3.18211 6.18211L7.42475 2.15368"
+                              d="M1.5 4L6.5 4"
                               stroke="white"
                               stroke-linecap="round"
                               stroke-linejoin="round"
                               stroke-width="2"
                             />
-                          </g>
-                          <defs>
-                            <clippath
-                              id="clipv-0-0-5"
-                            >
-                              <rect
-                                fill="white"
-                                height="8"
-                                transform="translate(0.5)"
-                                width="8"
-                              />
-                            </clippath>
-                          </defs>
-                        </svg>
-                        <svg
-                          class="checkbox__tick-indeterminate"
-                          fill="none"
-                          height="8"
-                          style="display: none;"
-                          viewBox="0 0 8 8"
-                          width="8"
-                          xmlns="http://www.w3.org/2000/svg"
+                          </svg>
+                        </div>
+                        <span
+                          class="checkbox__label"
                         >
-                          <path
-                            d="M1.5 4L6.5 4"
-                            stroke="white"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </div>
-                      <span
-                        class="checkbox__label"
-                      >
-                        
-                        common.yes
-                        
-                      </span>
-                    </label>
+                          
+                          common.yes
+                          
+                        </span>
+                      </label>
+                      
+                    </div>
+                    <!--v-if-->
+                    
                     
                   </div>
                   <!--v-if-->
-                  
-                  
                 </div>
-                <!--v-if-->
+                
               </div>
-              
             </div>
           </div>
         </div>
-      </div>
-      
-      <div
-        class="modal-progress__actions"
-      >
-        <!--v-if-->
-        <button
-          class="button button--large button--full-width modal-progress__export-button"
-          disabled=""
+        
+        <div
+          class="modal-progress__actions"
         >
           <!--v-if-->
-          <span
-            class="button__label"
+          <button
+            class="button button--large button--full-width modal-progress__export-button"
+            disabled=""
           >
-            
-            exportTableLoadingBar.export
-            
-          </span>
-          <!--v-if-->
-        </button>
-      </div>
+            <!--v-if-->
+            <span
+              class="button__label"
+            >
+              
+              exportTableLoadingBar.export
+              
+            </span>
+            <!--v-if-->
+          </button>
+        </div>
+        
+      </form>
+      
       
-    </form>
-    
-    
-    
-    <div
-      class="modal__actions"
-    >
-      <a
-        class="modal__close"
-      >
-        <i
-          class="iconoir-cancel"
-        />
-      </a>
       
+      <div
+        class="modal__actions"
+      >
+        <a
+          class="modal__close"
+        >
+          <i
+            class="iconoir-cancel"
+          />
+        </a>
+        
+        
+      </div>
       
     </div>
-    
   </div>
-</div>
+</teleport-stub>
 `;
diff --git a/web-frontend/test/unit/database/components/view/__snapshots__/viewDecoratorContext.spec.js.snap b/web-frontend/test/unit/database/components/view/__snapshots__/viewDecoratorContext.spec.js.snap
index f6fcb70ae6..6c9f665608 100644
--- a/web-frontend/test/unit/database/components/view/__snapshots__/viewDecoratorContext.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/__snapshots__/viewDecoratorContext.spec.js.snap
@@ -1,130 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`GridViewRows component with decoration > Default component 1`] = `
-<div
-  class="context"
-  style="top: auto; right: auto; bottom: auto; left: auto;"
+<teleport-stub
+  to="body"
 >
-  
-  <div
-    class="decorator-list"
-  >
-    
-    <div
-      class="decorator-list__item"
-    >
-      <div
-        class="decorator-item"
-      >
-        <img
-          class="decorator-item__image"
-          src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='43.16'%20height='43'%20viewBox='0%200%2043.16%2043'%3e%3cg%20id='Group_987'%20data-name='Group%20987'%20transform='translate(-1019.5%20-766)'%3e%3cline%20id='Line_682'%20data-name='Line%20682'%20x2='43.16'%20transform='translate(1019.5%20787.5)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3cpath%20id='Path_791'%20data-name='Path%20791'%20d='M4.189,0H3.24V-6.105q0-.762.047-1.441-.123.123-.275.258T1.617-6.146L1.1-6.814,3.369-8.566h.82Z'%20transform='translate(1026%20779)'%20fill='%239fa4ab'/%3e%3cpath%20id='Path_792'%20data-name='Path%20792'%20d='M6.217,0H.586V-.838L2.842-3.105A16.612,16.612,0,0,0,4.2-4.594a3.8,3.8,0,0,0,.492-.867,2.484,2.484,0,0,0,.164-.908,1.44,1.44,0,0,0-.416-1.087,1.593,1.593,0,0,0-1.154-.4,2.9,2.9,0,0,0-1.011.176,4.029,4.029,0,0,0-1.063.639L.7-7.705a3.949,3.949,0,0,1,2.578-.984,2.724,2.724,0,0,1,1.893.618A2.126,2.126,0,0,1,5.854-6.41,3.208,3.208,0,0,1,5.4-4.8,10.23,10.23,0,0,1,3.686-2.783L1.811-.949V-.9H6.217Z'%20transform='translate(1026%20806)'%20fill='%239fa4ab'/%3e%3crect%20id='Rectangle_1581'%20data-name='Rectangle%201581'%20width='6'%20height='16'%20rx='3'%20transform='translate(1043%20793)'%20fill='%23b4bac2'/%3e%3crect%20id='Rectangle_1582'%20data-name='Rectangle%201582'%20width='6'%20height='16'%20rx='3'%20transform='translate(1043%20766)'%20fill='%23d9dbde'/%3e%3c/g%3e%3c/svg%3e"
-        />
-        <div
-          class="decorator-item__content"
-        >
-          <div
-            class="decorator-item__title"
-          >
-            viewDecoratorType.leftBorderColor 
-            <div
-              class="deactivated-label"
-            >
-              <i
-                class="iconoir-lock"
-              />
-            </div>
-          </div>
-          <div
-            class="decorator-item__description"
-          >
-            viewDecoratorType.leftBorderColorDescription
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="decorator-list__item"
-    >
-      <div
-        class="decorator-item"
-      >
-        <img
-          class="decorator-item__image"
-          src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='41'%20viewBox='0%200%2044%2041'%3e%3cg%20id='Group_988'%20data-name='Group%20988'%20transform='translate(-1463%20-854.25)'%3e%3cline%20id='Line_682'%20data-name='Line%20682'%20x2='44'%20transform='translate(1463%20874.75)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3cline%20id='Line_684'%20data-name='Line%20684'%20x2='44'%20transform='translate(1463%20894.75)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3cpath%20id='Path_793'%20data-name='Path%20793'%20d='M4.189,0H3.24V-6.105q0-.762.047-1.441-.123.123-.275.258T1.617-6.146L1.1-6.814,3.369-8.566h.82Z'%20transform='translate(1469.84%20870.25)'%20fill='%239fa4ab'/%3e%3crect%20id='Rectangle_1584'%20data-name='Rectangle%201584'%20width='44'%20height='20'%20transform='translate(1463%20875)'%20fill='rgba(217,219,222,0.38)'/%3e%3cpath%20id='Path_794'%20data-name='Path%20794'%20d='M6.217,0H.586V-.838L2.842-3.105A16.612,16.612,0,0,0,4.2-4.594a3.8,3.8,0,0,0,.492-.867,2.484,2.484,0,0,0,.164-.908,1.44,1.44,0,0,0-.416-1.087,1.593,1.593,0,0,0-1.154-.4,2.9,2.9,0,0,0-1.011.176,4.029,4.029,0,0,0-1.063.639L.7-7.705a3.949,3.949,0,0,1,2.578-.984,2.724,2.724,0,0,1,1.893.618A2.126,2.126,0,0,1,5.854-6.41,3.208,3.208,0,0,1,5.4-4.8,10.23,10.23,0,0,1,3.686-2.783L1.811-.949V-.9H6.217Z'%20transform='translate(1469.84%20889.25)'%20fill='%239fa4ab'/%3e%3cline%20id='Line_685'%20data-name='Line%20685'%20x2='44'%20transform='translate(1463%20854.75)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3c/g%3e%3c/svg%3e"
-        />
-        <div
-          class="decorator-item__content"
-        >
-          <div
-            class="decorator-item__title"
-          >
-            viewDecoratorType.backgroundColor 
-            <div
-              class="deactivated-label"
-            >
-              <i
-                class="iconoir-lock"
-              />
-            </div>
-          </div>
-          <div
-            class="decorator-item__description"
-          >
-            viewDecoratorType.backgroundColorDescription
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="decorator-list__item"
-    >
-      <div
-        class="decorator-item"
-      >
-        <img
-          class="decorator-item__image"
-          src="fake/url.png"
-        />
-        <div
-          class="decorator-item__content"
-        >
-          <div
-            class="decorator-item__title"
-          >
-            Fake decorator 
-            <!--v-if-->
-          </div>
-          <div
-            class="decorator-item__description"
-          >
-            Fake decorator description
-          </div>
-        </div>
-      </div>
-      <!--v-if-->
-    </div>
-    
-  </div>
-  
-</div>
-`;
-
-exports[`GridViewRows component with decoration > Should show cant add decorator tooltip 1`] = `
-<body>
-  <div
-    class="tooltip tooltip--body tooltip--center"
-    style="top: 4px; left: 0px;"
-  >
-    <div
-      class="tooltip__content"
-    >
-      viewDecoratorType.onlyForPremium
-    </div>
-  </div>
   <div
     class="context"
-    style="top: auto; right: auto; bottom: auto; left: auto;"
   >
     
     <div
@@ -163,6 +44,11 @@ exports[`GridViewRows component with decoration > Should show cant add decorator
             </div>
           </div>
         </div>
+        <teleport-stub
+          to="body"
+        >
+          <!--v-if-->
+        </teleport-stub>
       </div>
       <div
         class="decorator-list__item"
@@ -196,9 +82,14 @@ exports[`GridViewRows component with decoration > Should show cant add decorator
             </div>
           </div>
         </div>
+        <teleport-stub
+          to="body"
+        >
+          <!--v-if-->
+        </teleport-stub>
       </div>
       <div
-        class="decorator-list__item decorator-list__item--disabled"
+        class="decorator-list__item"
       >
         <div
           class="decorator-item"
@@ -229,8 +120,21 @@ exports[`GridViewRows component with decoration > Should show cant add decorator
     </div>
     
   </div>
-  <!--v-if-->
-  <!--v-if-->
+</teleport-stub>
+`;
+
+exports[`GridViewRows component with decoration > Should show cant add decorator tooltip 1`] = `
+<body>
+  <div
+    class="tooltip tooltip--body tooltip--center"
+    style="top: 4px; left: 0px;"
+  >
+    <div
+      class="tooltip__content"
+    >
+      viewDecoratorType.onlyForPremium
+    </div>
+  </div>
   <div
     data-v-app=""
     id="__nuxt"
@@ -252,323 +156,229 @@ exports[`GridViewRows component with decoration > Should show unavailable decora
       viewDecoratorType.onlyForPremium
     </div>
   </div>
+  <div
+    data-v-app=""
+    id="__nuxt"
+  >
+    <!---->
+  </div>
+</body>
+`;
+
+exports[`GridViewRows component with decoration > View with decoration configured 1`] = `
+<teleport-stub
+  to="body"
+>
   <div
     class="context"
-    style="top: auto; right: auto; bottom: auto; left: auto;"
   >
     
     <div
-      class="decorator-list"
+      class="decorator-context"
     >
-      
       <div
-        class="decorator-list__item"
+        class="decorator-context__list"
       >
+        
         <div
-          class="decorator-item"
+          class="decorator-context__decorator"
         >
-          <img
-            class="decorator-item__image"
-            src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='43.16'%20height='43'%20viewBox='0%200%2043.16%2043'%3e%3cg%20id='Group_987'%20data-name='Group%20987'%20transform='translate(-1019.5%20-766)'%3e%3cline%20id='Line_682'%20data-name='Line%20682'%20x2='43.16'%20transform='translate(1019.5%20787.5)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3cpath%20id='Path_791'%20data-name='Path%20791'%20d='M4.189,0H3.24V-6.105q0-.762.047-1.441-.123.123-.275.258T1.617-6.146L1.1-6.814,3.369-8.566h.82Z'%20transform='translate(1026%20779)'%20fill='%239fa4ab'/%3e%3cpath%20id='Path_792'%20data-name='Path%20792'%20d='M6.217,0H.586V-.838L2.842-3.105A16.612,16.612,0,0,0,4.2-4.594a3.8,3.8,0,0,0,.492-.867,2.484,2.484,0,0,0,.164-.908,1.44,1.44,0,0,0-.416-1.087,1.593,1.593,0,0,0-1.154-.4,2.9,2.9,0,0,0-1.011.176,4.029,4.029,0,0,0-1.063.639L.7-7.705a3.949,3.949,0,0,1,2.578-.984,2.724,2.724,0,0,1,1.893.618A2.126,2.126,0,0,1,5.854-6.41,3.208,3.208,0,0,1,5.4-4.8,10.23,10.23,0,0,1,3.686-2.783L1.811-.949V-.9H6.217Z'%20transform='translate(1026%20806)'%20fill='%239fa4ab'/%3e%3crect%20id='Rectangle_1581'%20data-name='Rectangle%201581'%20width='6'%20height='16'%20rx='3'%20transform='translate(1043%20793)'%20fill='%23b4bac2'/%3e%3crect%20id='Rectangle_1582'%20data-name='Rectangle%201582'%20width='6'%20height='16'%20rx='3'%20transform='translate(1043%20766)'%20fill='%23d9dbde'/%3e%3c/g%3e%3c/svg%3e"
-          />
           <div
-            class="decorator-item__content"
+            class="decorator-context__decorator-header"
           >
             <div
-              class="decorator-item__title"
+              class="decorator-context__decorator-header-info"
             >
-              viewDecoratorType.leftBorderColor 
               <div
-                class="deactivated-label"
+                class="decorator-item"
               >
-                <i
-                  class="iconoir-lock"
+                <img
+                  class="decorator-item__image"
+                  src="fake/url.png"
                 />
+                <div
+                  class="decorator-item__content"
+                >
+                  <div
+                    class="decorator-item__title"
+                  >
+                    Fake decorator 
+                    <!--v-if-->
+                  </div>
+                  <div
+                    class="decorator-item__description"
+                  >
+                    Fake decorator description
+                  </div>
+                </div>
               </div>
             </div>
             <div
-              class="decorator-item__description"
-            >
-              viewDecoratorType.leftBorderColorDescription
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="decorator-list__item"
-      >
-        <div
-          class="decorator-item"
-        >
-          <img
-            class="decorator-item__image"
-            src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='41'%20viewBox='0%200%2044%2041'%3e%3cg%20id='Group_988'%20data-name='Group%20988'%20transform='translate(-1463%20-854.25)'%3e%3cline%20id='Line_682'%20data-name='Line%20682'%20x2='44'%20transform='translate(1463%20874.75)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3cline%20id='Line_684'%20data-name='Line%20684'%20x2='44'%20transform='translate(1463%20894.75)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3cpath%20id='Path_793'%20data-name='Path%20793'%20d='M4.189,0H3.24V-6.105q0-.762.047-1.441-.123.123-.275.258T1.617-6.146L1.1-6.814,3.369-8.566h.82Z'%20transform='translate(1469.84%20870.25)'%20fill='%239fa4ab'/%3e%3crect%20id='Rectangle_1584'%20data-name='Rectangle%201584'%20width='44'%20height='20'%20transform='translate(1463%20875)'%20fill='rgba(217,219,222,0.38)'/%3e%3cpath%20id='Path_794'%20data-name='Path%20794'%20d='M6.217,0H.586V-.838L2.842-3.105A16.612,16.612,0,0,0,4.2-4.594a3.8,3.8,0,0,0,.492-.867,2.484,2.484,0,0,0,.164-.908,1.44,1.44,0,0,0-.416-1.087,1.593,1.593,0,0,0-1.154-.4,2.9,2.9,0,0,0-1.011.176,4.029,4.029,0,0,0-1.063.639L.7-7.705a3.949,3.949,0,0,1,2.578-.984,2.724,2.724,0,0,1,1.893.618A2.126,2.126,0,0,1,5.854-6.41,3.208,3.208,0,0,1,5.4-4.8,10.23,10.23,0,0,1,3.686-2.783L1.811-.949V-.9H6.217Z'%20transform='translate(1469.84%20889.25)'%20fill='%239fa4ab'/%3e%3cline%20id='Line_685'%20data-name='Line%20685'%20x2='44'%20transform='translate(1463%20854.75)'%20fill='none'%20stroke='%23d9dbde'%20stroke-width='1'/%3e%3c/g%3e%3c/svg%3e"
-          />
-          <div
-            class="decorator-item__content"
-          >
-            <div
-              class="decorator-item__title"
+              class="decorator-context__decorator-header-select"
             >
-              viewDecoratorType.backgroundColor 
               <div
-                class="deactivated-label"
+                class="dropdown"
               >
-                <i
-                  class="iconoir-lock"
-                />
+                <a
+                  class="dropdown__selected"
+                >
+                  <i
+                    class="dropdown__selected-icon iconoir-filter"
+                  />
+                  <span
+                    class="dropdown__selected-text"
+                  >
+                    Fake value provider
+                  </span>
+                  <i
+                    class="dropdown__toggle-icon iconoir-nav-arrow-down"
+                  />
+                </a>
+                <teleport-stub
+                  to="body"
+                >
+                  <div
+                    class="picker__context context visibility-hidden context--overflow-scroll"
+                  >
+                    <!--v-if-->
+                  </div>
+                </teleport-stub>
               </div>
             </div>
             <div
-              class="decorator-item__description"
-            >
-              viewDecoratorType.backgroundColorDescription
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="decorator-list__item"
-      >
-        <div
-          class="decorator-item"
-        >
-          <img
-            class="decorator-item__image"
-            src="fake/url.png"
-          />
-          <div
-            class="decorator-item__content"
-          >
-            <div
-              class="decorator-item__title"
+              class="decorator-context__decorator-header-trash"
             >
-              Fake decorator 
-              <div
-                class="deactivated-label"
+              <button
+                class="button-icon"
               >
                 <i
-                  class="iconoir-lock"
+                  class="button-icon__icon iconoir-bin"
                 />
-              </div>
-            </div>
-            <div
-              class="decorator-item__description"
-            >
-              Fake decorator description
+              </button>
             </div>
           </div>
+          <div>
+            fake_value_provider_form
+          </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
-      </div>
-      
-    </div>
-    
-  </div>
-  <!--v-if-->
-  <!--v-if-->
-  <div
-    data-v-app=""
-    id="__nuxt"
-  >
-    <!---->
-  </div>
-</body>
-`;
-
-exports[`GridViewRows component with decoration > View with decoration configured 1`] = `
-<div
-  class="context"
-  style="top: auto; right: auto; bottom: auto; left: auto;"
->
-  
-  <div
-    class="decorator-context"
-  >
-    <div
-      class="decorator-context__list"
-    >
-      
-      <div
-        class="decorator-context__decorator"
-      >
         <div
-          class="decorator-context__decorator-header"
+          class="decorator-context__decorator"
         >
           <div
-            class="decorator-context__decorator-header-info"
+            class="decorator-context__decorator-header"
           >
             <div
-              class="decorator-item"
+              class="decorator-context__decorator-header-info"
             >
-              <img
-                class="decorator-item__image"
-                src="fake/url.png"
-              />
               <div
-                class="decorator-item__content"
+                class="decorator-item"
               >
+                <img
+                  class="decorator-item__image"
+                  src="fake/url.png"
+                />
                 <div
-                  class="decorator-item__title"
-                >
-                  Fake decorator 
-                  <!--v-if-->
-                </div>
-                <div
-                  class="decorator-item__description"
+                  class="decorator-item__content"
                 >
-                  Fake decorator description
+                  <div
+                    class="decorator-item__title"
+                  >
+                    Fake decorator 
+                    <!--v-if-->
+                  </div>
+                  <div
+                    class="decorator-item__description"
+                  >
+                    Fake decorator description
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="decorator-context__decorator-header-select"
-          >
             <div
-              class="dropdown"
+              class="decorator-context__decorator-header-select"
+              style="display: none;"
             >
-              <a
-                class="dropdown__selected"
+              <!--v-if-->
+            </div>
+            <div
+              class="decorator-context__decorator-header-trash"
+            >
+              <button
+                class="button-icon"
               >
                 <i
-                  class="dropdown__selected-icon iconoir-filter"
+                  class="button-icon__icon iconoir-bin"
                 />
-                <span
-                  class="dropdown__selected-text"
-                >
-                  Fake value provider
-                </span>
-                <i
-                  class="dropdown__toggle-icon iconoir-nav-arrow-down"
-                />
-              </a>
+              </button>
             </div>
           </div>
           <div
-            class="decorator-context__decorator-header-trash"
-          >
-            <button
-              class="button-icon"
-            >
-              <i
-                class="button-icon__icon iconoir-bin"
-              />
-            </button>
-          </div>
-        </div>
-        <div>
-          fake_value_provider_form
-        </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="decorator-context__decorator"
-      >
-        <div
-          class="decorator-context__decorator-header"
-        >
-          <div
-            class="decorator-context__decorator-header-info"
+            class="value-provider-list value-provider-list--row"
           >
+            
             <div
-              class="decorator-item"
+              class="value-provider-list__item"
             >
-              <img
-                class="decorator-item__image"
-                src="fake/url.png"
-              />
               <div
-                class="decorator-item__content"
+                class="value-provider-item"
               >
                 <div
-                  class="decorator-item__title"
+                  class="value-provider-item__title"
                 >
-                  Fake decorator 
-                  <!--v-if-->
+                  <i
+                    class="iconoir-filter value-provider-item__icon"
+                  />
+                  <span
+                    class="value-provider-item__title-text"
+                  >
+                    Fake value provider
+                  </span>
                 </div>
                 <div
-                  class="decorator-item__description"
+                  class="value-provider-item__description"
                 >
-                  Fake decorator description
+                  Fake value provider description.
                 </div>
               </div>
+              <!--v-if-->
             </div>
+            
           </div>
-          <div
-            class="decorator-context__decorator-header-select"
-            style="display: none;"
-          >
-            <!--v-if-->
-          </div>
-          <div
-            class="decorator-context__decorator-header-trash"
-          >
-            <button
-              class="button-icon"
-            >
-              <i
-                class="button-icon__icon iconoir-bin"
-              />
-            </button>
-          </div>
+          <!--v-if-->
         </div>
-        <div
-          class="value-provider-list value-provider-list--row"
+        
+      </div>
+      <div
+        class="context__footer"
+      >
+        <button
+          class="button-text choose-select-field__link margin-right-auto"
+        >
+          <i
+            class="button-text__icon iconoir-plus"
+          />
+          <!--v-if-->
+          <span
+            class="button-text__label"
+          >
+            
+            viewDecoratorContext.addDecorator
+            
+          </span>
+        </button>
+        <teleport-stub
+          to="body"
         >
-          
           <div
-            class="value-provider-list__item"
+            class="context visibility-hidden context--overflow-scroll"
           >
-            <div
-              class="value-provider-item"
-            >
-              <div
-                class="value-provider-item__title"
-              >
-                <i
-                  class="iconoir-filter value-provider-item__icon"
-                />
-                <span
-                  class="value-provider-item__title-text"
-                >
-                  Fake value provider
-                </span>
-              </div>
-              <div
-                class="value-provider-item__description"
-              >
-                Fake value provider description.
-              </div>
-            </div>
             <!--v-if-->
           </div>
-          
-        </div>
-        <!--v-if-->
+        </teleport-stub>
       </div>
-      
-    </div>
-    <div
-      class="context__footer"
-    >
-      <button
-        class="button-text choose-select-field__link margin-right-auto"
-      >
-        <i
-          class="button-text__icon iconoir-plus"
-        />
-        <!--v-if-->
-        <span
-          class="button-text__label"
-        >
-          
-          viewDecoratorContext.addDecorator
-          
-        </span>
-      </button>
     </div>
+    
   </div>
-  
-</div>
+</teleport-stub>
 `;
diff --git a/web-frontend/test/unit/database/components/view/gallery/__snapshots__/galleryViewDecoration.spec.js.snap b/web-frontend/test/unit/database/components/view/gallery/__snapshots__/galleryViewDecoration.spec.js.snap
index ff5c5f78ef..00354d11b8 100644
--- a/web-frontend/test/unit/database/components/view/gallery/__snapshots__/galleryViewDecoration.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/gallery/__snapshots__/galleryViewDecoration.spec.js.snap
@@ -90,6 +90,16 @@ exports[`GalleryView component with decoration > Default component with first_ce
       
     </div>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
 </div>
 `;
 
@@ -185,6 +195,16 @@ exports[`GalleryView component with decoration > Default component with row wrap
       
     </div>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
 </div>
 `;
 
@@ -272,5 +292,15 @@ exports[`GalleryView component with decoration > Default component with unavaila
       
     </div>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
 </div>
 `;
diff --git a/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewDecoration.spec.js.snap b/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewDecoration.spec.js.snap
index b1f43434ea..e36e6a149a 100644
--- a/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewDecoration.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewDecoration.spec.js.snap
@@ -38,6 +38,15 @@ exports[`GridView component with decoration > Default component with first_cell
             <i
               class="grid-view__head-row-identifier-dropdown iconoir-numbered-list-left"
             />
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         
@@ -150,6 +159,15 @@ exports[`GridView component with decoration > Default component with first_cell
       </div>
     </div>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden context--overflow-scroll"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
   <div
     class="grid-view__divider"
     style="left: 72px;"
@@ -214,6 +232,15 @@ exports[`GridView component with decoration > Default component with first_cell
                 />
               </a>
             </span>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
             <div
               class="grid-view__description-width"
             />
@@ -259,6 +286,15 @@ exports[`GridView component with decoration > Default component with first_cell
                 />
               </a>
             </span>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
             <div
               class="grid-view__description-width"
             />
@@ -277,6 +313,15 @@ exports[`GridView component with decoration > Default component with first_cell
               class="grid-view__add-column-icon iconoir-plus"
             />
           </a>
+          <teleport-stub
+            to="body"
+          >
+            <div
+              class="field-context context visibility-hidden"
+            >
+              <!--v-if-->
+            </div>
+          </teleport-stub>
         </div>
       </div>
       <div
@@ -394,6 +439,15 @@ exports[`GridView component with decoration > Default component with first_cell
               />
                common.summarize
             </div>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         <div
@@ -410,6 +464,15 @@ exports[`GridView component with decoration > Default component with first_cell
               />
                common.summarize
             </div>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         
@@ -442,6 +505,20 @@ exports[`GridView component with decoration > Default component with first_cell
       style="width: 472px; top: 0px;"
     />
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden context--overflow-scroll"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
 </div>
 `;
 
@@ -483,6 +560,15 @@ exports[`GridView component with decoration > Default component with row wrapper
             <i
               class="grid-view__head-row-identifier-dropdown iconoir-numbered-list-left"
             />
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         
@@ -597,6 +683,15 @@ exports[`GridView component with decoration > Default component with row wrapper
       </div>
     </div>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden context--overflow-scroll"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
   <div
     class="grid-view__divider"
     style="left: 72px;"
@@ -661,6 +756,15 @@ exports[`GridView component with decoration > Default component with row wrapper
                 />
               </a>
             </span>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
             <div
               class="grid-view__description-width"
             />
@@ -706,6 +810,15 @@ exports[`GridView component with decoration > Default component with row wrapper
                 />
               </a>
             </span>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
             <div
               class="grid-view__description-width"
             />
@@ -724,6 +837,15 @@ exports[`GridView component with decoration > Default component with row wrapper
               class="grid-view__add-column-icon iconoir-plus"
             />
           </a>
+          <teleport-stub
+            to="body"
+          >
+            <div
+              class="field-context context visibility-hidden"
+            >
+              <!--v-if-->
+            </div>
+          </teleport-stub>
         </div>
       </div>
       <div
@@ -849,6 +971,15 @@ exports[`GridView component with decoration > Default component with row wrapper
               />
                common.summarize
             </div>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         <div
@@ -865,6 +996,15 @@ exports[`GridView component with decoration > Default component with row wrapper
               />
                common.summarize
             </div>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         
@@ -897,6 +1037,20 @@ exports[`GridView component with decoration > Default component with row wrapper
       style="width: 472px; top: 0px;"
     />
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden context--overflow-scroll"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
 </div>
 `;
 
@@ -938,6 +1092,15 @@ exports[`GridView component with decoration > Default component with unavailable
             <i
               class="grid-view__head-row-identifier-dropdown iconoir-numbered-list-left"
             />
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         
@@ -1044,6 +1207,15 @@ exports[`GridView component with decoration > Default component with unavailable
       </div>
     </div>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden context--overflow-scroll"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
   <div
     class="grid-view__divider"
     style="left: 72px;"
@@ -1108,6 +1280,15 @@ exports[`GridView component with decoration > Default component with unavailable
                 />
               </a>
             </span>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
             <div
               class="grid-view__description-width"
             />
@@ -1153,6 +1334,15 @@ exports[`GridView component with decoration > Default component with unavailable
                 />
               </a>
             </span>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden context--overflow-scroll"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
             <div
               class="grid-view__description-width"
             />
@@ -1171,6 +1361,15 @@ exports[`GridView component with decoration > Default component with unavailable
               class="grid-view__add-column-icon iconoir-plus"
             />
           </a>
+          <teleport-stub
+            to="body"
+          >
+            <div
+              class="field-context context visibility-hidden"
+            >
+              <!--v-if-->
+            </div>
+          </teleport-stub>
         </div>
       </div>
       <div
@@ -1288,6 +1487,15 @@ exports[`GridView component with decoration > Default component with unavailable
               />
                common.summarize
             </div>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         <div
@@ -1304,6 +1512,15 @@ exports[`GridView component with decoration > Default component with unavailable
               />
                common.summarize
             </div>
+            <teleport-stub
+              to="body"
+            >
+              <div
+                class="context visibility-hidden"
+              >
+                <!--v-if-->
+              </div>
+            </teleport-stub>
           </div>
         </div>
         
@@ -1336,5 +1553,19 @@ exports[`GridView component with decoration > Default component with unavailable
       style="width: 472px; top: 0px;"
     />
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden context--overflow-scroll"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
+  <teleport-stub
+    to="body"
+  >
+    <!--v-if-->
+  </teleport-stub>
 </div>
 `;
diff --git a/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap b/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap
index f764ec6b94..4f735a503f 100644
--- a/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap
@@ -1,147 +1,150 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Field footer component > Change type 1`] = `
-<div
-  class="context"
-  style="top: 10px; right: auto; bottom: auto; left: 0px;"
+<teleport-stub
+  to="body"
 >
-  
-  <ul
-    class="select__items"
+  <div
+    class="context"
   >
-    <li
-      class="select__item select__item--no-options"
+    
+    <ul
+      class="select__items"
     >
-      <a
-        class="select__item-link"
+      <li
+        class="select__item select__item--no-options"
       >
-        <div
-          class="select__item-name"
+        <a
+          class="select__item-link"
         >
-          <span
-            class="select__item-name-text"
+          <div
+            class="select__item-name"
           >
-            common.none
-          </span>
-        </div>
-      </a>
-      <!--v-if-->
-    </li>
-    
-    <li
-      class="select__item select__item--no-options"
-    >
-      <a
-        class="select__item-link"
+            <span
+              class="select__item-name-text"
+            >
+              common.none
+            </span>
+          </div>
+        </a>
+        <!--v-if-->
+      </li>
+      
+      <li
+        class="select__item select__item--no-options"
       >
-        <div
-          class="select__item-name"
+        <a
+          class="select__item-link"
         >
-          <span
-            class="select__item-name-text"
+          <div
+            class="select__item-name"
           >
-            viewAggregationType.emptyCount
-          </span>
-        </div>
-      </a>
-      <!--v-if-->
-    </li>
-    <li
-      class="select__item select__item--no-options active"
-    >
-      <a
-        class="select__item-link"
+            <span
+              class="select__item-name-text"
+            >
+              viewAggregationType.emptyCount
+            </span>
+          </div>
+        </a>
+        <!--v-if-->
+      </li>
+      <li
+        class="select__item select__item--no-options active"
       >
-        <div
-          class="select__item-name"
-        >
-          <span
-            class="select__item-name-text"
-          >
-            viewAggregationType.notEmptyCount
-          </span>
-        </div>
-      </a>
-      <i
-        class="select__item-active-icon iconoir-check"
-      />
-    </li>
-    <li
-      class="select__item select__item--no-options"
-    >
-      <a
-        class="select__item-link"
+        <a
+          class="select__item-link"
+        >
+          <div
+            class="select__item-name"
+          >
+            <span
+              class="select__item-name-text"
+            >
+              viewAggregationType.notEmptyCount
+            </span>
+          </div>
+        </a>
+        <i
+          class="select__item-active-icon iconoir-check"
+        />
+      </li>
+      <li
+        class="select__item select__item--no-options"
       >
-        <div
-          class="select__item-name"
+        <a
+          class="select__item-link"
         >
-          <span
-            class="select__item-name-text"
+          <div
+            class="select__item-name"
           >
-            viewAggregationType.emptyPercentage
-          </span>
-        </div>
-      </a>
-      <!--v-if-->
-    </li>
-    <li
-      class="select__item select__item--no-options"
-    >
-      <a
-        class="select__item-link"
+            <span
+              class="select__item-name-text"
+            >
+              viewAggregationType.emptyPercentage
+            </span>
+          </div>
+        </a>
+        <!--v-if-->
+      </li>
+      <li
+        class="select__item select__item--no-options"
       >
-        <div
-          class="select__item-name"
+        <a
+          class="select__item-link"
         >
-          <span
-            class="select__item-name-text"
+          <div
+            class="select__item-name"
           >
-            viewAggregationType.notEmptyPercentage
-          </span>
-        </div>
-      </a>
-      <!--v-if-->
-    </li>
-    <li
-      class="select__item select__item--no-options"
-    >
-      <a
-        class="select__item-link"
+            <span
+              class="select__item-name-text"
+            >
+              viewAggregationType.notEmptyPercentage
+            </span>
+          </div>
+        </a>
+        <!--v-if-->
+      </li>
+      <li
+        class="select__item select__item--no-options"
       >
-        <div
-          class="select__item-name"
+        <a
+          class="select__item-link"
         >
-          <span
-            class="select__item-name-text"
+          <div
+            class="select__item-name"
           >
-            viewAggregationType.uniqueCount
-          </span>
-        </div>
-      </a>
-      <!--v-if-->
-    </li>
-    <li
-      class="select__item select__item--no-options"
-    >
-      <a
-        class="select__item-link"
+            <span
+              class="select__item-name-text"
+            >
+              viewAggregationType.uniqueCount
+            </span>
+          </div>
+        </a>
+        <!--v-if-->
+      </li>
+      <li
+        class="select__item select__item--no-options"
       >
-        <div
-          class="select__item-name"
+        <a
+          class="select__item-link"
         >
-          <span
-            class="select__item-name-text"
+          <div
+            class="select__item-name"
           >
-            viewAggregationType.distribution
-          </span>
-        </div>
-      </a>
-      <!--v-if-->
-    </li>
+            <span
+              class="select__item-name-text"
+            >
+              viewAggregationType.distribution
+            </span>
+          </div>
+        </a>
+        <!--v-if-->
+      </li>
+      
+    </ul>
     
-  </ul>
-  
-</div>
+  </div>
+</teleport-stub>
 `;
 
 exports[`Field footer component > Change type 2`] = `
@@ -149,13 +152,158 @@ exports[`Field footer component > Change type 2`] = `
   class="grid-view-aggregation"
 >
   <div
-    class="grid-view-aggregation__empty"
+    class="grid-view-aggregation__empty grid-view-aggregation__empty--active"
   >
     <i
       class="grid-view-aggregation__empty-icon iconoir-plus"
     />
      common.summarize
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context"
+      style="top: 10px; right: auto; bottom: auto; left: 0px;"
+    >
+      
+      <ul
+        class="select__items"
+      >
+        <li
+          class="select__item select__item--no-options active"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                common.none
+              </span>
+            </div>
+          </a>
+          <i
+            class="select__item-active-icon iconoir-check"
+          />
+        </li>
+        
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.emptyCount
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.notEmptyCount
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.emptyPercentage
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.notEmptyPercentage
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.uniqueCount
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.distribution
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        
+      </ul>
+      
+    </div>
+  </teleport-stub>
 </div>
 `;
 
@@ -178,6 +326,151 @@ exports[`Field footer component > Change type 3`] = `
       10
     </span>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context"
+      style="top: 10px; right: auto; bottom: auto; left: 0px;"
+    >
+      
+      <ul
+        class="select__items"
+      >
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                common.none
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        
+        <li
+          class="select__item select__item--no-options active"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.emptyCount
+              </span>
+            </div>
+          </a>
+          <i
+            class="select__item-active-icon iconoir-check"
+          />
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.notEmptyCount
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.emptyPercentage
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.notEmptyPercentage
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.uniqueCount
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        <li
+          class="select__item select__item--no-options"
+        >
+          <a
+            class="select__item-link"
+          >
+            <div
+              class="select__item-name"
+            >
+              <span
+                class="select__item-name-text"
+              >
+                viewAggregationType.distribution
+              </span>
+            </div>
+          </a>
+          <!--v-if-->
+        </li>
+        
+      </ul>
+      
+    </div>
+  </teleport-stub>
 </div>
 `;
 
@@ -193,6 +486,15 @@ exports[`Field footer component > Default component 1`] = `
     />
      common.summarize
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
 </div>
 `;
 
@@ -213,6 +515,15 @@ exports[`Field footer component > Default component 2`] = `
       class="grid-view-aggregation__generic-value"
     />
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
 </div>
 `;
 
@@ -235,5 +546,14 @@ exports[`Field footer component > Default component 3`] = `
       75%
     </span>
   </div>
+  <teleport-stub
+    to="body"
+  >
+    <div
+      class="context visibility-hidden"
+    >
+      <!--v-if-->
+    </div>
+  </teleport-stub>
 </div>
 `;
diff --git a/web-frontend/vitest.setup.ts b/web-frontend/vitest.setup.ts
index 7390123ffb..1b06a9b5ef 100644
--- a/web-frontend/vitest.setup.ts
+++ b/web-frontend/vitest.setup.ts
@@ -1,4 +1,10 @@
 import { beforeEach, vi, expect } from 'vitest'
+import { config } from '@vue/test-utils'
+
+config.global.stubs = {
+  ...config.global.stubs,
+  Teleport: true,
+}
 
 const tMock = (key: string, data: any) =>
   data?.count !== undefined ? `${key} - ${data.count}` : key
diff --git a/web-frontend/yarn.lock b/web-frontend/yarn.lock
index 7e9619580a..36a9b2d2b6 100644
--- a/web-frontend/yarn.lock
+++ b/web-frontend/yarn.lock
@@ -12362,16 +12362,7 @@ string-argv@~0.3.1:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12412,14 +12403,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13749,16 +13733,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==