cabloy 5.1.246 → 5.1.247

package/.cabloy-version

@@ -1 +1 @@
-5.1.246
+5.1.247

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 5.1.247
+
+### Improvements
+
+- Improve fixed table column behavior on mobile devices.
+
 ## 5.1.246
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cabloy",
-  "version": "5.1.246",
+  "version": "5.1.247",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A Node.js fullstack framework",
   "keywords": [

package/repo-docs/frontend/column-configuration-guide.md

@@ -29,6 +29,8 @@ A schema can pin a column to the `left`, `center`, or `right` region. The Move U
 
 A user cannot change a column's fixed region through Column Configuration. The row-selection column is also a runtime-generated column and is never saved in a personal layout.
 
+In Cabloy Basic, a table container narrower than `768px` temporarily disables actual column pinning and presents row operations through a compact popover. This does **not** change a column's schema-defined region or the reorder boundaries in Column Configuration. Saved widths, visibility, and order remain canonical; widening the container restores them. Responsive transitions do not save or reset the profile. Direct Basic `ZTable` consumers can set `compactBreakpoint` to another numeric threshold or `false` to disable this automatic presentation. See [Narrow-container behavior in Cabloy Basic](/frontend/table-guide#narrow-container-behavior-in-cabloy-basic).
+
 ## User workflow
 
 1. Sign in and open a resource list page.

package/repo-docs/frontend/table-guide.md

@@ -162,6 +162,30 @@ Schema metadata remains declarative: author `requiresSelection`, `selectedMaxIds
 
 Selection persists while paging the same result universe and during ordinary refetches. It clears on a material fixed-query change, filter submit/reset, sorting, page-size change, resource change, or a successful selection-consuming mutation. Page-size changes also return to page 1.
 
+## Narrow-container behavior in Cabloy Basic
+
+Cabloy Basic's `ZTable` owns a horizontal scroll container and observes its **available container width**, not the browser viewport or the table's scrollable content width. By default, a container narrower than `768px` uses compact presentation:
+
+- all columns, including row selection, temporarily stop being pinned;
+- `basic-table:actionOperationsRow` uses a compact column and a **More actions** popover instead of parallel buttons;
+- row actions retain their permission checks, confirmations, loading, duplicate-click protection, and error handling;
+- widening the container restores schema-defined pinning and the schema or personal-layout widths.
+
+This is a presentation override, not a schema or personal-layout mutation. Column visibility, order, and saved widths remain unchanged; resizing does not save or reset a layout. Sorting and selection also remain active.
+
+For direct Basic table consumers, configure the threshold or disable automatic compact presentation:
+
+```tsx
+import { ZTable } from 'zova-module-basic-table';
+
+<ZTable data={this.students} schema={this.schemaRow} compactBreakpoint={640} />;
+<ZTable data={this.students} schema={this.schemaRow} compactBreakpoint={false} />;
+```
+
+The default resource-page and details-table blocks inherit this behavior. DOM measurement starts after mounting and initial SSR hydration, so server HTML and the hydration-time initial render use the same presentation. The popover uses the browser's native Popover API to escape table overflow clipping; browsers without that API retain the existing inline actions rather than showing an unusable trigger.
+
+This automatic container policy belongs to the **Cabloy Basic UI adapter**. Do not assume Cabloy Start has the same presentation or breakpoint merely because the editions share the table engine.
+
 ## Step 3: Let schema metadata drive the default columns
 
 In the default path, `ZTable` reads table-scene metadata from the row schema.

package/repo-e2e/specs/cabloy-basic.spec.ts

@@ -482,6 +482,13 @@ function assertVisualOrder(geometry: IFieldGeometry[]) {
   }
 }
 
+function basicTableWrapper(page: Page) {
+  return page
+    .locator('div[data-table-compact]')
+    .filter({ has: page.locator('table') })
+    .first();
+}
+
 async function getDocumentHorizontalOverflow(page: Page) {
   return page.evaluate(() => {
     return (
@@ -877,7 +884,15 @@ test(
       await page.getByRole('link', { name: 'Student', exact: true }).click();
       await expect(page).toHaveURL(studentResourceUrl);
       await initialSelect;
-      await page.setViewportSize({ width: 800, height: 900 });
+      // Keep the container above the compact breakpoint while forcing real horizontal overflow.
+      const tableWrapper = basicTableWrapper(page);
+      await tableWrapper.evaluate(element => {
+        element.style.width = '800px';
+      });
+      await expect(tableWrapper).toHaveAttribute('data-table-compact', 'false');
+      expect(await tableWrapper.evaluate(element => element.clientWidth)).toBeGreaterThanOrEqual(
+        768,
+      );
 
       const nameSort = page.getByRole('button', { name: 'Sort by name', exact: true });
       const nameHeader = nameSort.locator('xpath=ancestor::th');
@@ -916,10 +931,6 @@ test(
       const ascendingUrl = new URL(ascending.url());
       expect(JSON.parse(ascendingUrl.searchParams.get('orders')!)).toEqual([['name', 'asc']]);
 
-      const tableWrapper = page
-        .locator('div.overflow-x-auto')
-        .filter({ has: page.locator('table') })
-        .first();
       await expect(tableWrapper).toBeVisible();
       const overflow = await tableWrapper.evaluate(element => {
         return element.scrollWidth > element.clientWidth;
@@ -984,15 +995,228 @@ test(
 );
 
 test(
-  'ATP-BASIC-TABLE-03: Training Student row delete handles cancellation, local failures, and retry',
-  { tag: ['@admin', '@flow'] },
+  'ATP-BASIC-TABLE-04: container resizing compacts row actions and narrow SSR reloads hydrate cleanly',
+  { tag: ['@admin', '@flow', '@ssr'] },
   async ({ page }) => {
+    test.setTimeout(120_000);
+    await page.setViewportSize({ width: 1440, height: 900 });
+    const pageErrors = collectPageErrors(page);
+    const consoleErrors = collectConsoleErrors(page);
+    const consoleWarnings: string[] = [];
+    page.on('console', message => {
+      if (
+        message.type() === 'warning' ||
+        /hydration.*mismatch|mismatch.*hydration/i.test(message.text())
+      ) {
+        consoleWarnings.push(message.text());
+      }
+    });
+    await loginAsAdmin(page);
+    await withDraftStudents(page, 1, async ([student]) => {
+      const initialSelect = waitForStudentSelect(page);
+      await page.getByRole('link', { name: 'Student', exact: true }).click();
+      await expect(page).toHaveURL(studentResourceUrl);
+      await initialSelect;
+      await page.getByLabel('Student Name').fill(student.name);
+      const filteredResponse = waitForStudentSelect(page);
+      await page.getByRole('button', { name: 'Search', exact: true }).click();
+      await filteredResponse;
+
+      const wrapper = basicTableWrapper(page);
+      const row = wrapper.locator('tbody tr').filter({
+        has: page.getByRole('link', { name: student.name, exact: true }),
+      });
+      const nameHeader = wrapper
+        .getByRole('button', { name: 'Sort by name', exact: true })
+        .locator('xpath=ancestor::th');
+      const operationsHeader = wrapper.getByRole('columnheader', {
+        name: 'Operations',
+        exact: true,
+      });
+      const operationsCell = row.locator('td').last();
+      const more = row.getByRole('button', { name: 'More actions', exact: true });
+      // CSS locators also see the mounted action group while the native popover is closed.
+      const actions = row.locator('[popover="auto"][role="group"][aria-label="Row actions"]');
+      await expect(row).toHaveCount(1);
+      await expect(wrapper).toHaveAttribute('data-table-compact', 'false');
+      await expect(nameHeader).toHaveCSS('position', 'sticky');
+      await expect(operationsHeader).toHaveCSS('min-width', '360px');
+
+      const profileWrites: string[] = [];
+      const observeProfileWrites = (request: Request) => {
+        const path = new URL(request.url()).pathname;
+        if (
+          (path === '/api/layoutprofile/save' || path === '/api/layoutprofile/reset') &&
+          !request.headers()['x-vona-openapi-schema']
+        ) {
+          profileWrites.push(`${request.method()} ${path}`);
+        }
+      };
+      page.on('request', observeProfileWrites);
+      try {
+        // The viewport stays desktop-sized: only the Basic table's own container changes.
+        for (const width of [360, 320]) {
+          await wrapper.evaluate((element, width) => {
+            element.style.width = `${width}px`;
+          }, width);
+          await expect(wrapper).toHaveAttribute('data-table-compact', 'true');
+          await expect.poll(() => wrapper.evaluate(element => element.clientWidth)).toBe(width);
+          expect(page.viewportSize()?.width).toBe(1440);
+          await expect
+            .poll(() =>
+              wrapper
+                .locator('th, td')
+                .evaluateAll(cells =>
+                  cells.every(cell => getComputedStyle(cell).position !== 'sticky'),
+                ),
+            )
+            .toBe(true);
+          await expect(operationsHeader).toHaveCSS('min-width', '80px');
+          await expect(operationsCell).toHaveCSS('min-width', '80px');
+          await expect
+            .poll(() =>
+              operationsCell.evaluate(element =>
+                Math.abs(element.getBoundingClientRect().width - 80),
+              ),
+            )
+            .toBeLessThanOrEqual(1);
+          await expect(more).toHaveCount(1);
+          await expect(row.getByRole('button')).toHaveCount(1);
+          await expect(actions).toHaveCount(1);
+          await expect(actions).toBeHidden();
+          await expect(actions.locator('button')).toHaveCount(4);
+          await wrapper.evaluate(element => {
+            element.scrollLeft = element.scrollWidth;
+          });
+          const reach = await wrapper.evaluate(element => ({
+            overflow: element.scrollWidth - element.clientWidth,
+            remaining: element.scrollWidth - element.clientWidth - element.scrollLeft,
+          }));
+          expect(reach.overflow).toBeGreaterThan(0);
+          expect(Math.abs(reach.remaining)).toBeLessThanOrEqual(1);
+          await expect(more).toBeInViewport();
+        }
+
+        // Clip below the first row so a normal descendant menu cannot pass this check.
+        await wrapper.evaluate(element => {
+          const table = element.querySelector('table')!;
+          const row = table.querySelector('tbody tr')!;
+          const height = row.getBoundingClientRect().bottom - table.getBoundingClientRect().top;
+          element.style.height = `${Math.ceil(height)}px`;
+          element.style.overflowY = 'hidden';
+        });
+        await more.click();
+        await expect(actions).toBeVisible();
+        await expect(more).toHaveAttribute('aria-expanded', 'true');
+        for (const label of ['Edit', 'Delete', 'Force Delete', 'Summary']) {
+          const action = actions.getByRole('button', { name: label, exact: true });
+          await expect(action).toBeVisible();
+          await expect(action).toHaveText(label);
+        }
+        const deleteAction = actions.getByRole('button', { name: 'Delete', exact: true });
+        const clipping = await deleteAction.evaluate(element => {
+          const wrapper = element.closest('[data-table-compact]')!;
+          const rect = element.getBoundingClientRect();
+          const clip = wrapper.getBoundingClientRect();
+          const x = rect.left + rect.width / 2;
+          const y = rect.top + rect.height / 2;
+          return {
+            outside: y > clip.bottom || y < clip.top || x < clip.left || x > clip.right,
+            hit: element.contains(document.elementFromPoint(x, y)),
+          };
+        });
+        expect(clipping).toEqual({ outside: true, hit: true });
+        await deleteAction.focus();
+        await page.keyboard.press('Escape');
+        await expect(actions).toBeHidden();
+        await expect(more).toHaveAttribute('aria-expanded', 'false');
+        await expect(more).toBeFocused();
+        await more.click();
+        await deleteAction.click();
+        await expect(actions).toBeHidden();
+        await expect(more).toHaveAttribute('aria-expanded', 'false');
+        const confirmDialog = page.getByRole('dialog').filter({
+          hasText: 'Are you sure you want to delete this item?',
+        });
+        await expect(confirmDialog).toBeVisible();
+        await confirmDialog.getByRole('button', { name: 'No', exact: true }).click();
+        await expect(confirmDialog).toHaveCount(0);
+        await expect(row).toHaveCount(1);
+
+        await more.click();
+        await actions.getByRole('button', { name: 'Summary', exact: true }).press('Enter');
+        await expect(actions).toBeHidden();
+        await expect(more).toHaveAttribute('aria-expanded', 'false');
+        const summaryDialog = page.getByRole('dialog').filter({
+          has: page.getByRole('heading', { name: 'Summary', exact: true }),
+        });
+        await expect(summaryDialog).toBeVisible();
+        await page.keyboard.press('Escape');
+        await expect(summaryDialog).toHaveCount(0);
+
+        await wrapper.evaluate(element => {
+          element.style.width = '800px';
+          element.style.removeProperty('height');
+          element.style.removeProperty('overflow-y');
+        });
+        await expect(wrapper).toHaveAttribute('data-table-compact', 'false');
+        await expect(nameHeader).toHaveCSS('position', 'sticky');
+        await expect(operationsHeader).toHaveCSS('position', 'sticky');
+        await expect(operationsHeader).toHaveCSS('min-width', '360px');
+        await expect(operationsCell).toHaveCSS('min-width', '360px');
+        await expect(more).toHaveCount(0);
+        await expect(row.getByRole('button')).toHaveCount(4);
+        expect(profileWrites).toEqual([]);
+
+        for (const width of [320, 390]) {
+          await page.setViewportSize({ width, height: 900 });
+          const response = await page.reload({ waitUntil: 'load' });
+          expect(response?.ok()).toBeTruthy();
+          await expect(page.locator('html')).toHaveAttribute('data-zova-hydrated', 'admin');
+          await expect(wrapper).toHaveAttribute('data-table-compact', 'true');
+          await expect.poll(() => getDocumentHorizontalOverflow(page)).toBeLessThanOrEqual(1);
+          await expect(
+            wrapper
+              .locator('tbody tr')
+              .first()
+              .getByRole('button', { name: 'More actions', exact: true }),
+          ).toHaveCount(1);
+        }
+        // Closing the cached Admin tab must unmount the table without ref teardown errors.
+        await page.setViewportSize({ width: 1440, height: 900 });
+        const studentTab = page.getByRole('tab', { name: 'Student', exact: true });
+        await studentTab.hover();
+        await studentTab.locator('.tab-close').click();
+        await expect(studentTab).toHaveCount(0);
+        await expect(wrapper).toHaveCount(0);
+        const reopenedSelect = waitForStudentSelect(page);
+        await page.getByRole('link', { name: 'Student', exact: true }).click();
+        await reopenedSelect;
+        await expect(wrapper).toBeVisible();
+        await expect(wrapper).toHaveAttribute('data-table-compact', 'false');
+        expect(profileWrites).toEqual([]);
+        expect(consoleWarnings).toEqual([]);
+        expect(consoleErrors).toEqual([]);
+        expect(pageErrors).toEqual([]);
+      } finally {
+        page.off('request', observeProfileWrites);
+      }
+    });
+  },
+);
+
+test(
+  'ATP-BASIC-TABLE-03: compact row delete handles cancellation, local failures, and retry',
+  { tag: ['@admin', '@flow'] },
+  async ({ page, request }) => {
     test.setTimeout(120_000);
     page.setDefaultTimeout(10_000);
     await page.setViewportSize({ width: 1440, height: 900 });
     const pageErrors = collectPageErrors(page);
     await loginAsAdmin(page);
 
+    let scenarioError: unknown;
+    let cleanupError: unknown;
     const studentName = `Row Delete E2E ${Date.now()}`;
     const accessToken = (await page.context().cookies()).find(
       cookie => cookie.name === 'token',
@@ -1019,14 +1243,30 @@ test(
       await page.getByRole('button', { name: 'Search', exact: true }).click();
       await filteredResponse;
 
-      const row = page.locator('tbody tr').filter({
+      await page.setViewportSize({ width: 390, height: 900 });
+      const wrapper = basicTableWrapper(page);
+      await expect(wrapper).toHaveAttribute('data-table-compact', 'true');
+      const row = wrapper.locator('tbody tr').filter({
         has: page.getByRole('link', { name: studentName, exact: true }),
       });
-      const deleteButton = row.locator('button.btn-outline.btn-error').first();
+      const more = row.getByRole('button', { name: 'More actions', exact: true });
+      const actions = row.locator('[popover="auto"][role="group"][aria-label="Row actions"]');
+      const deleteButton = actions.getByRole('button', {
+        name: 'Delete',
+        exact: true,
+        includeHidden: true,
+      });
+      const openActions = async () => {
+        if (!(await actions.isVisible())) await more.click();
+        await expect(actions).toBeVisible();
+        await expect(actions.locator('button')).toHaveCount(4);
+      };
       const confirmDialog = page.getByRole('dialog').filter({
         hasText: 'Are you sure you want to delete this item?',
       });
       await expect(row).toHaveCount(1);
+      await expect(actions).toBeHidden();
+      await openActions();
       await expect(deleteButton).toBeVisible();
 
       let cancelledRequestCount = 0;
@@ -1043,10 +1283,15 @@ test(
       page.on('request', cancelledRequestListener);
       try {
         await deleteButton.click();
+        await expect(actions).toBeHidden();
+        await expect(more).toHaveAttribute('aria-expanded', 'false');
         await expect(confirmDialog).toBeVisible();
         await confirmDialog.getByRole('button', { name: 'No', exact: true }).click();
         await expect(confirmDialog).toHaveCount(0);
         await expect(row).toHaveCount(1);
+        await openActions();
+        await expect(deleteButton).toBeEnabled();
+        await expect(deleteButton).not.toHaveAttribute('aria-busy', 'true');
         expect(cancelledRequestCount).toBe(0);
       } finally {
         page.off('request', cancelledRequestListener);
@@ -1058,25 +1303,59 @@ test(
         releaseFailedDelete = resolve;
       });
       const deleteRoute = (url: URL) => url.pathname === `/api/training/student/${studentId}`;
-      const failedDeleteHandler = async (route: Route) => {
+      const failedDeleteErrors: unknown[] = [];
+      const pendingFailedDeletes: Promise<void>[] = [];
+      const failedDeleteHandler = (route: Route) => {
         failureRequestCount++;
-        await failedDeleteHeld;
-        await route.fulfill({
-          status: 500,
-          contentType: 'application/json',
-          body: JSON.stringify({ code: 500, message: 'Row deletion temporarily unavailable' }),
+        const handled = (async () => {
+          await failedDeleteHeld;
+          await route.fulfill({
+            status: 500,
+            contentType: 'application/json',
+            body: JSON.stringify({ code: 500, message: 'Row deletion temporarily unavailable' }),
+          });
+        })().catch(error => {
+          // Report owned route failures after draining, not as detached Playwright errors.
+          failedDeleteErrors.push(error);
         });
+        pendingFailedDeletes.push(handled);
+        return handled;
       };
       await page.route(deleteRoute, failedDeleteHandler);
+      let failureScenarioError: unknown;
       try {
         await deleteButton.click();
         await confirmDialog.getByRole('button', { name: 'Yes', exact: true }).click();
         await expect.poll(() => failureRequestCount).toBe(1);
+        await expect(confirmDialog).toHaveCount(0);
+        await openActions();
         await expect(deleteButton).toBeDisabled();
         await expect(deleteButton).toHaveAttribute('aria-busy', 'true');
         await expect(deleteButton.locator('.loading.loading-spinner')).toHaveCount(1);
-        await deleteButton.click({ force: true });
-        await expect.poll(() => failureRequestCount).toBe(1);
+        const pendingDelete = await deleteButton.elementHandle();
+        expect(pendingDelete).not.toBeNull();
+        try {
+          await page.keyboard.press('Escape');
+          await expect(actions).toBeHidden();
+          await expect(more).toBeFocused();
+          // Closed native popovers hide, rather than replace, the running action component.
+          expect(await pendingDelete!.evaluate(element => element.isConnected)).toBe(true);
+          await expect(deleteButton).toBeDisabled();
+          await expect(deleteButton).toHaveAttribute('aria-busy', 'true');
+          await openActions();
+          expect(
+            await deleteButton.evaluate((element, pending) => element === pending, pendingDelete),
+          ).toBe(true);
+          await expect(deleteButton).toBeDisabled();
+          await expect(deleteButton.locator('.loading.loading-spinner')).toHaveCount(1);
+          await deleteButton.click({ force: true });
+          expect(failureRequestCount).toBe(1);
+          await page.keyboard.press('Escape');
+          await expect(actions).toBeHidden();
+          await expect(more).toBeFocused();
+        } finally {
+          await pendingDelete?.dispose();
+        }
 
         releaseFailedDelete?.();
         const errorDialog = page.getByRole('dialog').filter({
@@ -1090,10 +1369,37 @@ test(
         await expect(deleteButton).toBeEnabled();
         await expect(deleteButton).not.toHaveAttribute('aria-busy', 'true');
         await expect(deleteButton.locator('.loading.loading-spinner')).toHaveCount(0);
+        await openActions();
+        await expect(deleteButton).toBeEnabled();
+        await expect(deleteButton).not.toHaveAttribute('aria-busy', 'true');
+        await page.keyboard.press('Escape');
+        await expect(actions).toBeHidden();
+        await openActions();
+        await expect(deleteButton).toBeEnabled();
+        expect(failureRequestCount).toBe(1);
+      } catch (error) {
+        failureScenarioError = error;
       } finally {
         releaseFailedDelete?.();
-        await page.unroute(deleteRoute, failedDeleteHandler);
+        // A held route must finish before unroute can let that request continue.
+        for (let index = 0; index < pendingFailedDeletes.length; index++) {
+          await pendingFailedDeletes[index];
+        }
+        try {
+          await page.unroute(deleteRoute, failedDeleteHandler);
+        } catch (error) {
+          failedDeleteErrors.push(error);
+        }
       }
+      if (failedDeleteErrors.length) {
+        throw new AggregateError(
+          failureScenarioError === undefined
+            ? failedDeleteErrors
+            : [failureScenarioError, ...failedDeleteErrors],
+          'Compact row delete assertion or route cleanup failed',
+        );
+      }
+      if (failureScenarioError !== undefined) throw failureScenarioError;
 
       const deleteRequest = page.waitForRequest(request => {
         const url = new URL(request.url());
@@ -1123,21 +1429,37 @@ test(
       expect(refetch.ok()).toBeTruthy();
       await expect(row).toHaveCount(0);
       expect(pageErrors).toEqual([]);
+    } catch (error) {
+      scenarioError = error;
     } finally {
       if (studentId !== undefined) {
-        const deleteResponse = await page.request.delete(
-          `/api/training/student/deleteForce/${studentId}`,
-          {
-            headers,
-            timeout: 10_000,
-          },
+        try {
+          const deleteResponse = await request.delete(
+            `/api/training/student/deleteForce/${studentId}`,
+            {
+              headers,
+              timeout: 10_000,
+            },
+          );
+          expect(
+            deleteResponse.ok() || deleteResponse.status() === 404,
+            `Failed to clean up Training Student ${studentName} (${studentId}): ${deleteResponse.status()}`,
+          ).toBeTruthy();
+        } catch (error) {
+          cleanupError = error;
+        }
+      }
+    }
+    if (cleanupError !== undefined) {
+      if (scenarioError !== undefined) {
+        throw new AggregateError(
+          [scenarioError, cleanupError],
+          'Compact row delete assertion and owned fixture cleanup failed',
         );
-        expect(
-          deleteResponse.ok() || deleteResponse.status() === 404,
-          `Failed to clean up Training Student ${studentName} (${studentId}): ${deleteResponse.status()}`,
-        ).toBeTruthy();
       }
+      throw cleanupError;
     }
+    if (scenarioError !== undefined) throw scenarioError;
   },
 );
 

package/zova/packages-zova/zova/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova",
-  "version": "5.1.177",
+  "version": "5.1.178",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A vue3 framework with ioc",
   "keywords": [
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "zova-core": "^5.1.95",
-    "zova-suite-a-zova": "^5.1.176"
+    "zova-suite-a-zova": "^5.1.177"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",

package/zova/src/suite/cabloy-basic/modules/basic-date/src/component/dateRange/controller.tsx

@@ -21,6 +21,7 @@ export class ControllerDateRange extends BeanControllerBase {
     this.modelValue = this.$useModel('modelValue');
     this.cSeparator = this.$style({
       width: '20px',
+      flexShrink: 0,
       display: 'inline-block',
       textAlign: 'center',
     });
@@ -29,9 +30,9 @@ export class ControllerDateRange extends BeanControllerBase {
   protected render() {
     const [dateStartStr, dateEndStr] = this._parseValue(this.modelValue);
     return (
-      <div>
+      <div class="inline-flex min-w-0 max-w-full items-center">
         <input
-          style={{ width: '130px' }}
+          style={{ width: '130px', minWidth: 0 }}
           type="date"
           value={dateStartStr}
           onInput={e => {
@@ -41,7 +42,7 @@ export class ControllerDateRange extends BeanControllerBase {
         />
         <div class={this.cSeparator}>{this.$props.separator}</div>
         <input
-          style={{ width: '130px' }}
+          style={{ width: '130px', minWidth: 0 }}
           type="date"
           value={dateEndStr}
           onInput={e => {

package/zova/src/suite/cabloy-basic/modules/basic-date/src/component/formFieldDateRange/controller.tsx

@@ -30,7 +30,19 @@ export class ControllerFormFieldDateRange extends BeanControllerBase {
   cContainer: string;
 
   protected async __init__() {
-    this.cContainer = this.$style({ width: 'auto' });
+    this.cContainer = this.$style({
+      width: 'auto',
+      maxWidth: '100%',
+      $nest: {
+        '&.input': {
+          height: 'auto',
+          minHeight: 'var(--size)',
+          flexWrap: 'wrap',
+          paddingTop: '0.5rem',
+          paddingBottom: '0.5rem',
+        },
+      },
+    });
   }
 
   protected render() {

package/zova/src/suite/cabloy-basic/modules/basic-details/src/component/blockTable/controller.tsx

@@ -17,7 +17,7 @@ export interface ControllerBlockTableProps extends IResourceBlockOptionsBase {}
 @Controller()
 export class ControllerBlockTable<TData extends {} = {}> extends BeanControllerBase {
   static $propsDefault = {
-    class: 'overflow-x-auto rounded-box border border-base-content/15 bg-base-100',
+    class: 'min-w-0 rounded-box border border-base-content/15 bg-base-100',
   };
 
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockTable/controller.tsx

@@ -17,7 +17,7 @@ export interface ControllerBlockTableProps extends IResourceBlockOptionsBase {}
 @Controller()
 export class ControllerBlockTable<TData extends {} = {}> extends BeanControllerBase {
   static $propsDefault = {
-    class: 'overflow-x-auto rounded-box border border-base-content/15 bg-base-100',
+    class: 'min-w-0 rounded-box border border-base-content/15 bg-base-100',
   };
 
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };

package/zova/src/suite/cabloy-basic/modules/basic-table/src/.metadata/component/rowOperations.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerRowOperationsProps } from '../../component/rowOperations/controller.tsx';
+
+import { ControllerRowOperations } from '../../component/rowOperations/controller.tsx';
+export type ZRowOperationsProps = {
+  controllerRef?: (ref: ControllerRowOperations) => void;
+} & ControllerRowOperationsProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerRowOperationsProps,
+  keyof typeof ControllerRowOperations.$propsDefault
+>;
+declare module 'zova-module-basic-table' {
+  export interface ControllerRowOperations {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZRowOperations = defineComponent((_props: ZRowOperationsProps) => {
+  useController(ControllerRowOperations, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions());
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-table:rowOperations': ControllerRowOperationsProps;
+  }
+}