Bug: On mobile, after opening details panel, columns disappear from view

[JonellaCulmer]

What we're after:
Observed on mobile, some columns disappear from view after opening and closing the details panel for all datatables.

Technical considerations
Re-test after datatables.net upgrade PR is merged #4919

• The hide-panel- classes on the th elements are used to hide columns to make room for the panel in desktop view when the panel is active, otherwise it gets pushed down to the bottom unless at smaller desktop breakpoints.
• In mobile view, the column headers do not return to the original state after the panel is closed.

Completion criteria:

• Same columns are retained after opening and closing details panel

[rfultz]

I can't replicate the problem. @JonellaCulmer do you know of specific pages that are acting up?

Looks like .hide-panel classes control whether elements are displayed based on browser window width (regardless of whether a panel is open—not the width available for the table, but the overall browser window). But that makes me wonder why fec > fec > static > js > modules > tables.js > hidePanel lines 218-225 exists—why are we using JavaScript to set visibility of elements based on classes that are specifically supposed to control visibility? Would it break anything to remove those lines?

if ($(document).width() > 640) {
  api.columns('.hide-panel-tablet').visible(true);
  api.columns('.hide-panel.min-tablet').visible(true);
}

if ($(document).width() > 980) {
  api.columns('.hide-panel').visible(true);
}

[JonellaCulmer]

@rfultz I'm seeing it here on the receipts datatable: https://www.fec.gov/data/receipts/?data_type=processed&two_year_transaction_period=2022&min_date=01%2F01%2F2021&max_date=12%2F31%2F2022

I can look for other examples if necessary. This can't just be a me problem, can it?

[rfultz]

It could be some kind of lag or weirdness with that particular version of the browser. I still can't get it to happen.

For this example,

• largest width shows me Source name, Recipient, Election, State, Receipt date, Amount, and the + columns
• next size down is only Source name, Recipient, Receipt date, Amount, and +
• smallest size shows only Source name, Recipient, and +

I can't make them show other sets outside of those sizes, regardless of whether I have the filters open or closed, whether loading at small or large, whether resizing from small to large with filters open or closed and then opening or closing before changing to the other size

[JonellaCulmer]

@rfultz It's not the filters, it's the opening of the details panel that causes the issue.

[rfultz]

Put the ticket back in backlog for anyone who's interested in taking it on. Since my previous attempt didn't work as expected, feel free to use that code or not. Closing that PR

[johnnyporkchops]

Referencing a comment from a closed PR attempt to resolve this issue, which documents the cause of the issue
See this comment with screenshots

Also flagging that this issue will be mute and can be closed if and when details panels are put under each table row with work for this ticket #4942