@omnitend/dashboard-for-laravel 0.35.0 → 0.37.0

package/resources/js/components/charts/useThemedChart.ts

@@ -1,9 +1,10 @@
-import { computed, type ComputedRef } from "vue";
+import { computed, type ComputedRef, type Ref } from "vue";
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import {
     baseOptions,
     applyPalette,
     mergeOptions,
+    useColorModeVersion,
     type ChartValueFormat,
 } from "./chartTheme";
 
@@ -35,35 +36,52 @@ export interface ThemedChartProps<TType extends "bar" | "line"> {
  * data-viz palette to un-coloured datasets and deep-merges the consumer's
  * `options` over the dashboard-friendly defaults. Pass the reactive `props`
  * object (property access stays reactive inside the computeds).
+ *
+ * `host` is the chart's own container element (a template ref). It is BOTH the
+ * `data-bs-theme` scope the palette resolves against and — being a ref read
+ * inside the computeds — the trigger that re-themes once it is populated on
+ * mount, since the first render happens before a template ref exists (#161).
  */
 export function useThemedChart<TType extends "bar" | "line">(
     type: TType,
     props: ThemedChartProps<TType>,
+    host: Ref<HTMLElement | null>,
 ): {
     chartData: ComputedRef<ChartData<TType>>;
     mergedOptions: ComputedRef<ChartOptions<TType>>;
 } {
-    const chartData = computed(
-        () =>
-            ({
-                labels: props.labels,
-                datasets: applyPalette(props.datasets, type, props.labels.length),
-            }) as ChartData<TType>,
-    );
+    // Bumped by a MutationObserver on every `data-bs-theme` change; read below
+    // so the CSS-variable palette — invisible to Vue's reactivity — is
+    // re-resolved when the colour mode flips under a mounted chart.
+    const colorModeVersion = useColorModeVersion();
 
-    const mergedOptions = computed(
-        () =>
-            mergeOptions(
-                baseOptions({
-                    valueFormat: props.valueFormat,
-                    currencySymbol: props.currencySymbol,
-                    locale: props.locale,
-                    showLegend: props.showLegend ?? props.datasets.length > 1,
-                    hasValueAxis: true,
-                }),
-                props.options ?? {},
-            ) as ChartOptions<TType>,
-    );
+    const chartData = computed(() => {
+        void colorModeVersion.value;
+        return {
+            labels: props.labels,
+            datasets: applyPalette(
+                props.datasets,
+                type,
+                props.labels.length,
+                host.value,
+            ),
+        } as ChartData<TType>;
+    });
+
+    const mergedOptions = computed(() => {
+        void colorModeVersion.value;
+        return mergeOptions(
+            baseOptions({
+                valueFormat: props.valueFormat,
+                currencySymbol: props.currencySymbol,
+                locale: props.locale,
+                showLegend: props.showLegend ?? props.datasets.length > 1,
+                hasValueAxis: true,
+                scope: host.value,
+            }),
+            props.options ?? {},
+        ) as ChartOptions<TType>;
+    });
 
     return { chartData, mergedOptions };
 }

package/resources/js/components/extended/DXTable.vue

@@ -131,6 +131,23 @@
                                         @update:model-value="handleSelectFilterChange(field, $event)"
                                     />
 
+                                    <!-- Native Select Filter (S3b): a plain <select> for consumers who
+                                         want OS-native behaviour (full-height menu, native keyboard/scroll)
+                                         instead of the DAutocomplete typeahead. Shares the select filter's
+                                         option list (getFieldFilterOptions) and change handler
+                                         (handleSelectFilterChange) EXACTLY — so it behaves identically to
+                                         filter:"select" in every way but the control. Single-select only:
+                                         `filterMultiple` is ignored here. The model maps "no filter" to the
+                                         FILTER_ALL_VALUE sentinel (see nativeSelectFilterValue) so the "All …"
+                                         option shows selected in a native control. -->
+                                    <DFormSelect
+                                        v-else-if="field.filter === 'select-native'"
+                                        :model-value="nativeSelectFilterValue(field)"
+                                        :options="getFieldFilterOptions(field) as unknown as Record<string, unknown>[]"
+                                        size="sm"
+                                        @update:model-value="handleSelectFilterChange(field, $event)"
+                                    />
+
                                     <!-- Number Filter -->
                                     <DFormInput
                                         v-else-if="field.filter === 'number'"
@@ -310,11 +327,17 @@ import DXTableShell from "./DXTableShell.vue";
 import DSpinner from "../base/DSpinner.vue";
 import DTable from "../base/DTable.vue";
 import DFormInput from "../base/DFormInput.vue";
+import DFormSelect from "../base/DFormSelect.vue";
 import DAutocomplete from "../base/DAutocomplete.vue";
 import DButton from "../base/DButton.vue";
 import DXTablePagination from "./DXTablePagination.vue";
 import DXTableEditorModal from "./DXTableEditorModal.vue";
-export type FilterType = 'text' | 'select' | 'number' | 'date' | false;
+// 'select'        — DAutocomplete typeahead (browse-on-focus + type-to-narrow).
+// 'select-native' — a plain native <select> (DFormSelect). Same options, value
+//   semantics and client-side matching as 'select'; differs ONLY in the control,
+//   for consumers who want OS-native menu behaviour (full-height menu, native
+//   keyboard/scroll). Single-select only — `filterMultiple` is ignored for it.
+export type FilterType = 'text' | 'select' | 'select-native' | 'number' | 'date' | false;
 
 export interface FilterOption {
     value: string;
@@ -384,6 +407,12 @@ export interface TableField {
     filterAllText?: string;
     sortable?: boolean;
     hint?: string;
+    /**
+     * The inline filter control for this column, or `false`/omit for none. See
+     * `FilterType`. `'select'` (typeahead) and `'select-native'` (plain
+     * `<select>`) share the same options and value semantics — pick the native
+     * one when OS-native menu behaviour matters more than type-to-narrow.
+     */
     filter?: FilterType;
     filterOptions?: FilterOption[];
     filterPlaceholder?: string;
@@ -606,17 +635,16 @@ export interface Props<TItem = any> {
      * data-heavy admin index pages that read as busy inside a card.
      *
      * The table renders FLUSH to the card border (rows and stripes reach the
-     * edge) while the header and pagination stay padded, which requires the card
-     * to clip to its radius (`overflow: hidden`).
+     * edge) while the header and pagination stay padded. Only the table region
+     * is rounded to follow the card's corners — the card itself does not clip
+     * (#166), so a `position: absolute` popover you render into `#header` or
+     * any other slot is free to overhang the card.
      *
-     * **Consequence for slot content:** anything you render into a slot that
-     * positions itself OUTSIDE the card and does not teleport is clipped at the
-     * card edge. Library components are unaffected — `DDropdown` teleports to
-     * `<body>` by default, and the column-filter menus position themselves
-     * `fixed` — so this only bites a hand-rolled `position: absolute` overlay
-     * (a custom popover in a `cell(<key>)` or `#header` slot). Teleport it, or
-     * use `:card="false"`. Narrowing the clip to the table region is tracked
-     * as #166.
+     * The one place content is still clipped is INSIDE the table: Bootstrap's
+     * `.table-responsive` is a horizontal scroll container, so an overlay in a
+     * `cell(<key>)` slot is bounded by it. Teleport it (bvn's own menus already
+     * do — `DDropdown` teleports to `<body>`, the column-filter menus are
+     * `fixed`), or pass `:responsive="false"`.
      */
     card?: boolean;
 
@@ -770,6 +798,19 @@ export interface Props<TItem = any> {
      * declared width share the remaining space equally.
      */
     fixedLayout?: boolean;
+
+    /**
+     * Field on each row whose value uniquely identifies it, forwarded to the
+     * inner bvn table's `primaryKey` (all three data modes). Without it bvn keys
+     * client-side rows by their INDEX, which mis-associates per-row STATEFUL cell
+     * components when a row is inserted/removed mid-interaction — a debounced
+     * edit in one row can end up saved against the wrong record after a
+     * concurrent delete of a row above. Set it (e.g. `primary-key="id"`) so bvn
+     * keys rows by that field's value and each row keeps its identity across
+     * data mutations. Non-breaking: omit it and rows key by index exactly as
+     * before.
+     */
+    primaryKey?: string;
 }
 
 const props = withDefaults(defineProps<Props<T>>(), {
@@ -1103,7 +1144,9 @@ const clientSideFilteredItems = computed<T[]>(() => {
                         // Case-insensitive contains search
                         return String(itemValue).toLowerCase().includes(filterValue);
 
+                    // Both select controls match identically (exact string match).
                     case 'select':
+                    case 'select-native':
                         // Exact match
                         return String(itemValue) === candidate;
 
@@ -1273,6 +1316,15 @@ const fieldsHaveWidths = computed(() => props.fields.some(hasDeclaredWidth));
 // key: a display column can filter on a different server param via `filterKey`.
 const filterKeyFor = (field: TableField): string => field.filterKey ?? field.key;
 
+// Both select-style filters — 'select' (DAutocomplete typeahead) and
+// 'select-native' (plain <select>) — share the SAME option list, value
+// semantics and client-side matching; they differ only in the rendered control.
+// This predicate keeps the two in lockstep everywhere the option-derivation and
+// server-value logic runs, so a `select-native` column gets identical options to
+// what `select` would offer.
+const isSelectFilter = (field: TableField): boolean =>
+    field.filter === 'select' || field.filter === 'select-native';
+
 // The value that means "has no value" for a select filter (#106).
 const filterNullValueFor = (field: TableField): string => field.filterNullValue ?? 'null';
 
@@ -1287,6 +1339,17 @@ const handleSelectFilterChange = (field: TableField, value: unknown) => {
     handleFilterChange(filterKeyFor(field), selected === FILTER_ALL_VALUE ? '' : selected);
 };
 
+// The model value for a `select-native` control. Unlike DAutocomplete (which
+// falls back to '' and shows its placeholder), a native <select> selects its
+// FIRST option when the bound value matches none — which would desync the
+// control from the model. So the "no filter" state must map to FILTER_ALL_VALUE,
+// the value carried by the "All …" option, so that option shows as selected.
+// This is the read-side mirror of the write-side translation
+// `handleSelectFilterChange` already does (FILTER_ALL_VALUE → '') — the sentinel
+// is handled in one conceptual place, not reinvented.
+const nativeSelectFilterValue = (field: TableField): string =>
+    (effectiveFilters.value[filterKeyFor(field)] as string) || FILTER_ALL_VALUE;
+
 // Multi-value select filter (#51): the autocomplete's array model maps
 // straight onto the filters entry; an emptied selection removes the entry.
 const multiFilterValueFor = (field: TableField): string[] => {
@@ -1362,7 +1425,7 @@ const derivedFilterOptions = computed<Record<string, FilterOption[]>>(() => {
     const optionsByFieldKey: Record<string, FilterOption[]> = {};
 
     for (const field of props.fields) {
-        if (field.filter !== 'select') continue;
+        if (!isSelectFilter(field)) continue;
         if (field.deriveFilterOptions === false) continue;
         // Explicit options win outright (see `getFieldFilterOptions`), so don't
         // spend a pass over every row producing a list nothing will read.
@@ -1435,8 +1498,10 @@ const getFieldFilterOptions = (field: TableField): FilterOption[] => {
     //
     // A `filterMultiple` column omits it (#51): "no filter" inside a
     // multi-select reads as a selectable value, and clearing is already
-    // discoverable there — remove the chips, or the ✕.
-    if (!field.filterMultiple) {
+    // discoverable there — remove the chips, or the ✕. `select-native` is the
+    // exception: it is ALWAYS single-select (it ignores `filterMultiple`), so it
+    // still needs the "All" reset option even when `filterMultiple` is set.
+    if (!field.filterMultiple || field.filter === 'select-native') {
         options.push({ value: FILTER_ALL_VALUE, text: filterAllLabelFor(field) });
     }
 
@@ -1751,7 +1816,7 @@ const shouldShowPerPageSelector = computed(() => {
 // mutually exclusive, so a client-side derived column can never appear here.
 const fieldsNeedingFilterValues = computed(() => {
     return props.fields
-        .filter(field => field.filter === 'select' && (!field.filterOptions || field.filterOptions.length === 0))
+        .filter(field => isSelectFilter(field) && (!field.filterOptions || field.filterOptions.length === 0))
         .map(field => filterKeyFor(field));
 });
 
@@ -2244,6 +2309,13 @@ const tablePassthroughProps = computed(() => ({
             ? `No ${pluralItemName.value} match your filters`
             : `No ${pluralItemName.value} found`),
     expandedItems: props.expandedItems,
+    // Row identity (#B16). Forwarded here rather than in `tableModeBindings`
+    // because it is mode-INDEPENDENT — it must key rows by value in provider,
+    // client-side AND inertia mode alike. `undefined` when unset, so bvn falls
+    // back to index keys (its default) and nothing changes for tables that don't
+    // opt in. Reaches BTable through DTable's `v-bind="$attrs"` (its prop is
+    // `primaryKey`); DTable needs no change.
+    primaryKey: props.primaryKey,
 }));
 // Computed: Singular and plural item names
 const singularItemName = computed(() => props.itemName);

package/resources/js/components/extended/DXTablePagination.vue

@@ -15,17 +15,32 @@
   once it lives in a child component — the scope-id doesn't cross the boundary.
   Anchoring the rules on this component's own `.dx-table-pagination` root (a
   plain element it owns) gives the scope-id a deterministic host.
+
+  In a row too narrow for the full windowed pager, the number strip collapses to
+  a "current / last" status with Previous/Next either side (#162). The decision
+  is CONTAINER-driven, not viewport-driven — see `compactThreshold`.
 -->
 <template>
     <div class="dx-table-pagination mt-3">
-        <!-- Top row: Pagination and Per-page selector -->
-        <div class="dx-pager-row d-flex justify-content-between align-items-center gap-2 mb-2">
+        <!-- Top row: Pagination and Per-page selector.
+             `containerRef` measures THIS row (the space the pager actually
+             competes for with the per-page selector) rather than the window —
+             a table narrowed by a sidebar or a modal is cramped even on a wide
+             viewport, which no media query can see. See `useContainerWidth`. -->
+        <div
+            ref="containerRef"
+            class="dx-pager-row d-flex justify-content-between align-items-center gap-2 mb-2"
+        >
             <!-- Windowed pager (#155): «Previous / leading / … / window / … /
                  trailing / Next». Client-computed from current + last page, so it
-                 works in every DXTable mode. Only shown when >1 page. -->
+                 works in every DXTable mode. Only shown when >1 page.
+                 In a row too narrow to lay the whole thing out, the number
+                 window collapses to a "current / last" status (#162) — see
+                 `isCompact`. -->
             <nav
                 v-if="showPagination && pagination.total > pagination.per_page"
                 class="dx-pager d-flex flex-wrap align-items-center gap-1"
+                :class="{ 'dx-pager--compact': isCompact }"
                 aria-label="Pagination"
             >
                 <DButton
@@ -35,7 +50,28 @@
                     @click="goToPage(currentPage - 1)"
                 >&laquo; Previous</DButton>
 
-                <template v-for="(item, index) in pageItems" :key="item.type === 'page' ? `p${item.page}` : `e${index}`">
+                <!-- Compact: one status in place of the whole number window.
+                     With no page buttons there is no `aria-current` to carry
+                     "you are here", so the position becomes a live `status`
+                     region — it is announced when paging changes it, which the
+                     numbered pager achieved through focus moving to the newly
+                     active button. The terse "11 / 45" is for the eye only
+                     (a screen reader would say "eleven slash forty-five"); the
+                     announced text is the visually-hidden long form. -->
+                <span
+                    v-if="isCompact"
+                    class="dx-pager-status small"
+                    role="status"
+                    aria-live="polite"
+                >
+                    <span class="visually-hidden">Page {{ currentPage }} of {{ lastPage }}</span>
+                    <span aria-hidden="true">{{ currentPage }} / {{ lastPage }}</span>
+                </span>
+
+                <template
+                    v-for="(item, index) in visiblePageItems"
+                    :key="item.type === 'page' ? `p${item.page}` : `e${index}`"
+                >
                     <DButton
                         v-if="item.type === 'page'"
                         size="sm"
@@ -94,6 +130,7 @@
 import { computed } from "vue";
 import DButton from "../base/DButton.vue";
 import DFormSelect from "../base/DFormSelect.vue";
+import { useContainerWidth } from "../../composables/useContainerWidth";
 import type { PaginationData } from "./DXTable.vue";
 
 interface Props {
@@ -115,9 +152,31 @@ interface Props {
     pluralItemName: string;
     /** Whether a column filter is active — gates the "Filtered from N" note. */
     hasActiveFilters: boolean;
+
+    /**
+     * Upper bound (px) on the pager ROW width at which the number window may
+     * collapse to the compact "current / last" status (#162). At or above it
+     * the full windowed pager always renders, whatever the page count.
+     *
+     * Default **576** — Bootstrap's `sm` breakpoint, i.e. the width the rest of
+     * the design system already treats as phone-sized. Its job is to GUARANTEE
+     * that a desktop-width table is never quietly downgraded: a 45-page window
+     * that doesn't quite fit at 800px should wrap (today's behaviour), not lose
+     * its numbers.
+     *
+     * Below it, compact engages only when the full pager genuinely would not
+     * fit on one line (see `fullPagerWidth`) — so a three-page pager still
+     * shows `1 2 3` on a phone, where "2 / 3" would be strictly worse.
+     *
+     * Measured on the ROW, not the viewport, so a table squeezed by a sidebar
+     * or inside a modal collapses even though the window is wide.
+     */
+    compactThreshold?: number;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    compactThreshold: 576,
+});
 
 const emit = defineEmits<{
     /** The user picked a page. Payload is the new 1-based page number. */
@@ -182,6 +241,71 @@ const pageItems = computed<PageItem[]>(() => {
   return items;
 });
 
+// Compact pager (#162). Container-driven, not viewport-driven — see the
+// `compactThreshold` prop.
+//
+// Approximate intrinsic widths of the pager's parts, in rem, mirroring this
+// component's own CSS and button labels: a page key is `min-width: 2.5rem`, the
+// row is `gap-1` (0.25rem), the ellipsis is a glyph plus 0.15rem side padding,
+// and "« Previous" + "Next »" together come to about 10rem at `.btn-sm`.
+// Deliberately an ESTIMATE, not a measurement: being wrong by a few px only
+// shifts the collapse by one page key, which is cosmetic — whereas measuring
+// the rendered strip would mean measuring the very thing this decision
+// removes, i.e. a feedback loop.
+const PAGE_KEY_REM = 2.5;
+const ITEM_GAP_REM = 0.25;
+const ELLIPSIS_REM = 1;
+const PREV_NEXT_REM = 10;
+
+/** px per rem, so a consumer scaling the root font size is tracked. */
+function rootFontSizePx(): number {
+  // Only ever reached in a browser (see `isCompact`), but stay SSR-safe.
+  if (typeof document === "undefined") return 16;
+  const size = Number.parseFloat(
+    getComputedStyle(document.documentElement).fontSize,
+  );
+  return Number.isFinite(size) && size > 0 ? size : 16;
+}
+
+/** Width the row needs to lay the full windowed pager out on ONE line. */
+const fullPagerWidth = computed(() => {
+  const remPx = rootFontSizePx();
+  let widthRem = PREV_NEXT_REM;
+  for (const item of pageItems.value) {
+    widthRem +=
+      (item.type === "page" ? PAGE_KEY_REM : ELLIPSIS_REM) + ITEM_GAP_REM;
+  }
+  return widthRem * remPx;
+});
+
+const { containerRef, hasMeasured, isBelow } = useContainerWidth({
+  // Compact means "narrower than the breakpoint AND too narrow for the full
+  // pager", which is exactly `width < min(threshold, needed)` — expressing it
+  // as one threshold rather than two conditions keeps the hysteresis below
+  // applied to the WHOLE decision instead of just half of it. A getter, so
+  // both a reactive `compactThreshold` and a changing page count re-evaluate
+  // instead of latching the mount-time value.
+  threshold: () => Math.min(props.compactThreshold, fullPagerWidth.value),
+  // The compact row is SHORTER than the wrapped full pager, so an ancestor with
+  // `overflow:auto` can lose its vertical scrollbar when we collapse, widening
+  // this row by ~15-17px, back over the threshold, and it flips forever. A band
+  // wider than any scrollbar makes the crossing one-way.
+  hysteresis: 24,
+});
+
+/**
+ * Gated on `hasMeasured` so an UNMEASURED render (the first frame, and every
+ * SSR render, where there is no `ResizeObserver`) is byte-identical to the
+ * pre-#162 full pager. `initialWidth` defaults to 0, i.e. "assume narrowest",
+ * which would otherwise make every desktop render start compact and flip.
+ */
+const isCompact = computed(() => hasMeasured.value && isBelow.value);
+
+/** Empty in compact mode — the status replaces the whole number window. */
+const visiblePageItems = computed<PageItem[]>(() =>
+  isCompact.value ? [] : pageItems.value,
+);
+
 const canPrev = computed(() => currentPage.value > 1);
 const canNext = computed(() => currentPage.value < lastPage.value);
 
@@ -223,6 +347,23 @@ const goToPage = (page: number) => {
     min-width: auto;
 }
 
+/* Compact pager status (#162): "11 / 45" standing in for the number window.
+   A plain element this component owns, so it needs no `:deep()`. It is not a
+   button — deliberately, since there is nothing to click — so it is styled to
+   read as a label rather than a disabled key. */
+.dx-pager--compact .dx-pager-status {
+    padding: 0 0.35rem;
+    color: var(--bs-secondary-color);
+    white-space: nowrap;
+    user-select: none;
+}
+
+/* Nothing can wrap in compact mode — the row is three items wide by design, and
+   a wrap here would defeat the whole point of collapsing it. */
+.dx-pager--compact {
+    flex-wrap: nowrap;
+}
+
 .dx-pager-ellipsis {
     display: inline-flex;
     align-items: flex-end;

package/resources/js/components/extended/DXTableShell.vue

@@ -17,16 +17,16 @@
   block, table, pagination — become direct children of `.card`, which is already
   a `flex-direction: column` container, so they still stack in order:
 
-      .card (overflow: hidden)
+      .card
       ├─ .card-header          (padded by Bootstrap's card-cap padding)
-      ├─ .table-responsive     ← FLUSH
+      ├─ .table-responsive     ← FLUSH, rounded when it is at a card corner
       │   └─ table
       └─ .dx-table-pagination  (pads itself — see DXTablePagination.vue)
 
   Bootstrap 5 has no `.card > .table` rounding rules (that was BS4), so the
-  clipping is done with `overflow: hidden` on the card: the flush table's square
-  top corners then follow the card's radius whether or not a header is present.
-  bvn's popups position `fixed` by default, so they are not clipped by it.
+  flush table's square corners have to be rounded here. The rounding is applied
+  to the TABLE REGION, never to the card: clipping the whole card would cut off
+  any non-teleported positioned content a consumer puts in a slot (#166).
 -->
 <template>
   <DCard v-if="card" no-body class="dx-table-card">
@@ -82,21 +82,56 @@ withDefaults(defineProps<Props>(), {
 */
 
 /*
-  Clip the card to its radius so the flush table's square corners follow the
-  border. Kept in this global block with the rest of the card-mode layout: a
+  Round the flush table region so its square corners follow the card border.
+
+  This used to be `overflow: hidden` on the WHOLE card, which clipped every
+  non-teleported positioned descendant — including a consumer's own
+  `position: absolute` popover in a `#header` or `cell(<key>)` slot (#166).
+  The clip now sits on the table region itself, and only on the corners the
+  region actually occupies: `.card-header` and `.dx-table-pagination` round the
+  corners themselves when they are present, so the radius is applied via
+  `:first-child` / `:last-child` rather than unconditionally. Vue renders a
+  false `v-if` as a comment node, which `:first-child` ignores, so the error
+  alert and spinner branches don't disturb the match.
+
+  These rules stay in this global block with the rest of the card-mode layout: a
   scoped rule WOULD reach DCard's root (the renderer walks the component-root
   chain), but that forwarding is the exact thing CLAUDE.md records as unreliable
   across build pipelines, and a silently-unclipped card is invisible in review.
   The lower specificity also leaves consumers free to override it.
+*/
+.dx-table-card > .table-responsive:first-child,
+.dx-table-card > .table:first-child {
+  border-top-left-radius: var(--bs-card-inner-border-radius);
+  border-top-right-radius: var(--bs-card-inner-border-radius);
+}
+
+.dx-table-card > .table-responsive:last-child,
+.dx-table-card > .table:last-child {
+  border-bottom-left-radius: var(--bs-card-inner-border-radius);
+  border-bottom-right-radius: var(--bs-card-inner-border-radius);
+}
+
+/*
+  `.table-responsive` needs NO `overflow` of its own: Bootstrap already gives it
+  `overflow-x: auto`, which computes `overflow-y` to `auto` as well, so it is
+  already a clipping context and the radius above rounds that clip. Measured in
+  a real browser (see DXTable-CardFlush.test.ts): without the radius a hit-test
+  3px inside the card's corner lands on a `<th>`; with it, on the card.
+  Do NOT add `overflow: hidden` here — it would kill the horizontal scrolling
+  that makes a wide table usable, and the flush look would survive to hide it.
 
-  KNOWN LIMITATION (#166): this clips the WHOLE card, so a consumer's own
-  non-teleported `position: absolute` overlay in a slot is cut off at the card
-  edge. dfl's own components are fine — DDropdown teleports to <body>, the
-  filter menus are `fixed` — so the residual case is a hand-rolled popover.
-  The fix is to move the radius clipping onto the flush table region, which
-  `.table-responsive`'s `overflow-x: auto` complicates; see the issue.
+  A bare `<table>` (`:responsive="false"`) is a different story: it is not a
+  clipping context, and `border-radius` on it leaves the collapsed-border cell
+  backgrounds square (measured — the corner still hit-tests to a `<th>`). That
+  one needs an explicit clip, scoped to the flush table so it is the table
+  region and not the card that clips. Note this restores the pre-0.35 behaviour
+  where a `:responsive="false"` table too wide for its card overflows visibly
+  rather than being silently cut off — that mode opts out of a scroll container
+  by definition.
 */
-.dx-table-card {
+.dx-table-card > .table:first-child,
+.dx-table-card > .table:last-child {
   overflow: hidden;
 }