diff --git a/dev/dashboard.html b/dev/dashboard.html
index 3491fdc0abe..49c1c2b4672 100644
--- a/dev/dashboard.html
+++ b/dev/dashboard.html
@@ -17,6 +17,9 @@
 
       vaadin-dashboard {
         --vaadin-dashboard-col-min-width: 300px;
+        --vaadin-dashboard-col-max-width: 500px;
+        --vaadin-dashboard-gap: 20px;
+        --vaadin-dashboard-col-max-count: 3;
       }
 
       .kpi-number {
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 868e26e8f89..f60ef29cdc4 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -63,6 +63,10 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
         header {
           grid-column: var(--_vaadin-dashboard-section-column);
         }
+
+        :host::before {
+          z-index: 2 !important;
+        }
       `,
       hasWidgetWrappers,
       dashboardWidgetAndSectionStyles,
diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
index c38108c5194..d874cdc4697 100644
--- a/packages/dashboard/src/vaadin-dashboard-styles.js
+++ b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -7,6 +7,7 @@ export const hasWidgetWrappers = css`
 `;
 
 export const dashboardWidgetAndSectionStyles = css`
+  /* Placeholder shown while the widget or section is dragged */
   :host::before {
     content: '';
     z-index: 1;
diff --git a/packages/dashboard/src/widget-reorder-controller.js b/packages/dashboard/src/widget-reorder-controller.js
index 1c81f46d6a4..31a0f13dedd 100644
--- a/packages/dashboard/src/widget-reorder-controller.js
+++ b/packages/dashboard/src/widget-reorder-controller.js
@@ -5,7 +5,7 @@
  */
 
 const WRAPPER_LOCAL_NAME = 'vaadin-dashboard-widget-wrapper';
-const REORDER_EVENT_TIMEOUT = 300;
+const REORDER_EVENT_TIMEOUT = 200;
 
 /**
  * A controller to widget reordering inside a dashboard.
@@ -170,7 +170,8 @@ export class WidgetReorderController extends EventTarget {
 
   /**
    * Returns the elements (widgets or sections) that are candidates for reordering with the
-   * currently dragged item.
+   * currently dragged item. Effectively, this is the list of child widgets or sections inside
+   * the same parent container (host or a section) as the dragged item.
    * @private
    */
   __getDragContextElements() {
diff --git a/packages/dashboard/test/dashboard-widget-reordering.test.ts b/packages/dashboard/test/dashboard-widget-reordering.test.ts
index 0ec81447094..4df296a474c 100644
--- a/packages/dashboard/test/dashboard-widget-reordering.test.ts
+++ b/packages/dashboard/test/dashboard-widget-reordering.test.ts
@@ -12,6 +12,7 @@ import {
   fireDrop,
   getDraggable,
   getElementFromCell,
+  getParentSection,
   resetReorderTimeout,
   setGap,
   setMaximumColumnWidth,
@@ -528,7 +529,7 @@ describe('dashboard - widget reordering', () => {
       });
 
       it('should reorder the sections and widgets', async () => {
-        const section = dashboard.querySelector('vaadin-dashboard-section')!;
+        const section = getParentSection(getElementFromCell(dashboard, 1, 0))!;
         fireDragStart(section);
         await nextFrame();
 
diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts
index 49f252a2879..cc69ffd440d 100644
--- a/packages/dashboard/test/helpers.ts
+++ b/packages/dashboard/test/helpers.ts
@@ -4,13 +4,20 @@ import sinon from 'sinon';
 /**
  * Returns the effective column widths of the dashboard as an array of numbers.
  */
-export function getColumnWidths(dashboard: HTMLElement): number[] {
+export function getColumnWidths(dashboard: Element): number[] {
   return getComputedStyle(dashboard)
     .gridTemplateColumns.split(' ')
     .map((width) => parseFloat(width));
 }
 
-function _getRowHeights(dashboard: HTMLElement): number[] {
+export function getParentSection(element?: Element | null): Element | null {
+  if (!element) {
+    return null;
+  }
+  return element.closest('vaadin-dashboard-section');
+}
+
+function _getRowHeights(dashboard: Element): number[] {
   return getComputedStyle(dashboard)
     .gridTemplateRows.split(' ')
     .map((height) => parseFloat(height));
@@ -38,7 +45,7 @@ export function getRowHeights(dashboard: HTMLElement): number[] {
   const dashboardRowHeights = _getRowHeights(dashboard);
   [...dashboardRowHeights].forEach((_height, index) => {
     const item = _getElementFromCell(dashboard, index, 0, dashboardRowHeights);
-    const parentSection = item?.closest('vaadin-dashboard-section');
+    const parentSection = getParentSection(item);
     if (parentSection) {
       const [headerRowHeight, firstRowHeight, ...remainingRowHeights] = _getRowHeights(parentSection);
       // Merge the first two row heights of the section since the first one is the section header