Polish tablet expanded table zoom

Author: bt1142msstate

tests/browser/browserSmoke.mjs

@@ -1880,6 +1880,42 @@ async function exerciseTabletLandscapeMobileParity(page, queryApiStub) {
   await expectMobileScrollLockReleased(page, 'Tablet landscape export dialog');
   await cleanupMobilePageScroll(page);
 
+  await page.locator('[data-mobile-table-action-target="table-expand-btn"]').click();
+  await page.waitForFunction(() => document.body.classList.contains('table-expanded-open'), null, { timeout: 5000 });
+  await expectElementWithinViewport(page, '#table-shell.table-shell-expanded', 'Tablet landscape expanded table');
+  const tabletExpandedTableMetrics = await page.locator('#table-shell.table-shell-expanded').evaluate(shell => {
+    const topBar = shell.querySelector('#table-top-bar');
+    const container = shell.querySelector('#table-container');
+    const table = shell.querySelector('#example-table');
+    const topBarRect = topBar?.getBoundingClientRect();
+    const containerRect = container?.getBoundingClientRect();
+    const tableRect = table?.getBoundingClientRect();
+    const shellRect = shell.getBoundingClientRect();
+    return {
+      containerHeight: containerRect?.height || 0,
+      containerTop: containerRect?.top || 0,
+      containerWidth: containerRect?.width || 0,
+      shellBottomGap: Math.abs(window.innerHeight - (shellRect?.bottom || 0)),
+      shellTop: shellRect?.top || 0,
+      tableWidth: tableRect?.width || 0,
+      tableZoom: shell.style.getPropertyValue('--table-zoom') || '',
+      topBarHeight: topBarRect?.height || 0,
+      viewportHeight: window.innerHeight
+    };
+  });
+  if (
+    tabletExpandedTableMetrics.tableZoom !== '1.00'
+    || tabletExpandedTableMetrics.topBarHeight > 70
+    || tabletExpandedTableMetrics.containerHeight < tabletExpandedTableMetrics.viewportHeight - 110
+    || tabletExpandedTableMetrics.tableWidth > tabletExpandedTableMetrics.containerWidth + 4
+    || tabletExpandedTableMetrics.shellTop > 10
+    || tabletExpandedTableMetrics.shellBottomGap > 10
+  ) {
+    throw new Error(`Tablet landscape expanded table should keep mobile chrome while using full tablet table zoom: ${JSON.stringify(tabletExpandedTableMetrics)}`);
+  }
+  await page.locator('#table-expand-btn').click();
+  await page.waitForFunction(() => !document.body.classList.contains('table-expanded-open'), null, { timeout: 5000 });
+
   await page.locator('#mobile-builder-toggle').click();
   await page.waitForFunction(() => document.querySelector('#mobile-builder-drawer')?.classList.contains('is-open'), null, { timeout: 5000 });
   const builderMetrics = await page.evaluate(() => {

ui/queryUI.js

@@ -43,6 +43,20 @@ function isMobileTableViewport() {
     && window.matchMedia('(max-width: 1180px)').matches;
 }
 
+function isTabletWidthMobileViewport() {
+  return typeof window !== 'undefined'
+    && typeof window.matchMedia === 'function'
+    && window.matchMedia('(min-width: 700px) and (max-width: 1180px)').matches;
+}
+
+function getResponsiveExpandedTableZoomLimit() {
+  if (!isMobileTableViewport()) {
+    return null;
+  }
+
+  return isTabletWidthMobileViewport() ? 1 : 0.9;
+}
+
 function getConfiguredFilterCount() {
   return Object.values(getActiveFilters()).reduce((total, data) => {
     return total + (data && Array.isArray(data.filters) ? data.filters.length : 0);
@@ -407,10 +421,18 @@ function updateTableChromeState() {
 
   const expanded = tableShell.classList.contains('table-shell-expanded');
   const isMobileViewport = isMobileTableViewport();
-  if (expanded && isMobileViewport && getTableZoom() > 0.9) {
-    tableShell.dataset.zoom = '0.90';
+  const responsiveExpandedZoom = expanded ? getResponsiveExpandedTableZoomLimit() : null;
+  const currentZoom = getTableZoom();
+  if (
+    responsiveExpandedZoom !== null
+    && (
+      currentZoom > responsiveExpandedZoom
+      || tableShell.dataset.responsiveMobileZoom === 'true'
+    )
+  ) {
+    tableShell.dataset.zoom = responsiveExpandedZoom.toFixed(2);
     tableShell.dataset.responsiveMobileZoom = 'true';
-  } else if (expanded && !isMobileViewport && tableShell.dataset.responsiveMobileZoom === 'true') {
+  } else if (expanded && responsiveExpandedZoom === null && tableShell.dataset.responsiveMobileZoom === 'true') {
     tableShell.dataset.zoom = '1.00';
     delete tableShell.dataset.responsiveMobileZoom;
   } else if (!expanded) {
@@ -478,8 +500,10 @@ function toggleTableExpanded(forceExpanded) {
   tableShell.classList.toggle('table-shell-expanded', expanded);
   document.body.classList.toggle('table-expanded-open', expanded);
 
-  if (expanded && isMobileTableViewport() && getTableZoom() > 0.9) {
-    tableShell.dataset.zoom = '0.90';
+  const responsiveExpandedZoom = expanded ? getResponsiveExpandedTableZoomLimit() : null;
+  if (responsiveExpandedZoom !== null && getTableZoom() > responsiveExpandedZoom) {
+    tableShell.dataset.zoom = responsiveExpandedZoom.toFixed(2);
+    tableShell.dataset.responsiveMobileZoom = 'true';
   }
 
   if (!expanded) {