yummy-guide-generic-administrate 0.8.0 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b23f3b7fd7d17420fdeaf7325f51f1f70b93fb86497bcdb6621b617b5086d926
-  data.tar.gz: 38004b14e38a03b882d6e84253fc63ad1a2e8480ab287ee27ced1d13e81239a7
+  metadata.gz: e0c5692ebb60bfcc4d51157cdca7e52f974523f546c0d75ab5e3b350815a5316
+  data.tar.gz: 9f398e159619da8c35955fcaaa0a2d2c7a1df5249154486c95326a5fe99e6b1d
 SHA512:
-  metadata.gz: ecc7d99ccc8f23f5b4d0dd9288a9d6f870f95dc9c2d19256865828fa9a3d1f10d322fd37d627d2e85d648e13ab1fb128fb2d0430035451147fa2f4b72739bbb4
-  data.tar.gz: 05b2097517ad48edd1e8f54230bd3f2d1ea5e591dccc733d0397e1ec89d7d3b855920066296b4119c6c4b7b46572413ca07730dae2663e584cf403d1bc0f6cc9
+  metadata.gz: 92ea6916e4083ad8dc0301f48df920d11f63a7f028846fbbdd6d9886b7b29eb30f0e812e2fa413b8db23de600050460867ec9a93d0d799124032619cc552b3fb
+  data.tar.gz: 688558efd455e8a364b0a7a070e2f088fdd4adb6684a4b143e37438cd8a5d8192f49918d834afba7478851b075c1984570e5d6666bdd04850f229167102a03fe

data/app/assets/javascripts/yummy_guide_administrate/column_resizer.js

@@ -4,21 +4,24 @@
   var HEADER_CLASS = 'admin-column-resizer__header';
   var TABLE_CLASS = 'admin-column-resizer__table';
   var DRAGGING_BODY_CLASS = 'admin-column-resizer--dragging';
+  var APPLYING_BODY_CLASS = 'admin-column-resizer--applying';
+  var PREVIEW_CLASS = 'admin-column-resizer__preview';
   var FIXED_HEADER_TABLE_CLASS = 'table-fixed-header__table';
+  var ADJUSTED_COLUMNS_ATTRIBUTE = 'data-admin-column-resizer-adjusted-columns';
   var STORAGE_PREFIX = 'yummyGuideAdminColumnWidths:v1:';
   var STYLE_ELEMENT_ID = 'admin-column-resizer-rules';
   var WIDTH_VAR_PREFIX = '--admin-column-resizer-col-';
   var MIN_WIDTH = 48;
-  var STICKY_REFRESH_INTERVAL = 120;
 
   var dragState = null;
-  var dragApplyFrame = null;
+  var dragPreviewFrame = null;
+  var widthApplyFrame = null;
   var generatedRuleCount = 0;
   var initializedHandles = new WeakSet();
   var tableStates = new WeakMap();
   var stickyRefreshFrame = null;
-  var stickyRefreshTimer = null;
-  var lastStickyRefreshAt = 0;
+  var stickyRefreshCallbacks = [];
+  var applyingWidth = false;
 
   function storageScopeForTable(table) {
     var sourceTable = matchingSourceTable(table);
@@ -74,6 +77,10 @@
     return preciseNumber(rectWidth || element.offsetWidth || 0);
   }
 
+  function viewportHeight() {
+    return window.innerHeight || document.documentElement.clientHeight || 0;
+  }
+
   function normalizedIdentifier(value) {
     return (value || '').toString().trim().toLowerCase()
       .replace(/[^a-z0-9]+/g, '_')
@@ -169,13 +176,22 @@
   function columnRule(index) {
     var nthChild = index + 1;
     var variableName = columnWidthVariable(index);
-    var selector = [
-      '.' + TABLE_CLASS + ' > thead > tr > :nth-child(' + nthChild + ')',
-      '.' + TABLE_CLASS + ' > tbody > tr > :nth-child(' + nthChild + ')',
-      '.' + TABLE_CLASS + ' > tfoot > tr > :nth-child(' + nthChild + ')'
-    ].join(', ');
+    var adjustedTableSelector = '.' + TABLE_CLASS + '[' + ADJUSTED_COLUMNS_ATTRIBUTE + '~="' + nthChild + '"]';
+    var selectors = [
+      adjustedTableSelector + ' > thead > tr > :nth-child(' + nthChild + ')',
+      adjustedTableSelector + ' > tbody > tr > :nth-child(' + nthChild + ')',
+      adjustedTableSelector + ' > tfoot > tr > :nth-child(' + nthChild + ')'
+    ];
+    var selector = selectors.join(', ');
+
+    var contentSelector = selectors.concat(selectors.map(function(cellSelector) {
+      return cellSelector + ' *';
+    })).join(', ');
 
-    return selector + ' { box-sizing: border-box !important; width: var(' + variableName + ') !important; min-width: var(' + variableName + ') !important; max-width: var(' + variableName + ') !important; }';
+    return [
+      selector + ' { box-sizing: border-box !important; width: var(' + variableName + ') !important; min-width: var(' + variableName + ') !important; max-width: var(' + variableName + ') !important; }',
+      contentSelector + ' { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; }'
+    ].join('\n');
   }
 
   function ensureStyleElement() {
@@ -315,6 +331,33 @@
     colgroup.children[index].style.width = widthValue;
   }
 
+  function adjustedColumnIndexes(table) {
+    return (table.getAttribute(ADJUSTED_COLUMNS_ATTRIBUTE) || '')
+      .split(/\s+/)
+      .filter(Boolean);
+  }
+
+  function setAdjustedColumn(table, index, adjusted) {
+    var indexToken = (index + 1).toString();
+    var indexes = adjustedColumnIndexes(table).filter(function(candidate, candidateIndex, candidates) {
+      return candidate !== indexToken && candidates.indexOf(candidate) === candidateIndex;
+    });
+
+    if (adjusted) {
+      indexes.push(indexToken);
+      indexes.sort(function(left, right) {
+        return parseInt(left, 10) - parseInt(right, 10);
+      });
+    }
+
+    if (indexes.length === 0) {
+      table.removeAttribute(ADJUSTED_COLUMNS_ATTRIBUTE);
+      return;
+    }
+
+    table.setAttribute(ADJUSTED_COLUMNS_ATTRIBUTE, indexes.join(' '));
+  }
+
   function clearColgroupWidth(table, columnCount, index) {
     var colgroup = ensureManagedColgroup(table, columnCount);
     if (!colgroup || !colgroup.children[index]) return;
@@ -329,6 +372,7 @@
 
     var widthValue = cssPixelValue(width);
     table.style.setProperty(columnWidthVariable(index), widthValue);
+    setAdjustedColumn(table, index, true);
     applyColgroupWidth(table, state.columnCount, index, widthValue);
   }
 
@@ -338,6 +382,7 @@
     if (!state || index === undefined) return;
 
     table.style.removeProperty(columnWidthVariable(index));
+    setAdjustedColumn(table, index, false);
     clearColgroupWidth(table, state.columnCount, index);
   }
 
@@ -381,26 +426,23 @@
 
   function dispatchStickyRefresh() {
     stickyRefreshFrame = null;
-    lastStickyRefreshAt = Date.now();
     window.dispatchEvent(new Event('resize'));
-  }
 
-  function scheduleStickyRefresh(immediate) {
-    if (stickyRefreshFrame || stickyRefreshTimer) return;
+    var callbacks = stickyRefreshCallbacks;
+    stickyRefreshCallbacks = [];
+    callbacks.forEach(function(callback) {
+      callback();
+    });
+  }
 
-    var elapsed = Date.now() - lastStickyRefreshAt;
-    var delay = immediate ? 0 : Math.max(0, STICKY_REFRESH_INTERVAL - elapsed);
+  function scheduleStickyRefresh(callback) {
+    if (callback) {
+      stickyRefreshCallbacks.push(callback);
+    }
 
-    stickyRefreshTimer = window.setTimeout(function() {
-      stickyRefreshTimer = null;
-      stickyRefreshFrame = window.requestAnimationFrame(dispatchStickyRefresh);
-    }, delay);
-  }
+    if (stickyRefreshFrame) return;
 
-  function columnNeedsDragRefresh(header) {
-    return header.classList.contains('sticky') ||
-      header.classList.contains('sticky-left') ||
-      header.classList.contains('actions-column');
+    stickyRefreshFrame = window.requestAnimationFrame(dispatchStickyRefresh);
   }
 
   function sourceTableForHandle(handle) {
@@ -419,34 +461,191 @@
     }) || matchingSourceTable(table) || null;
   }
 
-  function flushDragWidth() {
+  function previewBoundsForTable(table, header) {
+    var headerRect = header.getBoundingClientRect();
+    var tableRect = table.getBoundingClientRect();
+    var scrollContainer = table.closest('.sticky-table-scroll, .scroll-table, .home-table__wrapper');
+    var scrollRect = scrollContainer ? scrollContainer.getBoundingClientRect() : tableRect;
+    var headerTable = header.closest(TABLE_SELECTOR);
+    var fromFixedHeader = headerTable && headerTable.classList.contains(FIXED_HEADER_TABLE_CLASS);
+    var viewportBottom = viewportHeight();
+    var top = fromFixedHeader ? headerRect.top : Math.max(tableRect.top, scrollRect.top);
+    var bottom = Math.min(viewportBottom, Math.max(tableRect.bottom, scrollRect.bottom, headerRect.bottom));
+
+    top = Math.max(0, Math.min(top, viewportBottom));
+    if (bottom <= top) {
+      bottom = Math.min(viewportBottom, top + Math.max(headerRect.height, 32));
+    }
+
+    return {
+      left: headerRect.left,
+      top: top,
+      height: Math.max(32, bottom - top)
+    };
+  }
+
+  function updateDragPreview(preview, width) {
+    if (!preview) return;
+
+    preview.element.style.width = cssPixelValue(width);
+  }
+
+  function createDragPreview(table, header, width) {
+    var bounds = previewBoundsForTable(table, header);
+    var element = document.createElement('div');
+
+    element.className = PREVIEW_CLASS;
+    element.setAttribute('aria-hidden', 'true');
+    element.style.left = cssPixelValue(bounds.left);
+    element.style.top = cssPixelValue(bounds.top);
+    element.style.height = cssPixelValue(bounds.height);
+
+    document.body.appendChild(element);
+
+    var preview = {
+      element: element
+    };
+    updateDragPreview(preview, width);
+
+    return preview;
+  }
+
+  function removePreview(preview) {
+    if (!preview) return;
+
+    preview.element.remove();
+  }
+
+  function removeDragPreview() {
+    if (!dragState || !dragState.preview) return;
+
+    removePreview(dragState.preview);
+    dragState.preview = null;
+  }
+
+  function flushDragPreview() {
     if (!dragState) return;
 
-    if (dragApplyFrame) {
-      window.cancelAnimationFrame(dragApplyFrame);
-      dragApplyFrame = null;
+    if (dragPreviewFrame) {
+      window.cancelAnimationFrame(dragPreviewFrame);
+      dragPreviewFrame = null;
+    }
+
+    updateDragPreview(dragState.preview, dragState.currentWidth || dragState.startWidth);
+  }
+
+  function releaseDragPointerCapture() {
+    if (!dragState || !dragState.handle || dragState.pointerId === null || typeof dragState.pointerId === 'undefined') return;
+    if (!dragState.handle.releasePointerCapture) return;
+
+    try {
+      dragState.handle.releasePointerCapture(dragState.pointerId);
+    } catch (_error) {
+      // The pointer may already be released by the browser after cancellation.
     }
+  }
+
+  function captureDragPointer(handle, event) {
+    if (!handle.setPointerCapture || event.pointerId === null || typeof event.pointerId === 'undefined') return;
 
-    applyColumnWidth(dragState.columnId, dragState.currentWidth || dragState.startWidth, dragState.storageKey);
+    try {
+      handle.setPointerCapture(event.pointerId);
+    } catch (_error) {
+      // Pointer capture is an enhancement for touch/pen dragging; document listeners remain as fallback.
+    }
+  }
+
+  function eventMatchesDragPointer(event) {
+    return !event ||
+      dragState.pointerId === null ||
+      typeof dragState.pointerId === 'undefined' ||
+      event.pointerId === dragState.pointerId;
+  }
+
+  function pointerCanStartDrag(event) {
+    if (event.isPrimary === false) return false;
+
+    return event.pointerType !== 'mouse' || event.button === 0;
   }
 
   function scheduleDragWidth(width) {
     dragState.currentWidth = width;
     dragState.moved = dragState.moved || Math.abs(width - dragState.startWidth) > 2;
 
-    if (dragApplyFrame) return;
+    if (dragPreviewFrame) return;
 
-    dragApplyFrame = window.requestAnimationFrame(function() {
-      dragApplyFrame = null;
+    dragPreviewFrame = window.requestAnimationFrame(function() {
+      dragPreviewFrame = null;
       if (!dragState) return;
 
-      applyColumnWidth(dragState.columnId, dragState.currentWidth, dragState.storageKey);
-      if (dragState.refreshDuringDrag) scheduleStickyRefresh(false);
+      updateDragPreview(dragState.preview, dragState.currentWidth);
+    });
+  }
+
+  function refreshStickyHeaderColumn(pendingWidth, callback) {
+    var api = window.YummyGuideAdministrateStickyTableHeaders;
+
+    if (api && typeof api.refreshColumnWidth === 'function') {
+      var refreshed = api.refreshColumnWidth({
+        sourceTable: pendingWidth.sourceTable,
+        columnId: pendingWidth.columnId,
+        width: pendingWidth.width
+      });
+
+      if (refreshed) {
+        window.requestAnimationFrame(callback);
+        return;
+      }
+    }
+
+    scheduleStickyRefresh(callback);
+  }
+
+  function refreshStickyLeftColumns(sourceTable) {
+    var api = window.YummyGuideAdministrateStickyLeftColumns;
+
+    if (api && typeof api.refreshTable === 'function') {
+      api.refreshTable(sourceTable);
+    }
+  }
+
+  function stopApplyingWidth(preview) {
+    removePreview(preview);
+    applyingWidth = false;
+    document.body.classList.remove(APPLYING_BODY_CLASS);
+  }
+
+  function applyPendingWidth(pendingWidth) {
+    try {
+      var widths = safeReadWidths(pendingWidth.storageKey);
+      applyColumnWidth(pendingWidth.columnId, pendingWidth.width, pendingWidth.storageKey);
+      widths[pendingWidth.columnId] = preciseNumber(pendingWidth.width);
+      safeWriteWidths(pendingWidth.storageKey, widths);
+      refreshStickyLeftColumns(pendingWidth.sourceTable);
+      refreshStickyHeaderColumn(pendingWidth, function() {
+        stopApplyingWidth(pendingWidth.preview);
+      });
+    } catch (error) {
+      stopApplyingWidth(pendingWidth.preview);
+      throw error;
+    }
+  }
+
+  function schedulePendingWidthApply(pendingWidth) {
+    applyingWidth = true;
+    document.body.classList.add(APPLYING_BODY_CLASS);
+
+    widthApplyFrame = window.requestAnimationFrame(function() {
+      widthApplyFrame = window.requestAnimationFrame(function() {
+        widthApplyFrame = null;
+        applyPendingWidth(pendingWidth);
+      });
     });
   }
 
   function startDrag(event) {
-    if (event.button !== 0) return;
+    if (!pointerCanStartDrag(event)) return;
+    if (applyingWidth || widthApplyFrame) return;
 
     var handle = event.currentTarget;
     var header = handle.closest('th');
@@ -459,8 +658,11 @@
     if (!sourceTable) return;
 
     var sourceHeader = columnHeader(sourceTable, columnId) || header;
-    var startWidth = measuredWidth(sourceHeader) || measuredWidth(header);
+    var sourceHeaderWidth = measuredWidth(sourceHeader);
+    var handleHeaderWidth = measuredWidth(header);
+    var startWidth = sourceHeaderWidth || handleHeaderWidth;
     if (!startWidth) return;
+    var previewHeader = sourceHeaderWidth ? sourceHeader : header;
 
     event.preventDefault();
     event.stopPropagation();
@@ -471,10 +673,14 @@
       startX: event.clientX,
       startWidth: startWidth,
       currentWidth: startWidth,
+      pointerId: event.pointerId,
+      handle: handle,
+      sourceTable: sourceTable,
       moved: false,
-      refreshDuringDrag: columnNeedsDragRefresh(sourceHeader)
+      preview: createDragPreview(sourceTable, previewHeader, startWidth)
     };
 
+    captureDragPointer(handle, event);
     document.body.classList.add(DRAGGING_BODY_CLASS);
     document.addEventListener('pointermove', handleDragMove);
     document.addEventListener('pointerup', finishDrag);
@@ -483,6 +689,7 @@
 
   function handleDragMove(event) {
     if (!dragState) return;
+    if (!eventMatchesDragPointer(event)) return;
 
     event.preventDefault();
 
@@ -491,24 +698,29 @@
 
   function finishDrag(event) {
     if (!dragState) return;
+    if (!eventMatchesDragPointer(event)) return;
 
     if (event) {
       event.preventDefault();
     }
 
-    flushDragWidth();
+    flushDragPreview();
 
-    var widths = safeReadWidths(dragState.storageKey);
-    var width = Math.max(MIN_WIDTH, dragState.currentWidth || dragState.startWidth);
-    widths[dragState.columnId] = preciseNumber(width);
-    safeWriteWidths(dragState.storageKey, widths);
+    var pendingWidth = {
+      columnId: dragState.columnId,
+      storageKey: dragState.storageKey,
+      sourceTable: dragState.sourceTable,
+      width: Math.max(MIN_WIDTH, dragState.currentWidth || dragState.startWidth),
+      preview: dragState.preview
+    };
 
+    releaseDragPointerCapture();
     dragState = null;
     document.body.classList.remove(DRAGGING_BODY_CLASS);
     document.removeEventListener('pointermove', handleDragMove);
     document.removeEventListener('pointerup', finishDrag);
     document.removeEventListener('pointercancel', finishDrag);
-    scheduleStickyRefresh(true);
+    schedulePendingWidthApply(pendingWidth);
   }
 
   function resetColumn(event) {
@@ -528,7 +740,7 @@
     delete widths[columnId];
     safeWriteWidths(key, widths);
     clearColumnWidth(columnId, key);
-    scheduleStickyRefresh(true);
+    scheduleStickyRefresh();
   }
 
   function stopHandleClick(event) {

data/app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js

@@ -2,6 +2,7 @@
   var TABLE_SELECTOR = "table[data-fixed-columns-count]";
   var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
   var resizeObservers = new WeakMap();
+  var suppressedResizeTables = new WeakMap();
 
   function directCells(row) {
     return Array.from(row.children).filter(function(cell) {
@@ -100,11 +101,41 @@
     });
   }
 
+  function suppressResizeApply(table) {
+    if (!table) return;
+
+    var token = (suppressedResizeTables.get(table) || 0) + 1;
+    suppressedResizeTables.set(table, token);
+
+    window.setTimeout(function() {
+      if (suppressedResizeTables.get(table) === token) {
+        suppressedResizeTables.delete(table);
+      }
+    }, 250);
+  }
+
+  function resizeApplySuppressed(table) {
+    return suppressedResizeTables.has(table);
+  }
+
+  function refreshTable(table) {
+    if (!table) return false;
+
+    suppressResizeApply(table);
+    applyStickyColumns(table);
+
+    return true;
+  }
+
   function observeStickyColumns(table) {
     if (!window.ResizeObserver || resizeObservers.has(table)) return;
 
     var observer = new ResizeObserver(function() {
+      if (resizeApplySuppressed(table)) return;
+
       window.requestAnimationFrame(function() {
+        if (resizeApplySuppressed(table)) return;
+
         applyStickyColumns(table);
       });
     });
@@ -149,6 +180,10 @@
   document.addEventListener("turbo:load", initializeFromDocument);
   window.addEventListener("resize", initializeFromDocument);
 
+  window.YummyGuideAdministrateStickyLeftColumns = {
+    refreshTable: refreshTable
+  };
+
   if (window.MutationObserver) {
     var mutationObserver = new MutationObserver(function(mutations) {
       mutations.forEach(function(mutation) {

data/app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js

@@ -6,6 +6,7 @@
   var observedScrolls = new WeakMap();
   var observedFixedScrolls = new WeakMap();
   var scrollSyncStates = new WeakMap();
+  var suppressedResizeScrolls = new WeakMap();
 
   function directCells(row) {
     return Array.from(row.children).filter(function(cell) {
@@ -36,6 +37,11 @@
     return preciseNumber(Math.max(table.scrollWidth || 0, measuredWidth(table), widthsSum));
   }
 
+  function parsedPixelValue(value) {
+    var parsedValue = parseFloat(value || '0');
+    return Number.isNaN(parsedValue) ? 0 : preciseNumber(parsedValue);
+  }
+
   function fixedColumnsCount(table) {
     var rawCount = table.dataset.fixedColumnsCount || '0';
 
@@ -339,6 +345,19 @@
     });
   }
 
+  function applyColGroupColumnWidth(table, index, widthValue) {
+    if (!table) return;
+
+    var colgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
+    if (!colgroup) return;
+
+    while (colgroup.children.length <= index) {
+      colgroup.appendChild(document.createElement('col'));
+    }
+
+    colgroup.children[index].style.width = widthValue;
+  }
+
   function applyFixedHeaderCellWidths(fixedTable, widths) {
     var headerRow = fixedTable && fixedTable.querySelector('thead tr');
     if (!headerRow) return;
@@ -356,6 +375,56 @@
     });
   }
 
+  function applyFixedHeaderCellWidth(fixedTable, index, width) {
+    var headerRow = fixedTable && fixedTable.querySelector('thead tr');
+    if (!headerRow) return;
+
+    var cell = directCells(headerRow)[index];
+    if (!cell) return;
+
+    var widthValue = cssPixelValue(width);
+    cell.style.width = widthValue;
+    cell.style.minWidth = widthValue;
+  }
+
+  function columnIdentifier(cell) {
+    if (!cell) return '';
+
+    return cell.dataset.adminColumnResizerColumnId || cell.dataset.columnId || '';
+  }
+
+  function sourceColumnIndex(sourceTable, columnId) {
+    var sourceRow = sourceTable && sourceTable.querySelector('thead tr');
+    if (!sourceRow) return -1;
+
+    return directCells(sourceRow).findIndex(function(cell) {
+      return columnIdentifier(cell) === columnId;
+    });
+  }
+
+  function columnWidthsFromCurrentHeader(sourceTable, fixedTable, columnCount) {
+    var sourceRow = sourceTable && sourceTable.querySelector('thead tr');
+    var fixedRow = fixedTable && fixedTable.querySelector('thead tr');
+    var sourceCells = sourceRow ? directCells(sourceRow) : [];
+    var fixedCells = fixedRow ? directCells(fixedRow) : [];
+    var sourceColgroup = sourceTable && sourceTable.querySelector('colgroup[data-fixed-header-colgroup]');
+    var fixedColgroup = fixedTable && fixedTable.querySelector('colgroup[data-fixed-header-colgroup]');
+    var widths = [];
+
+    for (var index = 0; index < columnCount; index += 1) {
+      var fixedColWidth = fixedColgroup && fixedColgroup.children[index] && parsedPixelValue(fixedColgroup.children[index].style.width);
+      var sourceColWidth = sourceColgroup && sourceColgroup.children[index] && parsedPixelValue(sourceColgroup.children[index].style.width);
+
+      widths[index] = fixedColWidth ||
+        sourceColWidth ||
+        measuredWidth(fixedCells[index]) ||
+        measuredWidth(sourceCells[index]) ||
+        0;
+    }
+
+    return widths;
+  }
+
   function mergeMeasuredCellWidths(widths, cells) {
     cells.forEach(function(cell, index) {
       widths[index] = Math.max(widths[index] || 0, measuredWidth(cell));
@@ -467,6 +536,24 @@
     });
   }
 
+  function applySourceColumnMinWidth(sourceTable, columnIndex, columnCount, width) {
+    if (!sourceTable) return;
+
+    var widthValue = cssPixelValue(width);
+    Array.from(sourceTable.querySelectorAll('thead tr, tbody tr, tfoot tr')).forEach(function(row) {
+      var cells = directCells(row);
+      if (cells.length !== columnCount || cells.some(function(cell) { return cell.colSpan > 1; })) return;
+
+      var cell = cells[columnIndex];
+      if (!cell) return;
+
+      cell.style.setProperty('--fixed-header-column-min-width', widthValue);
+      applyManagedCellWidth(cell, 'width', widthValue);
+      applyManagedCellWidth(cell, 'min-width', widthValue);
+      cell.setAttribute('data-fixed-header-column-min-width', 'true');
+    });
+  }
+
   function clearFixedHeaderState(slot, scroll, sourceTable) {
     if (slot) {
       slot.hidden = true;
@@ -534,6 +621,63 @@
     });
   }
 
+  function suppressResizeBuild(scroll) {
+    if (!scroll) return;
+
+    var token = (suppressedResizeScrolls.get(scroll) || 0) + 1;
+    suppressedResizeScrolls.set(scroll, token);
+
+    window.setTimeout(function() {
+      if (suppressedResizeScrolls.get(scroll) === token) {
+        suppressedResizeScrolls.delete(scroll);
+      }
+    }, 250);
+  }
+
+  function resizeBuildSuppressed(scroll) {
+    return suppressedResizeScrolls.has(scroll);
+  }
+
+  function refreshColumnWidth(options) {
+    var settings = options || {};
+    var sourceTable = settings.sourceTable;
+    var columnId = settings.columnId;
+    var width = parseFloat(settings.width);
+
+    if (!sourceTable || !columnId || Number.isNaN(width)) return false;
+
+    var scroll = sourceTable.closest(WRAPPER_SELECTOR);
+    if (!scroll) return false;
+
+    var slot = ensureFixedHeaderSlot(scroll);
+    var fixedScroll = slot && slot.querySelector('.table-fixed-header__scroll');
+    var fixedTable = fixedScroll && fixedScroll.querySelector('.table-fixed-header__table');
+    if (!slot || !fixedScroll || !fixedTable) return false;
+
+    var sourceRow = sourceTable.querySelector('thead tr');
+    var columnCount = sourceRow ? directCells(sourceRow).length : 0;
+    var columnIndex = sourceColumnIndex(sourceTable, columnId);
+    if (columnIndex < 0 || columnCount === 0) return false;
+
+    suppressResizeBuild(scroll);
+
+    var widthValue = cssPixelValue(width);
+    var widths = columnWidthsFromCurrentHeader(sourceTable, fixedTable, columnCount);
+    widths[columnIndex] = preciseNumber(width);
+
+    applySourceColumnMinWidth(sourceTable, columnIndex, columnCount, width);
+    applyColGroupColumnWidth(sourceTable, columnIndex, widthValue);
+    applyColGroupColumnWidth(fixedTable, columnIndex, widthValue);
+    applyFixedHeaderCellWidth(fixedTable, columnIndex, width);
+    applyFixedHeaderStickyColumns(sourceTable, fixedTable, widths);
+
+    fixedTable.style.width = cssPixelValue(measuredTableWidth(sourceTable, widths));
+    syncStickyPageHeader(scroll, slot);
+    syncFixedHeaderScroll(scroll, fixedScroll);
+
+    return true;
+  }
+
   function buildFixedTableHeader(slot, scroll, sourceTable) {
     if (!slot || !scroll || !sourceTable) return;
 
@@ -612,7 +756,11 @@
     var observer = resizeObservers.get(scroll);
     if (!observer) {
       observer = new ResizeObserver(function() {
+        if (resizeBuildSuppressed(scroll)) return;
+
         window.requestAnimationFrame(function() {
+          if (resizeBuildSuppressed(scroll)) return;
+
           initializeFixedHeaderForScroll(scroll);
         });
       });
@@ -721,6 +869,10 @@
   document.addEventListener('turbo:load', initializeFromDocument);
   window.addEventListener('resize', initializeFromDocument);
 
+  window.YummyGuideAdministrateStickyTableHeaders = {
+    refreshColumnWidth: refreshColumnWidth
+  };
+
   if (window.MutationObserver) {
     var mutationObserver = new MutationObserver(function(mutations) {
       mutations.forEach(function(mutation) {

data/app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss

@@ -1,3 +1,9 @@
+table.admin-column-resizer__table:not(.table-fixed-header__table) {
+  table-layout: auto !important;
+  width: max-content !important;
+  min-width: 100% !important;
+}
+
 .admin-column-resizer__header {
   position: relative;
 }
@@ -7,7 +13,7 @@
   top: 0;
   right: -5px;
   bottom: 0;
-  z-index: 20;
+  z-index: 1;
   width: 12px;
   cursor: col-resize;
   touch-action: none;
@@ -42,6 +48,25 @@
   user-select: none !important;
 }
 
+.admin-column-resizer--applying,
+.admin-column-resizer--applying * {
+  cursor: wait !important;
+  user-select: none !important;
+}
+
+.admin-column-resizer__preview {
+  position: fixed;
+  z-index: 10000;
+  box-sizing: border-box;
+  pointer-events: none;
+  background: rgba(37, 99, 235, 0.12);
+  border-right: 2px solid rgba(37, 99, 235, 0.85);
+  border-left: 1px solid rgba(37, 99, 235, 0.35);
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
+  contain: layout paint style;
+  will-change: width;
+}
+
 [data-fixed-table-header] .admin-column-resizer__handle {
   pointer-events: auto;
 }
@@ -52,13 +77,17 @@
 
 @media (pointer: coarse), screen and (max-width: 767px) {
   .admin-column-resizer__handle {
-    right: -10px;
-    width: 28px;
+    right: -14px;
+    width: 36px;
   }
 
   .admin-column-resizer__handle::after {
-    right: 13px;
+    right: 17px;
     background: rgba(255, 255, 255, 0.75);
     opacity: 1;
   }
+
+  .admin-column-resizer__preview {
+    border-right-width: 3px;
+  }
 }

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.8.0"
+    VERSION = "0.8.1"
   end
 end

data/spec/yummy_guide/administrate/column_resizer_asset_spec.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+RSpec.describe "column resizer assets" do
+  let(:javascript_source) do
+    File.read(File.expand_path("../../../app/assets/javascripts/yummy_guide_administrate/column_resizer.js", __dir__))
+  end
+
+  let(:stylesheet_source) do
+    File.read(File.expand_path("../../../app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss", __dir__))
+  end
+
+  let(:sticky_table_headers_source) do
+    File.read(File.expand_path("../../../app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js", __dir__))
+  end
+
+  let(:sticky_left_columns_source) do
+    File.read(File.expand_path("../../../app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js", __dir__))
+  end
+
+  # 未調整列は内容幅で表示され、調整済み列だけが幅固定されることを静的に確認する
+  it "scopes fixed width rules to adjusted columns" do
+    expect(javascript_source).to include("data-admin-column-resizer-adjusted-columns")
+    expect(javascript_source).to include("setAdjustedColumn(table, index, true)")
+    expect(javascript_source).to include("setAdjustedColumn(table, index, false)")
+    expect(javascript_source).to include("ADJUSTED_COLUMNS_ATTRIBUTE + '~=\"' + nthChild")
+  end
+
+  # 幅調整後の内容が常に折り返されるCSSが生成されることを確認する
+  it "generates wrapping rules for adjusted columns" do
+    expect(javascript_source).to include("white-space: normal !important")
+    expect(javascript_source).to include("overflow-wrap: anywhere !important")
+    expect(javascript_source).to include("word-break: break-word !important")
+  end
+
+  # デフォルト状態の列幅が内容の最大幅を基準に決まることを確認する
+  it "uses max-content table sizing by default" do
+    expect(stylesheet_source).to include("table-layout: auto !important")
+    expect(stylesheet_source).to include("width: max-content !important")
+    expect(stylesheet_source).to include("min-width: 100% !important")
+  end
+
+  # ドラッグ中に固定ヘッダー同期を繰り返さず、調整完了後だけ同期することを静的に確認する
+  it "synchronizes fixed headers after drag completion instead of during drag" do
+    expect(javascript_source).not_to include("scheduleStickyRefresh(false)")
+    expect(javascript_source).not_to include("refreshDuringDrag")
+    expect(javascript_source).not_to include("columnNeedsDragRefresh")
+    expect(javascript_source).not_to include("STICKY_REFRESH_INTERVAL")
+    expect(javascript_source).to include("refreshStickyHeaderColumn(pendingWidth, function()")
+    expect(javascript_source).to include("scheduleStickyRefresh(callback)")
+  end
+
+  # ドラッグ中は実テーブルを再レイアウトせず、プレビューだけを更新することを静的に確認する
+  it "updates only the lightweight preview while dragging" do
+    expect(javascript_source).to include("createDragPreview(sourceTable, previewHeader, startWidth)")
+    expect(javascript_source).to include("updateDragPreview(dragState.preview, dragState.currentWidth)")
+    expect(javascript_source).to include("schedulePendingWidthApply(pendingWidth)")
+    expect(javascript_source).to include("applyColumnWidth(pendingWidth.columnId, pendingWidth.width, pendingWidth.storageKey)")
+    expect(javascript_source).to include("sourceTable: dragState.sourceTable")
+    expect(javascript_source).not_to include("applyColumnWidth(dragState.columnId, dragState.currentWidth")
+  end
+
+  # ドラッグ中の調整後幅を半透明カラムで表示するCSSがあることを確認する
+  it "defines a translucent column preview" do
+    expect(stylesheet_source).to include(".admin-column-resizer__preview")
+    expect(stylesheet_source).to include("pointer-events: none")
+    expect(stylesheet_source).to include("will-change: width")
+  end
+
+  # 幅調整中のpxラベルが表示されないことを静的に確認する
+  it "does not render a pixel width label in the preview" do
+    expect(javascript_source).not_to include("PREVIEW_LABEL_CLASS")
+    expect(javascript_source).not_to include("admin-column-resizer__preview-label")
+    expect(javascript_source).not_to include("Math.round(width) + 'px'")
+    expect(stylesheet_source).not_to include(".admin-column-resizer__preview-label")
+  end
+
+  # 固定列ヘッダーより幅調整ハンドルを背面にすることを静的に確認する
+  it "keeps resize handles behind sticky column headers" do
+    expect(stylesheet_source).to include("z-index: 1")
+    expect(stylesheet_source).not_to include("z-index: 20")
+  end
+
+  # 幅の適用中だけ待機カーソルを表示することを静的に確認する
+  it "shows a wait cursor while applying the final width" do
+    expect(javascript_source).to include("APPLYING_BODY_CLASS = 'admin-column-resizer--applying'")
+    expect(javascript_source).to include("document.body.classList.add(APPLYING_BODY_CLASS)")
+    expect(javascript_source).to include("document.body.classList.remove(APPLYING_BODY_CLASS)")
+    expect(stylesheet_source).to include(".admin-column-resizer--applying")
+    expect(stylesheet_source).to include("cursor: wait !important")
+  end
+
+  # モバイルのtouch/pen操作でハンドル外へ移動しても調整を継続できることを静的に確認する
+  it "supports touch and pen pointer dragging on mobile" do
+    expect(javascript_source).to include("event.pointerType !== 'mouse' || event.button === 0")
+    expect(javascript_source).to include("event.isPrimary === false")
+    expect(javascript_source).to include("handle.setPointerCapture(event.pointerId)")
+    expect(javascript_source).to include("dragState.handle.releasePointerCapture(dragState.pointerId)")
+    expect(stylesheet_source).to include("right: -14px")
+    expect(stylesheet_source).to include("width: 36px")
+  end
+
+  # 幅適用後の固定ヘッダー追従が全体rebuildではなく対象カラム同期を優先することを静的に確認する
+  it "uses targeted fixed header synchronization after applying a width" do
+    expect(javascript_source).to include("window.YummyGuideAdministrateStickyTableHeaders")
+    expect(javascript_source).to include("api.refreshColumnWidth({")
+    expect(sticky_table_headers_source).to include("window.YummyGuideAdministrateStickyTableHeaders = {")
+    expect(sticky_table_headers_source).to include("refreshColumnWidth: refreshColumnWidth")
+    expect(sticky_table_headers_source).to include("function refreshColumnWidth(options)")
+    expect(sticky_table_headers_source).to include("applySourceColumnMinWidth(sourceTable, columnIndex, columnCount, width)")
+    expect(sticky_table_headers_source).to include("applyFixedHeaderCellWidth(fixedTable, columnIndex, width)")
+    expect(sticky_table_headers_source).to include("suppressResizeBuild(scroll)")
+  end
+
+  # 幅適用後の固定左列追従もResizeObserverの重複再計算に頼らないことを静的に確認する
+  it "refreshes sticky left columns directly after applying a width" do
+    expect(javascript_source).to include("window.YummyGuideAdministrateStickyLeftColumns")
+    expect(javascript_source).to include("api.refreshTable(sourceTable)")
+    expect(javascript_source).to include("refreshStickyLeftColumns(pendingWidth.sourceTable)")
+    expect(sticky_left_columns_source).to include("window.YummyGuideAdministrateStickyLeftColumns = {")
+    expect(sticky_left_columns_source).to include("refreshTable: refreshTable")
+    expect(sticky_left_columns_source).to include("function refreshTable(table)")
+    expect(sticky_left_columns_source).to include("suppressResizeApply(table)")
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.8.1
 platform: ruby
 authors:
 - akatsuki-kk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-04 00:00:00.000000000 Z
+date: 2026-06-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -142,6 +142,7 @@ files:
 - spec/yummy/guide/generic/administrate_spec.rb
 - spec/yummy_guide/administrate/application_dashboard_spec.rb
 - spec/yummy_guide/administrate/collection_helper_spec.rb
+- spec/yummy_guide/administrate/column_resizer_asset_spec.rb
 - spec/yummy_guide/administrate/datetime_filter_parameters_spec.rb
 - spec/yummy_guide/administrate/datetime_input_helper_spec.rb
 - spec/yummy_guide/administrate/fields/json_pretty_field_spec.rb