[SAGE-757] Table - responsive updates

[QuintonJason]

Description

Repurposes table markup for a "stacked" visual layout on small screens.

• Table structure semantics are affected when setting display. Each default role has been added back in with JS.
• We're using JS to duplicate table header (th) text into each individual cell td as span elements. The actual table headers are visually hidden but remain readable for screen readers, keeping existing semantics/relationship with cells intact.

Requirements:

• responsive_stack property must be enabled
• Existing is_responsive property can still be set independently, and will take effect on larger screen sizes OR when mobile stack content overflows its container
• JS runs on page load/init only to minimize reflow. The expectation being that users will not switch between multiple viewports, so adding a listener for resize should not be needed

Current assumptions:

• headers are required for tables
• cells will have a max of 4 children
  • example: multiple tags/badges within a cell
• truncated text is disabled on mobile
  • max-width set on truncated text causes issue with cell width layout
• some specific content will always be hidden when "stacked"
  • avatars: use varying nested containers

TODOs

• Design: confirm moving row selection checkbox (in table header) to bulk actions
• Design: confirm patterns:
  • does this apply to all tables, or only special cases?
  • if all tables, strict rules will be needed to enforce markup order/structure
  • verify overflow approach
• account for React headers schema override
• investigate simplified use of dropdowns with sage_table_for - requires nested string(s)/schema
• investigate "action" column container for checkbox, avatar, options content

Screenshots

	Before	After
Standard table
Using sage_table_for

Testing in sage-lib

Visit the table view and verify that the mobile view aligns with the design spec

• Rails
• React

Testing in kajabi-products

⚠️ Note: when testing the responsive view using browser devtools, you must refresh the page after resizing (see description above, under Requirements)

1. (HIGH) Update mobile styles for Table.
   • People Page

Related

Closes SAGE-757

[teenwolfblitzer]

Will need to clarify with design here:

I've created a new prop responsive_stack rather than repurposing is_responsive. This is all under the assumption that we want to maintain maximum backwards compatibility with overflow/scrolling tables since the responsive stack layout conditions are somewhat stringent. Retrofitting all current table uses is not likely to be a trivial effort.

[teenwolfblitzer]

Using multiple nested loops to dig into the table markup. Probably not ideal, but I'm not sure we have much of an alternative. Performance impact should be minimal with the majority of cases rendering paginated results.

[teenwolfblitzer]

Moved CSS class output logic to sage_table_helper