Add styles to bootstrap tables that overflow to indicate more content

[zipymonkey]

When a bootstrap table overflows the overflowing content is hidden but the user can scroll horizontally to see additional content. This is not clear to the user that there is more content. Maybe we can add a inset shadow? Not sure if something like this is possible.

[zipymonkey]

Potential solution: https://daverupert.com/2023/08/animation-timeline-scroll-shadows/. This sort of works but the issue is the overlay height being larger than the .table-responsive element.

.table-responsive {
  animation: scroll-shadow-inset linear;
  animation-timeline: scroll( self inline );
  --child-shadow: none;

  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: $zindex-popover;
    pointer-events: none;
    box-shadow: var(--child-shadow);
  }
}

@keyframes scroll-shadow-inset {
  /* start with inset shadow on right */
  from {
    --child-shadow: inset -10px -10px 15px 0px rgb(0 0 0 / 0.3);
  }

  /* end with inset shadow on left */
  to {
    --child-shadow: inset 10px -10px 15px 0px rgb(0 0 0 / 0.3);
  }
}

[zipymonkey]

Setting position relative fixes the height issue BUT then the :before pseudo element then scrolls. This stack overflow https://stackoverflow.com/a/54576406 adds another div around the content that handles the scrolling. This would require replacing the https://www.drupal.org/project/table_bs_filter with our own thing to use.