fix: reduce default dashboard column min-width (#11501)

The previous default 25em equals 350–400 pixels, depending on the theme,
which is too wide for many smartphones, which means dashboards will
always show a scrollbar.

20em is 280–320 pixels, which is more reasonable to fit within common
smartphone viewports (accounting for some padding around the viewport as
well).

Author: jouni

packages/dashboard/src/styles/vaadin-dashboard-layout-base-styles.js

@@ -41,7 +41,7 @@ export const dashboardLayoutStyles = css`
     gap: var(--_gap);
 
     /* Default min and max column widths */
-    --_default-col-min-width: 25em;
+    --_default-col-min-width: 20em;
     --_default-col-max-width: 1fr;
 
     /* Effective min and max column widths */

packages/dashboard/test/dashboard-layout.test.ts

@@ -32,7 +32,7 @@ const defaultMinimumColumnWidth = (() => {
   const div = document.createElement('div');
   document.body.appendChild(div);
   div.style.width = '1rem';
-  const minColWidth = div.offsetWidth * 25;
+  const minColWidth = div.offsetWidth * 20;
   div.remove();
   return minColWidth;
 })();

packages/dashboard/test/dom/__snapshots__/dashboard-layout.test.snap.js

@@ -10,7 +10,7 @@ snapshots["vaadin-dashboard-layout host"] =
 snapshots["vaadin-dashboard-layout shadow"] = 
 `<div
   id="grid"
-  style="width: 800px; --_col-count: 1;"
+  style="width: 800px; --_col-count: 2;"
 >
   <slot>
   </slot>

packages/dashboard/test/dom/__snapshots__/dashboard.test.snap.js

@@ -23,7 +23,7 @@ snapshots["vaadin-dashboard host"] =
 snapshots["vaadin-dashboard shadow"] = 
 `<div
   id="grid"
-  style="width: 800px; --_col-count: 1;"
+  style="width: 800px; --_col-count: 2;"
 >
   <slot name="slot-0">
   </slot>