From ab77d480cbaafa1cfe4a5368107ac05ff7b9280e Mon Sep 17 00:00:00 2001
From: dimmur-brw <przemyslaw+gh@baserow.io>
Date: Fri, 23 Jan 2026 08:09:23 +0100
Subject: [PATCH] Fixes for grid and other views (#4575)

---
 .../pages/admin/authProviders.vue             |   4 +-
 .../baserow_enterprise/pages/auditLog.vue     |   3 +
 .../components/field/FieldAISubForm.vue       |   5 +
 .../components/row/RowEditFieldAI.vue         |   2 +-
 .../views/calendar/CalendarMonthDay.vue       |  11 +-
 .../calendar/CalendarMonthDayExpanded.vue     |   4 -
 .../views/calendar/CalendarViewHeader.vue     |   2 +-
 .../views/kanban/KanbanViewStack.vue          |  21 ++-
 .../views/timeline/TimelineContainer.vue      |  22 ++-
 .../views/timeline/TimelineGrid.vue           |  30 ++--
 .../baserow_premium/pages/admin/licenses.vue  |   4 +-
 .../scss/components/rich_text_editor.scss     |   3 +-
 .../core/components/editor/RichTextEditor.vue |  13 +-
 .../editor/RichTextEditorBubbleMenu.vue       |  20 +--
 .../editor/RichTextEditorFloatingMenu.vue     | 150 ++++++++++--------
 .../components/helpers/InfiniteScroll.vue     |   3 +-
 .../modules/core/editor/suggestion.js         |   4 +-
 web-frontend/modules/core/locales/en.json     |   6 +
 .../modules/core/pages/admin/dashboard.vue    |   5 +
 .../modules/core/pages/admin/health.vue       |   5 +-
 .../modules/core/pages/admin/settings.vue     |   6 +-
 .../modules/core/pages/admin/users.vue        |   5 +
 .../modules/core/pages/admin/workspaces.vue   |   6 +
 web-frontend/modules/core/pages/settings.vue  |  13 ++
 .../components/table/TableCSVImporter.vue     |   4 +-
 .../components/table/TableJSONImporter.vue    |   4 +-
 .../components/table/TablePasteImporter.vue   |   4 +-
 .../components/table/TableXMLImporter.vue     |   4 +-
 .../components/view/gallery/GalleryView.vue   |  19 ++-
 .../mixins/bufferedRowsDragAndDrop.js         |  17 +-
 web-frontend/modules/database/pages/table.vue |  19 ++-
 31 files changed, 273 insertions(+), 145 deletions(-)

diff --git a/enterprise/web-frontend/modules/baserow_enterprise/pages/admin/authProviders.vue b/enterprise/web-frontend/modules/baserow_enterprise/pages/admin/authProviders.vue
index 525932d8f3..df526a756e 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/pages/admin/authProviders.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/pages/admin/authProviders.vue
@@ -41,7 +41,7 @@
 <script setup>
 import { ref, computed, nextTick } from 'vue'
 import { useStore } from 'vuex'
-import { useNuxtApp, definePageMeta, useI18n } from '#imports'
+import { useNuxtApp, definePageMeta, useI18n, useHead } from '#imports'
 import CreateAuthProviderContext from '@baserow_enterprise/components/admin/contexts/CreateAuthProviderContext.vue'
 import CreateAuthProviderModal from '@baserow_enterprise/components/admin/modals/CreateAuthProviderModal.vue'
 
@@ -56,6 +56,8 @@ const store = useStore()
 const { $registry } = useNuxtApp()
 const { t: $t } = useI18n()
 
+useHead({ title: $t('authProviders.title') })
+
 // Template refs
 const createContextLink = ref(null)
 const createContext = ref(null)
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/pages/auditLog.vue b/enterprise/web-frontend/modules/baserow_enterprise/pages/auditLog.vue
index f1301d9224..66b659759c 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/pages/auditLog.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/pages/auditLog.vue
@@ -106,6 +106,7 @@ import {
   createError,
   definePageMeta,
   useI18n,
+  useHead,
 } from '#imports'
 import _ from 'lodash'
 import moment from '@baserow/modules/core/moment'
@@ -138,6 +139,8 @@ const router = useRouter()
 const { $client, $hasFeature, $hasPermission } = useNuxtApp()
 const { t: $t } = useI18n()
 
+useHead({ title: $t('auditLog.adminTitle') })
+
 // Helper function
 function initFilters(wsId = null) {
   const f = {}
diff --git a/premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue b/premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue
index a21f96162c..bb96b1e450 100644
--- a/premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue
@@ -98,6 +98,8 @@
 
     <component
       :is="outputType.getFormComponent()"
+      v-if="hasChildFormComponent"
+      :key="values.ai_output_type"
       ref="childForm"
       v-bind="$props"
     />
@@ -221,6 +223,9 @@ export default {
         this.defaultValues.ai_output_type !== this.values.ai_output_type
       )
     },
+    hasChildFormComponent() {
+      return this.outputType && this.outputType.getFormComponent() !== null
+    },
   },
   watch: {
     'values.ai_prompt.mode': {
diff --git a/premium/web-frontend/modules/baserow_premium/components/row/RowEditFieldAI.vue b/premium/web-frontend/modules/baserow_premium/components/row/RowEditFieldAI.vue
index 235314358d..57338630be 100644
--- a/premium/web-frontend/modules/baserow_premium/components/row/RowEditFieldAI.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/row/RowEditFieldAI.vue
@@ -3,7 +3,7 @@
     <component
       :is="outputRowEditFieldComponent"
       ref="field"
-      v-bind="$attrs"
+      v-bind="$props"
       :read-only="generating || readOnly"
     ></component>
     <div v-if="!readOnly" class="margin-top-2">
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDay.vue b/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDay.vue
index 7fe8e8cacd..92afb7fe6b 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDay.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDay.vue
@@ -51,6 +51,7 @@
     >
       {{
         $t('calendarMonthDay.hiddenRowsCount', {
+          count: hiddenRowsCount,
           hiddenRowsCount,
         })
       }}
@@ -151,16 +152,20 @@ export default {
   },
   mounted() {
     this.updateVisibleRowsCount()
-    window.addEventListener('resize', this.updateVisibleRowsCount)
+    this.$el.resizeListener = this.updateVisibleRowsCount.bind(this)
+    window.addEventListener('resize', this.$el.resizeListener)
   },
   beforeUnmount() {
-    window.removeEventListener('resize', this.updateVisibleRowsCount)
+    window.removeEventListener('resize', this.$el.resizeListener)
   },
   methods: {
     getClientHeight() {
-      return this.$refs.calendarMonthDay.clientHeight
+      return this.$refs.calendarMonthDay.clientHeight || 0
     },
     updateVisibleRowsCount() {
+      if (!this.$refs.calendarMonthDay) {
+        return
+      }
       const itemHeight = 28
       this.width = this.$refs.calendarMonthDay.clientWidth
       this.height = this.getClientHeight()
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDayExpanded.vue b/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDayExpanded.vue
index 1396262e58..fd4c090f88 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDayExpanded.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDayExpanded.vue
@@ -33,7 +33,6 @@
             :fields="fields"
             :store-prefix="storePrefix"
             :class="{ last: index == rows.length - 1 }"
-            :parent-width="contextWidth"
             :decorations-by-place="decorationsByPlace"
             @edit-row="$emit('edit-row', $event)"
             @row-context="$emit('row-context', $event)"
@@ -139,9 +138,6 @@ export default {
     maxContextHeight() {
       return this.parentHeight * 2 - 10
     },
-    contextWidth() {
-      return this.$refs.context.$el.clientWidth
-    },
     innerHeight() {
       return this.contextHeight - 48
     },
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarViewHeader.vue b/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarViewHeader.vue
index 75545189ec..41c1687d32 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarViewHeader.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarViewHeader.vue
@@ -181,7 +181,7 @@ export default {
   },
   methods: {
     showChooseDateFieldModal() {
-      if (this.canChooseDateField) {
+      if (this.canChooseDateField && this.$refs.selectDateFieldModal) {
         this.$refs.selectDateFieldModal.show()
       }
     },
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStack.vue b/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStack.vue
index f56cee4353..943110cc13 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStack.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStack.vue
@@ -5,7 +5,7 @@
       enabled: () => draggingRow !== null,
       speed: 3,
       padding: 24,
-      scrollElement: () => $refs.scroll.$el,
+      scrollElement: () => $refs.scroll?.$el,
     }"
     class="kanban-view__stack-wrapper"
     @mouseleave.stop="wrapperMouseLeave"
@@ -302,7 +302,9 @@ export default {
     },
   },
   mounted() {
-    this.updateBuffer()
+    this.$nextTick(() => {
+      this.updateBuffer()
+    })
 
     this.$el.resizeEvent = () => {
       this.updateBuffer()
@@ -312,11 +314,19 @@ export default {
     }
 
     window.addEventListener('resize', this.$el.resizeEvent)
-    this.$refs.scroll.$el.addEventListener('scroll', this.$el.scrollEvent)
+    this.$nextTick(() => {
+      const scrollEl = this.$refs.scroll?.$el
+      if (scrollEl) {
+        this.$el.scrollElement = scrollEl
+        scrollEl.addEventListener('scroll', this.$el.scrollEvent)
+      }
+    })
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.$el.resizeEvent)
-    this.$refs.scroll.$el.removeEventListener('scroll', this.$el.scrollEvent)
+    if (this.$el.scrollElement) {
+      this.$el.scrollElement.removeEventListener('scroll', this.$el.scrollEvent)
+    }
   },
   methods: {
     /**
@@ -514,9 +524,10 @@ export default {
     },
     updateBuffer() {
       const scroll = this.$refs.scroll
+      if (!scroll) return
       const cardHeight = this.cardHeight
       const containerHeight = scroll.clientHeight()
-      const scrollTop = scroll.$el.scrollTop
+      const scrollTop = scroll.$el?.scrollTop || 0
       const min = Math.ceil(containerHeight / cardHeight) + 2
       const rows = this.stack.results.slice(
         Math.floor(scrollTop / cardHeight),
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineContainer.vue b/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineContainer.vue
index bda736e45e..75fde7c391 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineContainer.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineContainer.vue
@@ -337,9 +337,6 @@ export default {
     rowCount() {
       return this.rows.length
     },
-    containerHeight() {
-      return this.rowsCount * this.rowHeight
-    },
     scrollAreaElement() {
       return this.$refs.gridBody
     },
@@ -409,6 +406,9 @@ export default {
     },
     'view.timescale'() {
       // Update the timescale as soon as it changes in the store.
+      if (!this.firstVisibleDate) {
+        return // Grid not initialized yet
+      }
       let currDate = this.firstVisibleDate
         .clone()
         .add(Math.floor(this.visibleColumnCount / 2), this.unit)
@@ -538,6 +538,9 @@ export default {
      */
     updateGridDimensions() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return
+      }
       this.gridWidth = el.clientWidth
       this.gridHeight = el.clientHeight
       this.columnWidth = Math.max(
@@ -552,6 +555,9 @@ export default {
      */
     getVisibleColumnsRange() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return { startIndex: 0, endIndex: 0 }
+      }
       const startIndex = Math.floor(el.scrollLeft / this.columnWidth)
       const endIndex = startIndex + this.visibleColumnCount + 1
       return { startIndex, endIndex }
@@ -570,6 +576,9 @@ export default {
      */
     onResizeUpdateGrid() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return
+      }
       const prevPos = el.scrollLeft / el.scrollWidth
 
       this.updateGridDimensions()
@@ -634,12 +643,15 @@ export default {
      */
     getVisibleRowsRange() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return { startIndex: 0, endIndex: 0 }
+      }
       const elHeight = el.clientHeight
       const minRowsToRender = Math.ceil(elHeight / this.rowHeight) + 1
       let startIndex = Math.floor(el.scrollTop / this.rowHeight)
       let endIndex = startIndex + minRowsToRender
-      if (endIndex > this.rowsCount) {
-        endIndex = this.rowsCount
+      if (endIndex > this.rowCount) {
+        endIndex = this.rowCount
         startIndex = Math.max(0, endIndex - minRowsToRender)
       }
       return { startIndex, endIndex }
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineGrid.vue b/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineGrid.vue
index 9247bd2d3f..21ce991662 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineGrid.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineGrid.vue
@@ -438,28 +438,32 @@ export default {
      * This method is called when a row is resized or moved.
      */
     updateRow(row, { startOffset, endOffset }) {
-      const startField = this.startDateField
-      const newStartDate = this.getRowDateValue(row, startField).clone()
+      let start = null
+      let end = null
 
-      if (startOffset !== 0) {
+      if (startOffset !== 0 && !this.startDateFieldReadOnly) {
+        const startField = this.startDateField
+        const newStartDate = this.getRowDateValue(row, startField).clone()
         const numberOfUnits = Math.round(startOffset / this.stepPx)
         newStartDate.add(numberOfUnits, this.step)
+        start = this.$registry
+          .get('field', startField.type)
+          .formatValue(startField, newStartDate)
       }
-      const start = this.$registry
-        .get('field', startField.type)
-        .formatValue(startField, newStartDate)
 
-      const endField = this.endDateField
-      const newEndDate = this.getRowDateValue(row, endField).clone()
-      if (endOffset !== 0) {
+      if (endOffset !== 0 && !this.endDateFieldReadOnly) {
+        const endField = this.endDateField
+        const newEndDate = this.getRowDateValue(row, endField).clone()
         const numberOfUnits = Math.round(endOffset / this.stepPx)
         newEndDate.add(numberOfUnits, this.step)
+        end = this.$registry
+          .get('field', endField.type)
+          .formatValue(endField, newEndDate)
       }
-      const end = this.$registry
-        .get('field', endField.type)
-        .formatValue(endField, newEndDate)
 
-      this.$emit('update-row', { row, start, end })
+      if (start !== null || end !== null) {
+        this.$emit('update-row', { row, start, end })
+      }
     },
     /*
      * Returns the background color for the given row.
diff --git a/premium/web-frontend/modules/baserow_premium/pages/admin/licenses.vue b/premium/web-frontend/modules/baserow_premium/pages/admin/licenses.vue
index 12315c69f4..efdf2f3af4 100644
--- a/premium/web-frontend/modules/baserow_premium/pages/admin/licenses.vue
+++ b/premium/web-frontend/modules/baserow_premium/pages/admin/licenses.vue
@@ -164,7 +164,9 @@ definePageMeta({
   middleware: 'staff',
 })
 
-const { $client, $registry } = useNuxtApp()
+const { $client, $registry, $i18n } = useNuxtApp()
+
+useHead({ title: $i18n.t('licenses.titleLicenses') })
 
 // Fetch data using useAsyncData and return the values from the callback
 const { data } = await useAsyncData('licensesPage', async () => {
diff --git a/web-frontend/modules/core/assets/scss/components/rich_text_editor.scss b/web-frontend/modules/core/assets/scss/components/rich_text_editor.scss
index f37aea23ff..59ffcb7170 100644
--- a/web-frontend/modules/core/assets/scss/components/rich_text_editor.scss
+++ b/web-frontend/modules/core/assets/scss/components/rich_text_editor.scss
@@ -178,9 +178,10 @@ span[data-type='mention'] {
   margin-block: 0;
 }
 
-.rich-text-editor__bubble-menu {
+ul.rich-text-editor__bubble-menu {
   display: flex;
   list-style: none;
+  padding-inline-start: 4px;
 }
 
 .rich-text-editor__floating-menu--expanded {
diff --git a/web-frontend/modules/core/components/editor/RichTextEditor.vue b/web-frontend/modules/core/components/editor/RichTextEditor.vue
index 0a1cdbeb55..fc219f28b5 100644
--- a/web-frontend/modules/core/components/editor/RichTextEditor.vue
+++ b/web-frontend/modules/core/components/editor/RichTextEditor.vue
@@ -18,7 +18,6 @@
         ref="floatingMenu"
         :editor="editor"
         :visible="floatingMenuVisible"
-        :get-scrollable-area-bounding-rect="scrollableAreaBoundingRect"
       />
     </div>
     <EditorContent
@@ -187,12 +186,6 @@ export default {
     ...mapGetters({
       loggedUserId: 'auth/getUserId',
     }),
-    scrollableAreaBoundingRect() {
-      if (this.scrollableAreaElement !== null) {
-        return this.scrollableAreaElement.getBoundingClientRect()
-      }
-      return () => this.$refs.root.getBoundingClientRect()
-    },
     canUploadImages() {
       const enableImages = false
       return this.editable && this.enableRichTextFormatting && enableImages
@@ -232,7 +225,6 @@ export default {
   methods: {
     registerResizeObserver() {
       const resizeObserver = new ResizeObserver(() => {
-        this.$refs.floatingMenu?.updateReferenceClientRect()
         this.bubbleMenuVisible = false
       })
       resizeObserver.observe(this.$refs.root)
@@ -367,7 +359,10 @@ export default {
       }
     },
     registerAutoCollapseFloatingMenuHandler() {
-      this.mousedownEvent = () => {
+      this.mousedownEvent = (event) => {
+        if (this.$refs.floatingMenu?.isEventTargetInside(event)) {
+          return
+        }
         this.$refs.floatingMenu?.collapse()
       }
       this.$refs.root.addEventListener('mousedown', this.mousedownEvent)
diff --git a/web-frontend/modules/core/components/editor/RichTextEditorBubbleMenu.vue b/web-frontend/modules/core/components/editor/RichTextEditorBubbleMenu.vue
index aa0af76221..45749d8298 100644
--- a/web-frontend/modules/core/components/editor/RichTextEditorBubbleMenu.vue
+++ b/web-frontend/modules/core/components/editor/RichTextEditorBubbleMenu.vue
@@ -1,14 +1,11 @@
 <template>
-  <FloatingMenu
+  <BubbleMenu
     v-if="editor"
-    v-show="visible"
     :editor="editor"
-    :should-show="() => true"
-    :tippy-options="{
-      duration: 250,
+    :should-show="() => visible"
+    :options="{
       placement: 'top',
-      offset: [0, 5],
-      appendTo,
+      offset: 5,
     }"
   >
     <div :style="{ visibility: 'visible' }">
@@ -125,17 +122,17 @@
         </li>
       </ul>
     </div>
-  </FloatingMenu>
+  </BubbleMenu>
 </template>
 
 <script>
-import { FloatingMenu } from '@tiptap/extension-floating-menu'
+import { BubbleMenu } from '@tiptap/vue-3/menus'
 import { isElement } from '@baserow/modules/core/utils/dom'
 
 export default {
   name: 'RichTextEditorBubbleMenu',
   components: {
-    FloatingMenu,
+    BubbleMenu,
   },
   props: {
     editor: {
@@ -180,9 +177,6 @@ export default {
     }
   },
   methods: {
-    appendTo() {
-      return document.body
-    },
     isEventTargetInside(event) {
       return (
         isElement(this.$el, event.target) ||
diff --git a/web-frontend/modules/core/components/editor/RichTextEditorFloatingMenu.vue b/web-frontend/modules/core/components/editor/RichTextEditorFloatingMenu.vue
index 5af6649721..b37e1c3740 100644
--- a/web-frontend/modules/core/components/editor/RichTextEditorFloatingMenu.vue
+++ b/web-frontend/modules/core/components/editor/RichTextEditorFloatingMenu.vue
@@ -1,18 +1,15 @@
 <template>
-  <FloatingMenu
+  <BubbleMenu
     v-if="editor"
-    v-show="open && visible && insideContainer"
+    v-show="open"
     ref="menu"
     :editor="editor"
-    :tippy-options="{
-      duration: 250,
+    :should-show="() => visible"
+    :options="{
       placement: 'left',
-      appendTo,
-      getReferenceClientRect: updateReferenceClientRect,
-      onShow,
-      onHidden,
+      offset: { mainAxis: 14, crossAxis: 0 },
     }"
-    :should-show="() => true"
+    :get-referenced-virtual-element="getVirtualElement"
   >
     <div :style="{ visibility: 'visible' }">
       <div
@@ -35,7 +32,7 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'p' }"
-            @click.stop.prevent="editor.chain().focus().setParagraph().run()"
+            @click.stop.prevent="setBlockType('paragraph')"
           >
             <i class="baserow-icon-paragraph"></i>
           </button>
@@ -46,9 +43,7 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'h1' }"
-            @click.stop.prevent="
-              editor.chain().focus().toggleHeading({ level: 1 }).run()
-            "
+            @click.stop.prevent="setBlockType('h1')"
           >
             <i class="baserow-icon-heading-1"></i>
           </button>
@@ -59,9 +54,7 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'h2' }"
-            @click.stop.prevent="
-              editor.chain().focus().toggleHeading({ level: 2 }).run()
-            "
+            @click.stop.prevent="setBlockType('h2')"
           >
             <i class="baserow-icon-heading-2"></i>
           </button>
@@ -72,9 +65,7 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'h3' }"
-            @click.stop.prevent="
-              editor.chain().focus().toggleHeading({ level: 3 }).run()
-            "
+            @click.stop.prevent="setBlockType('h3')"
           >
             <i class="baserow-icon-heading-3"></i>
           </button>
@@ -85,7 +76,7 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'code' }"
-            @click.stop.prevent="editor.chain().focus().toggleCodeBlock().run()"
+            @click.stop.prevent="setBlockType('code')"
           >
             <i class="iconoir-code"></i>
           </button>
@@ -96,9 +87,7 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'ol' }"
-            @click.stop.prevent="
-              editor.chain().focus().toggleOrderedList().run()
-            "
+            @click.stop.prevent="setBlockType('ol')"
           >
             <i class="baserow-icon-ordered-list"></i>
           </button>
@@ -109,9 +98,7 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'ul' }"
-            @click.stop.prevent="
-              editor.chain().focus().toggleBulletList().run()
-            "
+            @click.stop.prevent="setBlockType('ul')"
           >
             <i class="iconoir-list"></i>
           </button>
@@ -122,44 +109,38 @@
         >
           <button
             :class="{ 'is-active': activeNode == 'tl' }"
-            @click.stop.prevent="editor.chain().focus().toggleTaskList().run()"
+            @click.stop.prevent="setBlockType('tl')"
           >
             <i class="iconoir-task-list"></i>
           </button>
         </div>
       </div>
     </div>
-  </FloatingMenu>
+  </BubbleMenu>
 </template>
 
 <script>
 import { posToDOMRect } from '@tiptap/core'
-import { FloatingMenu } from '@tiptap/extension-floating-menu'
+import { BubbleMenu } from '@tiptap/vue-3/menus'
 import { isElement } from '@baserow/modules/core/utils/dom'
 
 export default {
-  name: 'RichTextEditorBubbleMenuContext',
-  components: { FloatingMenu },
+  name: 'RichTextEditorFloatingMenu',
+  components: { BubbleMenu },
   props: {
     editor: {
       type: Object,
       required: false,
       default: null,
     },
-    getScrollableAreaBoundingRect: {
-      type: Function,
-      default: () => null,
-    },
     visible: {
       type: Boolean,
       default: true,
     },
   },
-  emits: ['hidden', 'show'],
   data() {
     return {
       open: true,
-      insideContainer: true,
       expanded: false,
     }
   },
@@ -209,52 +190,95 @@ export default {
       return (
         isElement(this.$el, event.target) ||
         isElement(this.$el, event.relatedTarget) ||
-        /// Safari set the relatedTarget to the tippyjs popover that contains this.$el,
+        // Safari set the relatedTarget to the floating-ui popover that contains this.$el,
         // but since we cannot access it by reference, try inverting the check.
         isElement(event.relatedTarget, this.$el)
       )
     },
-    onShow() {
-      this.$emit('show')
-    },
-    onHidden() {
-      this.$emit('hidden')
-    },
     expand() {
       this.open = true
       this.expanded = true
+      // Trigger position recalculation after DOM updates with expanded menu
+      this.$nextTick(() => {
+        const { tr } = this.editor.state
+        tr.setMeta('bubbleMenu', 'updatePosition')
+        this.editor.view.dispatch(tr)
+      })
     },
     collapse() {
       this.open = true
       this.expanded = false
+      // Trigger position recalculation after DOM updates with collapsed menu
+      this.$nextTick(() => {
+        const { tr } = this.editor.state
+        tr.setMeta('bubbleMenu', 'updatePosition')
+        this.editor.view.dispatch(tr)
+      })
     },
-    appendTo() {
-      return document.body
-    },
-    updateInsideContainerFlag(boundingRect) {
-      const containerBoundingRect = this.getScrollableAreaBoundingRect()
-      if (!containerBoundingRect) {
+    setBlockType(type) {
+      if (!this.editor) {
         return
       }
-      this.insideContainer =
-        containerBoundingRect.top < boundingRect.bottom &&
-        containerBoundingRect.bottom > boundingRect.top
+
+      const chain = this.editor.chain().focus().clearNodes()
+
+      switch (type) {
+        case 'paragraph':
+          chain.setParagraph()
+          break
+        case 'h1':
+          chain.setHeading({ level: 1 })
+          break
+        case 'h2':
+          chain.setHeading({ level: 2 })
+          break
+        case 'h3':
+          chain.setHeading({ level: 3 })
+          break
+        case 'code':
+          chain.setCodeBlock()
+          break
+        case 'ol':
+          chain.toggleOrderedList()
+          break
+        case 'ul':
+          chain.toggleBulletList()
+          break
+        case 'tl':
+          chain.toggleTaskList()
+          break
+      }
+
+      chain.run()
+      this.open = true
+      // Trigger position recalculation after format change (line height may change)
+      this.$nextTick(() => {
+        const { tr } = this.editor.state
+        tr.setMeta('bubbleMenu', 'updatePosition')
+        this.editor.view.dispatch(tr)
+      })
     },
-    updateReferenceClientRect() {
+    getVirtualElement() {
       const view = this.editor.view
       const { state } = view
       const { from } = state.selection
-      const boundingRect = posToDOMRect(view, from, from)
+      const cursorRect = posToDOMRect(view, from, from)
 
-      // Open the menu to the left of the editor with a small offset.
-      const editorBoundingRect = view.dom.getBoundingClientRect()
-      const offset = 4
-      boundingRect.left = editorBoundingRect.left - offset
-      boundingRect.right = editorBoundingRect.left - offset
+      // Position to the left of the editor
+      const editorRect = view.dom.getBoundingClientRect()
 
-      this.updateInsideContainerFlag(boundingRect)
-
-      return boundingRect
+      return {
+        getBoundingClientRect: () => ({
+          top: cursorRect.top,
+          bottom: cursorRect.bottom,
+          left: editorRect.left,
+          right: editorRect.left,
+          x: editorRect.left,
+          y: cursorRect.top,
+          width: 0,
+          height: cursorRect.height,
+        }),
+      }
     },
   },
 }
diff --git a/web-frontend/modules/core/components/helpers/InfiniteScroll.vue b/web-frontend/modules/core/components/helpers/InfiniteScroll.vue
index 3ae84de8a7..0dfa507167 100644
--- a/web-frontend/modules/core/components/helpers/InfiniteScroll.vue
+++ b/web-frontend/modules/core/components/helpers/InfiniteScroll.vue
@@ -124,7 +124,8 @@ export default {
      * page event if the user has scrolled to the end of the wrapper.
      */
     handleScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
-      const height = clientHeight + this.$refs.loadingWrapper.clientHeight
+      const loadingWrapperHeight = this.$refs.loadingWrapper?.clientHeight || 0
+      const height = clientHeight + loadingWrapperHeight
       if (this.reverse) {
         if (-scrollTop + height >= scrollHeight) {
           this.loadNextPage()
diff --git a/web-frontend/modules/core/editor/suggestion.js b/web-frontend/modules/core/editor/suggestion.js
index 8b13e43bb9..1f937f3af8 100644
--- a/web-frontend/modules/core/editor/suggestion.js
+++ b/web-frontend/modules/core/editor/suggestion.js
@@ -11,8 +11,8 @@ export default ({ users }) => ({
     return {
       onStart: (props) => {
         component = new VueRenderer(RichTextEditorMentionsList, {
-          parent: this,
-          propsData: { users, ...props },
+          editor: props.editor,
+          props: { users, ...props },
         })
 
         if (!props.clientRect) {
diff --git a/web-frontend/modules/core/locales/en.json b/web-frontend/modules/core/locales/en.json
index 68ad74d0a4..7abde34404 100644
--- a/web-frontend/modules/core/locales/en.json
+++ b/web-frontend/modules/core/locales/en.json
@@ -1131,5 +1131,11 @@
     "verificationFailedDescription": "The entered code is not valid.",
     "provisioningFailed": "Provisioning failed",
     "checkSuccess": "Successfully enabled two-factor authentication"
+  },
+  "adminUsers": {
+    "title": "Users"
+  },
+  "adminWorkspaces": {
+    "title": "Workspaces"
   }
 }
diff --git a/web-frontend/modules/core/pages/admin/dashboard.vue b/web-frontend/modules/core/pages/admin/dashboard.vue
index 2d58b3bde2..ba99f36663 100644
--- a/web-frontend/modules/core/pages/admin/dashboard.vue
+++ b/web-frontend/modules/core/pages/admin/dashboard.vue
@@ -182,6 +182,7 @@
 </template>
 
 <script>
+import { useHead } from '#imports'
 import { notifyIf } from '@baserow/modules/core/utils/error'
 
 import ActiveUsers from '@baserow/modules/core/components/admin/dashboard/charts/ActiveUsers'
@@ -191,6 +192,10 @@ export default {
   components: { ActiveUsers },
   layout: 'app',
   middleware: 'staff',
+  setup() {
+    const { $i18n } = useNuxtApp()
+    useHead({ title: $i18n.t('adminDashboard.title') })
+  },
   data() {
     return {
       loading: true,
diff --git a/web-frontend/modules/core/pages/admin/health.vue b/web-frontend/modules/core/pages/admin/health.vue
index 90adb7671d..3900623efe 100644
--- a/web-frontend/modules/core/pages/admin/health.vue
+++ b/web-frontend/modules/core/pages/admin/health.vue
@@ -67,6 +67,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import { useHead } from '#imports'
 import HealthService from '@baserow/modules/core/services/health'
 import EmailTester from '@baserow/modules/core/components/health/EmailTester.vue'
 
@@ -77,7 +78,9 @@ definePageMeta({
 })
 
 // Access Baserow client from Nuxt app
-const { $client } = useNuxtApp()
+const { $client, $i18n } = useNuxtApp()
+
+useHead({ title: $i18n.t('health.title') })
 
 // Fetch data (equivalent to asyncData)
 const { data } = await useAsyncData('health', async () => {
diff --git a/web-frontend/modules/core/pages/admin/settings.vue b/web-frontend/modules/core/pages/admin/settings.vue
index fe16a6c615..db5935f204 100644
--- a/web-frontend/modules/core/pages/admin/settings.vue
+++ b/web-frontend/modules/core/pages/admin/settings.vue
@@ -242,7 +242,7 @@ import {
   getCurrentInstance,
   onMounted,
 } from 'vue'
-import { useAsyncData, useNuxtApp } from '#app'
+import { useAsyncData, useNuxtApp, useHead } from '#app'
 import { useStore } from 'vuex'
 import { useVuelidate } from '@vuelidate/core'
 import { required, integer, between, helpers } from '@vuelidate/validators'
@@ -252,10 +252,12 @@ import SettingsService from '@baserow/modules/core/services/settings'
 import { copyToClipboard } from '@baserow/modules/database/utils/clipboard'
 import { EMAIL_VERIFICATION_OPTIONS } from '@baserow/modules/core/enums'
 
-const { $registry, $client, $baserowVersion } = useNuxtApp()
+const { $registry, $client, $baserowVersion, $i18n } = useNuxtApp()
 const { t: $t } = useI18n()
 const store = useStore()
 
+useHead({ title: $i18n.t('settings.settingsTitle') })
+
 const instanceIdCopied = ref(null)
 
 const values = reactive({
diff --git a/web-frontend/modules/core/pages/admin/users.vue b/web-frontend/modules/core/pages/admin/users.vue
index d0da3077d1..e23a34bde9 100644
--- a/web-frontend/modules/core/pages/admin/users.vue
+++ b/web-frontend/modules/core/pages/admin/users.vue
@@ -3,11 +3,16 @@
 </template>
 
 <script>
+import { useHead } from '#imports'
 import UsersAdminTable from '@baserow/modules/core/components/admin/users/UsersAdminTable'
 
 export default {
   components: { UsersAdminTable },
   layout: 'app',
   middleware: 'staff',
+  setup() {
+    const { $i18n } = useNuxtApp()
+    useHead({ title: $i18n.t('adminUsers.title') })
+  },
 }
 </script>
diff --git a/web-frontend/modules/core/pages/admin/workspaces.vue b/web-frontend/modules/core/pages/admin/workspaces.vue
index 4369e039f6..17e31542ff 100644
--- a/web-frontend/modules/core/pages/admin/workspaces.vue
+++ b/web-frontend/modules/core/pages/admin/workspaces.vue
@@ -3,11 +3,17 @@
 </template>
 
 <script>
+import { useHead } from '#imports'
+import { useNuxtApp } from '#app'
 import WorkspacesAdminTable from '@baserow/modules/core/components/admin/workspaces/WorkspacesAdminTable'
 
 export default {
   components: { WorkspacesAdminTable },
   layout: 'app',
   middleware: 'staff',
+  setup() {
+    const { $i18n } = useNuxtApp()
+    useHead({ title: $i18n.t('adminWorkspaces.title') })
+  },
 }
 </script>
diff --git a/web-frontend/modules/core/pages/settings.vue b/web-frontend/modules/core/pages/settings.vue
index 299640e4f6..09ea3afd91 100644
--- a/web-frontend/modules/core/pages/settings.vue
+++ b/web-frontend/modules/core/pages/settings.vue
@@ -31,12 +31,15 @@
 </template>
 
 <script setup>
+import { useHead } from '#imports'
+
 /* Using Vuex in Nuxt 3 with Composition API */
 
 const route = useRoute()
 const router = useRouter()
 const nuxtApp = useNuxtApp()
 const store = nuxtApp.$store
+const { $i18n } = nuxtApp
 
 /* asyncData → useAsyncData */
 const { data: workspace } = await useAsyncData('workspace', async () => {
@@ -77,6 +80,16 @@ const deactivatedPagesWithModal = computed(() =>
   pages.value.filter((page) => !page.navigable && page.deactivatedModal)
 )
 
+/* Dynamic page title based on current tab */
+const currentPageName = computed(() => {
+  const currentPage = pages.value.find((p) => p.to?.name === route.name)
+  return currentPage?.name || $i18n.t('sidebar.settings')
+})
+
+useHead(() => ({
+  title: currentPageName.value,
+}))
+
 /* Modal refs */
 const modalRefs = reactive({})
 
diff --git a/web-frontend/modules/database/components/table/TableCSVImporter.vue b/web-frontend/modules/database/components/table/TableCSVImporter.vue
index 45be69b6bf..6031060ebd 100644
--- a/web-frontend/modules/database/components/table/TableCSVImporter.vue
+++ b/web-frontend/modules/database/components/table/TableCSVImporter.vue
@@ -245,10 +245,10 @@ export default {
 
       const decoder = new TextDecoder(this.encoding)
       const decodedData = decoder.decode(this.rawData)
-      const limit = this.config.public.initialTableDataLimit
+      const limit = parseInt(this.config.public.initialTableDataLimit, 10)
       const count = decodedData.split(/\r\n|\r|\n/).length
 
-      if (limit !== null && count > limit) {
+      if (limit && count > limit) {
         this.handleImporterError(
           this.$t('tableCSVImporter.limitError', {
             limit,
diff --git a/web-frontend/modules/database/components/table/TableJSONImporter.vue b/web-frontend/modules/database/components/table/TableJSONImporter.vue
index 2d72e37e7e..922d30a8d4 100644
--- a/web-frontend/modules/database/components/table/TableJSONImporter.vue
+++ b/web-frontend/modules/database/components/table/TableJSONImporter.vue
@@ -209,8 +209,8 @@ export default {
         return
       }
 
-      const limit = this.config.public.initialTableDataLimit
-      if (limit !== null && json.length > limit - 1) {
+      const limit = parseInt(this.config.public.initialTableDataLimit, 10)
+      if (limit && json.length > limit - 1) {
         this.handleImporterError(
           this.$t('tableJSONImporter.limitError', {
             limit,
diff --git a/web-frontend/modules/database/components/table/TablePasteImporter.vue b/web-frontend/modules/database/components/table/TablePasteImporter.vue
index 3f2a26c63c..6dc59dac2c 100644
--- a/web-frontend/modules/database/components/table/TablePasteImporter.vue
+++ b/web-frontend/modules/database/components/table/TablePasteImporter.vue
@@ -87,9 +87,9 @@ export default {
         this.resetImporterState()
         return
       }
-      const limit = this.config.public.initialTableDataLimit
+      const limit = parseInt(this.config.public.initialTableDataLimit, 10)
       const count = this.values.content.split(/\r\n|\r|\n/).length
-      if (limit !== null && count > limit) {
+      if (limit && count > limit) {
         this.handleImporterError(
           this.$t('tablePasteImporter.limitError', {
             limit,
diff --git a/web-frontend/modules/database/components/table/TableXMLImporter.vue b/web-frontend/modules/database/components/table/TableXMLImporter.vue
index 8294f20655..e3a0e9f70e 100644
--- a/web-frontend/modules/database/components/table/TableXMLImporter.vue
+++ b/web-frontend/modules/database/components/table/TableXMLImporter.vue
@@ -186,8 +186,8 @@ export default {
         return
       }
 
-      const limit = this.config.public.initialTableDataLimit
-      if (limit !== null && xmlData.length > limit) {
+      const limit = parseInt(this.config.public.initialTableDataLimit, 10)
+      if (limit && xmlData.length > limit) {
         this.handleImporterError(
           this.$t('tableXMLImporter.limitError', { limit })
         )
diff --git a/web-frontend/modules/database/components/view/gallery/GalleryView.vue b/web-frontend/modules/database/components/view/gallery/GalleryView.vue
index 8b40854462..cdd99bb48b 100644
--- a/web-frontend/modules/database/components/view/gallery/GalleryView.vue
+++ b/web-frontend/modules/database/components/view/gallery/GalleryView.vue
@@ -280,10 +280,13 @@ export default {
         this.updateBuffer(true, false)
       })
     },
-    allRows() {
-      this.$nextTick(() => {
-        this.updateBuffer(true, false)
-      })
+    allRows: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.updateBuffer(true, false)
+        })
+      },
     },
     row: {
       deep: true,
@@ -370,8 +373,12 @@ export default {
     }
   },
   beforeUnmount() {
-    this.resizeObserver.unobserve(this.$el)
-    this.$refs.scroll.removeEventListener('scroll', this.scrollEvent)
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.unobserve(this.$el)
+    }
+    if (this.$refs.scroll) {
+      this.$refs.scroll.removeEventListener('scroll', this.scrollEvent)
+    }
   },
   methods: {
     getDragAndDropStoreName(props) {
diff --git a/web-frontend/modules/database/mixins/bufferedRowsDragAndDrop.js b/web-frontend/modules/database/mixins/bufferedRowsDragAndDrop.js
index ecec11a633..cd1a8e1ad6 100644
--- a/web-frontend/modules/database/mixins/bufferedRowsDragAndDrop.js
+++ b/web-frontend/modules/database/mixins/bufferedRowsDragAndDrop.js
@@ -31,6 +31,12 @@ export default {
       mouseUpEvent: null,
       keydownEvent: null,
       mouseMoveEvent: null,
+      // Cloned elements for drag visual feedback
+      clonedElement: null,
+      clonedWrapper: null,
+      // Position offsets for dragged element
+      dragAndDropDownRowTop: 0,
+      dragAndDropDownRowLeft: 0,
     }
   },
   computed: {
@@ -57,7 +63,7 @@ export default {
      */
     rowDown(event, row, readOnly = false) {
       // If it isn't a left click.
-      if (event.button !== 0 || row === null) {
+      if (event.button !== 0 || !row) {
         return
       }
 
@@ -77,12 +83,12 @@ export default {
 
         this.clonedElement = document.createElement('div')
         this.clonedElement.innerHTML = event.target.outerHTML
-        this.clonedElement.style = `position: absolute; left: 0; top: 0; width: ${rect.width}px; z-index: 10;`
+        this.clonedElement.style = `position: absolute; left: 0; top: 0; width: ${rect.width}px; z-index: 10; pointer-events: none;`
         this.clonedElement.firstChild.classList.add(this.dragAndDropCloneClass)
 
         this.clonedWrapper = document.createElement('div')
         this.clonedWrapper.style =
-          'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-event: none;'
+          'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none;'
         this.clonedWrapper.appendChild(this.clonedElement)
 
         this.keydownEvent = (event) => {
@@ -175,10 +181,15 @@ export default {
       // If the view is read only, the clonedWrapper is never created.
       if (this.clonedWrapper) {
         this.clonedWrapper.remove()
+        this.clonedWrapper = null
+        this.clonedElement = null
       }
       document.body.removeEventListener('keydown', this.keydownEvent)
       window.removeEventListener('mousemove', this.mouseMoveEvent)
       window.removeEventListener('mouseup', this.mouseUpEvent)
+      this.keydownEvent = null
+      this.mouseMoveEvent = null
+      this.mouseUpEvent = null
     },
     /**
      * Must be called when the user hovers over another row. It will check if we're
diff --git a/web-frontend/modules/database/pages/table.vue b/web-frontend/modules/database/pages/table.vue
index eccc218386..fe56e3017f 100644
--- a/web-frontend/modules/database/pages/table.vue
+++ b/web-frontend/modules/database/pages/table.vue
@@ -62,6 +62,10 @@ const {
   $i18n: { t: $t },
 } = nuxtApp
 
+function finishLoading() {
+  nuxtApp.callHook('page:loading:end')
+}
+
 const tableLoading = computed(() => $store.state.table.loading)
 const views = computed(() => $store.state.view.items)
 
@@ -163,7 +167,7 @@ const { data, error, pending, status, refresh } = await useAsyncData(
 watch(
   () => [route.params.tableId, route.params.viewId],
   async ([newTableId, newViewId], [oldTableId, oldViewId]) => {
-    if (newTableId !== oldTableId || newViewId !== oldViewId) {
+    if (newTableId && (newTableId !== oldTableId || newViewId !== oldViewId)) {
       // Set loading state immediately to hide old content before refresh
       $store.dispatch('table/setLoading', true)
       await refresh()
@@ -231,6 +235,11 @@ onBeforeRouteUpdate(async (to, from, next) => {
   const prevTableId = parseIntOrNull(from.params.tableId)
   const failed = $store.getters['rowModalNavigation/getFailedToFetchTableRowId']
 
+  const isRowOnlyNavigation =
+    currentTableId === prevTableId &&
+    to.params.viewId === from.params.viewId &&
+    to.params.rowId !== from.params.rowId
+
   if (currentRowId == null) {
     await $store.dispatch('rowModalNavigation/clearRow')
   } else if (
@@ -255,6 +264,10 @@ onBeforeRouteUpdate(async (to, from, next) => {
     }
   }
   next()
+
+  if (isRowOnlyNavigation) {
+    finishLoading()
+  }
 })
 
 /**
@@ -280,7 +293,7 @@ async function navigateToRowModal(row) {
     await $store.dispatch('rowModalNavigation/setRow', row)
   }
 
-  router.push({
+  await router.push({
     name: rowId ? 'database-table-row' : 'database-table',
     params: {
       databaseId: database.value.id,
@@ -289,6 +302,8 @@ async function navigateToRowModal(row) {
       rowId,
     },
   })
+
+  finishLoading()
 }
 
 async function setAdjacentRow(previous, row = null, term = null) {