playbook_ui 15.5.0.pre.alpha.draggablefix12571 → 15.5.0.pre.alpha.draggablefix12589

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f31083e3e9ebfce2990300a17297cd86ed63b44c4396d2cea0802213fbf7820
-  data.tar.gz: 5b0258ee4a8371746217cab20a86c325947c131d0085ef3e7ab9a406675bcd60
+  metadata.gz: 9048fda164619db498afb925949d4d2d56e2c273fcb753e7d43a504fe4c9e5a5
+  data.tar.gz: ff6ed156a4e852bcae45701f34feba01cdfa6f4e7a58b86181d76271781a5dd3
 SHA512:
-  metadata.gz: 963b09db6cf28ece7d25880e789d510046f7f283d4e73ec9b959dcaa9abb6040d489480a5e90776639bb202f04197cd7e5c8ded45a2ce793513a5a3dfca95bb8
-  data.tar.gz: 567cacd6dcf108dacc6d6a1500d233ee8d3ce5d2c56ab6e0ddd131bca6d0c7d1dafe718ff7479eb0d99cd923db7708aafe1b32df2e9e16b3f6e6628cd44fcc00
+  metadata.gz: 1bda0b34988a106ead207cc8fd705876f3550ebd6bc42c261da82f2be82a0f85fbe2398b9a345ce308840f052846be435f46a975a50e27fe7a4a939f3d27dacb
+  data.tar.gz: db28214d63307ebeae96aefbb6db9ad6376cd84ba3606d09deac5507a0c41c39146b3ca0fe23976551e95376d96d6de979e5428585dbde764594db0279827855

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -791,6 +791,28 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
+    // Override last-header-cell border color in dark mode
+    .pb_advanced_table_header {
+      > tr:not(:first-child) {
+        .last-header-cell {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
+      th[colspan]:not([colspan="1"]) {
+        border-right: 1px solid $border_dark !important;
+      }
+    }
+
+    // Override last-cell border color in dark mode for body cells
+    .pb_advanced_table_body {
+      tr {
+        .last-cell:not(:last-of-type) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+    }
+
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
@@ -850,7 +872,7 @@
     // Restore vertical border styling in dark mode when verticalBorder is true
     .pb_table[data-vertical-border="true"] {
       .pb_advanced_table_header {
-        > tr:not(:first-child) {
+        > tr {
           th:not(:last-child) {
             border-right: 1px solid $border_dark !important;
           }
@@ -864,11 +886,17 @@
         }
       }
 
+      tr.virtualized-table-row {
+        td:not(:last-child) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
       // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
       // override the default border-dark with the custom color
       &.pb_advanced_table[class*="column-group-border-"] {
         .pb_advanced_table_header {
-          > tr:not(:first-child) {
+          > tr {
             th:not(:last-child) {
               border-right: 1px solid var(--column-border-color) !important;
             }
@@ -881,6 +909,12 @@
             border-right: 1px solid var(--column-border-color) !important;
           }
         }
+
+        tr.virtualized-table-row {
+          td:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
       }
     }
 
@@ -985,34 +1019,90 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      .last-header-cell:not(:last-child) {
+      th[colspan]:not([colspan="1"]):not(:last-child) {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+
+      .last-header-cell:not(:last-child),
+      > tr:last-child .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      .last-cell:not(:last-child) {
+      tr .last-cell:not(:last-of-type),
+      td.last-cell:not(:last-child),
+      .pb_table_td.last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
+    &[class*="column-group-border-"] {
+      .pb_advanced_table_header {
+        th[colspan]:not([colspan="1"]):not(:last-child),
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+    }
+
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        .last-header-cell:not(:last-child) {
+        // Convert all colspan headers to box-shadow with dark color
+        th[colspan]:not([colspan="1"]) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+
+        // Convert all last-header-cell borders to box-shadow with dark color
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:last-child {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        .last-cell:not(:last-child) {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
+
+      &[class*="column-group-border-"] {
+        .pb_advanced_table_header {
+          th[colspan]:not([colspan="1"]):not(:last-child),
+          .last-header-cell:not(:last-child),
+          > tr:last-child .last-header-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+
+        .pb_advanced_table_body {
+          tr .last-cell:not(:last-of-type),
+          td.last-cell:not(:last-child),
+          .pb_table_td.last-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -30,65 +30,68 @@ const reducer = (state: InitialStateType, action: ActionType) => {
     case 'REORDER_ITEMS': {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === dragId);
+      const draggedItem = newItems.find(item => item.id === dragId);
       const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(item => item && item.id === targetId);
+      const targetIndex = newItems.findIndex(item => item.id === targetId);
 
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
 
       return { ...state, items: newItems };
     }
-    case 'REORDER_ITEMS_CROSS_CONTAINER': {
+
+    // Used only when enableCrossContainerPreview is true
+    case "REORDER_ITEMS_CROSS_CONTAINER": {
       const { dragId, targetId, newContainer } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === dragId);
+      const draggedItem = newItems.find((item) => item && item.id === dragId);
+
+      if (!draggedItem) return state;
+
       const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(item => item && item.id === targetId);
+      const targetIndex = newItems.findIndex(
+        (item) => item && item.id === targetId
+      );
 
-      // Update container temporarily so dropzone preview works correctly
-      const updatedItem = { ...draggedItem, container: newContainer };
+      if (draggedIndex === -1 || targetIndex === -1) return state;
 
+      const updatedItem = { ...draggedItem, container: newContainer };
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, updatedItem);
 
       return { ...state, items: newItems };
     }
-    case 'MOVE_TO_CONTAINER_END': {
+
+    // Used only when enableCrossContainerPreview is true
+    case "MOVE_TO_CONTAINER_END": {
       const { dragId, newContainer } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === dragId);
+      const draggedItem = newItems.find((item) => item && item.id === dragId);
+
+      if (!draggedItem) return state;
+
       const draggedIndex = newItems.indexOf(draggedItem);
+      if (draggedIndex === -1) return state;
 
-      // Update container temporarily so dropzone preview works correctly
       const updatedItem = { ...draggedItem, container: newContainer };
 
       // Remove from current position
       newItems.splice(draggedIndex, 1);
 
-      // Find the last item in the target container and insert after it
-      const lastIndexInContainer = newItems.map(item => item.container).lastIndexOf(newContainer);
+      // Insert at end of target container
+      const lastIndexInContainer = newItems
+        .map((item) => item && item.container)
+        .lastIndexOf(newContainer);
+
       if (lastIndexInContainer === -1) {
-        // Container is empty, add to end
         newItems.push(updatedItem);
       } else {
-        // Insert after last item in container
         newItems.splice(lastIndexInContainer + 1, 0, updatedItem);
       }
 
       return { ...state, items: newItems };
     }
-    case 'RESET_DRAG_CONTAINER': {
-      const { itemId, originalContainer } = action.payload;
-      return {
-        ...state,
-        items: state.items.map(item =>
-          item.id === itemId
-            ? { ...item, container: originalContainer }
-            : item
-        )
-      };
-    }
+
     default:
       return state;
   }
@@ -111,7 +114,9 @@ export const DraggableProvider = ({
   onDrop,
   onDragOver,
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
+  providerId = 'default', // fallback provided for backward compatibility
+  // Opt-in flag for cross-container preview
+  enableCrossContainerPreview = false,
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -153,17 +158,42 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     if (state.dragData.id !== id) {
-      // Check if this is a cross-container drag
-      const isCrossContainer = state.dragData.initialGroup !== container;
-      
-      if (isCrossContainer) {
-        // Use cross-container reorder to update container temporarily for dropzone preview
-        dispatch({ type: 'REORDER_ITEMS_CROSS_CONTAINER', payload: { dragId: state.dragData.id, targetId: id, newContainer: container } });
+      if (enableCrossContainerPreview) {
+        // Used only when enableCrossContainerPreview is true
+        const draggedItem = state.items.find(
+          (item) => item && item.id === state.dragData.id
+        );
+        const currentContainer =
+          draggedItem && draggedItem.container
+            ? draggedItem.container
+            : state.dragData.initialGroup;
+
+        const isCrossContainer =
+          currentContainer !== container &&
+          (currentContainer !== undefined || container !== undefined);
+
+        if (isCrossContainer) {
+          dispatch({
+            type: "REORDER_ITEMS_CROSS_CONTAINER",
+            payload: {
+              dragId: state.dragData.id,
+              targetId: id,
+              newContainer: container,
+            },
+          });
+        } else {
+          // Same container: keep original behavior
+          dispatch({
+            type: "REORDER_ITEMS",
+            payload: { dragId: state.dragData.id, targetId: id },
+          });
+        }
       } else {
-        // Same container: use normal reorder no need to be fancy nancy
-        dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+        // Original behavior (no preview across containers)
+        dispatch({type: "REORDER_ITEMS", payload: { dragId: state.dragData.id, targetId: id }});
       }
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+
+      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: container, originId: providerId}});
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -172,28 +202,30 @@ export const DraggableProvider = ({
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
     
-    if (!draggedItemId) {
-      dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-      return;
-    }
-    
-    const draggedItem = state.items.find(item => item && item.id === draggedItemId);
-    const finalContainer = draggedItem ? draggedItem.container : originalContainer;
-    
-    // Find items above and below in the same container
-    const itemsInContainer = state.items.filter(item => item.container === finalContainer);
-    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
-    const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
-    const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
-    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-    
-    // Pass enhanced info to onDragEnd callback to give dev more context
-    if (onDragEnd) onDragEnd(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow);
+    if (onDragEnd) {
+      if (!enableCrossContainerPreview) {
+        onDragEnd();
+      } else {
+        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
+        const finalContainer = draggedItem ? draggedItem.container : originalContainer;
+        
+        const itemsInContainer = state.items.filter(item => item && item.container === finalContainer);
+        const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
+        const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+        const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+        
+        onDragEnd(
+          draggedItemId,
+          finalContainer,
+          originalContainer,
+          itemAbove,
+          itemBelow
+        );
+      }
+    }
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -205,34 +237,31 @@ export const DraggableProvider = ({
 
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
-    
-    if (!draggedItemId) return; // Guard against missing drag data when dropping too quickly
-    
-    const draggedItem = state.items.find(item => item && item.id === draggedItemId);
-    
-    if (!draggedItem) {
-      // Item not found in state - clear drag state and exit
-      dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-      return;
-    }
-    
-    // Find items above and below in the same container (before changeCategory updates it)
-    const itemsInContainer = state.items.filter(item => item.container === container);
-    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
-    const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
-    const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
-    
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    // changeCategory will ensure the container is set correctly on drop for cross container and same container drops
-    changeCategory(draggedItemId, container);
-    
-    // Pass enhanced info to onDrop callback so devs have more context
+    changeCategory(state.dragData.id, container);
     if (onDrop) {
-      const updatedItem = { ...draggedItem, container };
-      onDrop(draggedItemId, container, originalContainer, updatedItem, itemAbove, itemBelow);
+      if (!enableCrossContainerPreview) {
+        onDrop(container);
+      } else {
+        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
+        const updatedItem = draggedItem ? { ...draggedItem, container } : null;
+        
+        const itemsInContainer = state.items.filter(item => item && item.container === container);
+        const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
+        const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+        const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+        
+        onDrop(
+          draggedItemId,
+          container,
+          originalContainer,
+          updatedItem,
+          itemAbove,
+          itemBelow
+        );
+      }
     }
   };
 
@@ -240,27 +269,21 @@ export const DraggableProvider = ({
      if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
 
     e.preventDefault();
-    
-    // Check if we're dragging over a different container than where the item currently is
-    if (!state.dragData.id) return; // Guard against missing drag ID when dragging too quickly
-    
-    const draggedItem = state.items.find(item => item && item.id === state.dragData.id);
-    
-    // Only update if item exists and needs to move to a different container
-    if (draggedItem && draggedItem.container !== container) {
-      // Only dispatch if we're not already in the process of updating to this container
-      // This is needed to prevent multiple rapid MOVE_TO_CONTAINER_END actions that can cause race conditions + errors (Not seen in PB, errors show up in Nitro console)
-      if (state.activeContainer !== container) {
-        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
-        // This handles the case when dragging to empty space at bottom of container OR in empty container
-        dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: state.dragData.id, newContainer: container } });
-        dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+
+    if (enableCrossContainerPreview && state.dragData.id) {
+      // Only when enableCrossContainerPreview is true: when hovering over a different container, move item to end
+      const draggedItem = state.items.find(
+        (item) => item && item.id === state.dragData.id
+      );
+      if (draggedItem && draggedItem.container !== container) {
+        dispatch({
+          type: "MOVE_TO_CONTAINER_END",
+          payload: { dragId: state.dragData.id, newContainer: container },
+        });
       }
-    } else if (state.activeContainer !== container) {
-      // Just update active container if item is already in correct container
-      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     }
-    
+
     if (onDragOver) onDragOver(e, container);
   };
 
@@ -284,4 +307,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -18,6 +18,7 @@ export type ActionType =
 } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+  | { type: 'SET_CROSS_CONTAINER_PREVIEW'; payload: boolean }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
   | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } }
   | { type: 'REORDER_ITEMS_CROSS_CONTAINER'; payload: { dragId: string; targetId: string; newContainer: string } }
@@ -36,9 +37,10 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: (draggedItemId: string, finalContainer: string, originalContainer: string, itemAbove: ItemType | null, itemBelow: ItemType | null) => void;
-    onDrop?: (draggedItemId: string, droppedContainer: string, originalContainer: string, item: ItemType, itemAbove: ItemType | null, itemBelow: ItemType | null) => void;
+    onDragEnd?: (...args: any[]) => void;
+    onDrop?: (...args: any[]) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
     providerId?: string;
+    enableCrossContainerPreview?: boolean;
   }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -83,6 +83,7 @@ const DraggableMultipleContainersDropzone = (props) => {
   return (
     <DraggableProvider 
         dropZone={{type: "outline"}}
+        enableCrossContainerPreview
         initialItems={data}
         onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
           console.log(`Dragged Item ID: ${draggedItemId}`);

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -8,6 +8,25 @@
       border-right: 1px solid $border_light !important;
     }
 
+    // **Advanced Table** specific rules to eliminate double borders when vertical-border is active
+    .pb_advanced_table &,
+    &[data-vertical-border="true"] {
+      // Remove first column box-shadow (preserve border-right in Chrome and use CSS var to respect column group border colors)
+      .table-header-cells:first-child,
+      .table-header-cells-custom:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child {
+        box-shadow: none !important;
+        border-right: 1px solid var(--column-border-color, #{$border_light}) !important;
+      }
+
+      .pb_table_td:nth-child(2) {
+        box-shadow: none !important;
+      }
+    }
+    // --- End Advanced Table First Column Code Section ---
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -63,5 +82,35 @@
         }
       }
     }
+
+    // Dark mode support for advanced tables
+    .pb_advanced_table.dark & {
+      td, th, .pb_table_td, .pb_table_th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      thead tr th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      &[data-vertical-border="true"] {
+        .table-header-cells:first-child,
+        .table-header-cells-custom:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child {
+          border-right: 1px solid var(--column-border-color, #{$border_dark}) !important;
+        }
+      }
+
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            border-right-color: darken($border_dark, 10%) !important;
+          }
+        }
+      }
+    }
+    // --- End Advanced Table Dark Mode Code Section ---
   }
 }