update classes to prevent cutoff of left side of project table

[roslynwythe]

Fixes #1927

What changes did you make?

• use JavaScript to modify style of the body element in <ProjectTable>, to prevent page-wide scrolling
• enable scrolling on div.tableContainer
• make table headings "sticky" so they are always visible regardless of vertical scroll position
• changes to the zIndex (stacking order) of header and popover so that popovers appear "on top" of the table heading.
• change minHeight on contentContainer because the previous value did not adjust with user's selection of font size
• At screen widths less than 800px, the toolbar, input field, and button directly above the table become cut off. Regardless of how scrolling is implemented, the design and implementation of those elements should be revisited to be responsive at smaller screen sizes.

Why did you make the changes (we will use this info to test)?

• When the browser window was not extra wide, there was a horizontal scroll bar, but the user could not scroll far enough to the left to reveal the left-most columns.
• the requirement to make table headings "sticky" was not in the issue but was requested in comment

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[entrotech]

This fix introduces another problem when you use the horizontal scroll bar and scroll to the right, the page is wider than the headers at the top of the page:

I think what we probably need to do is enclose the gird in a div that allows horizontal scrolling, instead of having the scroll bar apply to the whole page. This way, only the grid itself scrolls horizontally. Others mentioned last week that the page heading and all the stuff just above the grid should stay on-screen regardless of scroll position. Bonnie also mentioned that the column headings in the grid should be frozen (i.e. not change vertical position if you scroll vertically). Though I don't think anybody created an issue for this, it might (or might not) be easy to piggyback on this issue.

[entrotech]

This introduces another problem - see my comment on the PR with a screen shot.

[roslynwythe]

@entrotech I am working on two options:

1. On the Projects Page, implement scroll bars at the table Container level instead of at the page level. This can be done by using JavaScript in the component, to override the style on the body tag, inhibiting page level scrolling. However, at screen sizes < 850 px, some problems develop with some elements on the toolbar above the table. Assuming that we are supporting tablet user, these problems probably should be addressed, regardless of the outcome of this issue, otherwise users will either have tools cut off or have unnecessary and awkward scrolling.

2. Continue to allow the default page-level scrollbars, but use advanced techniques to match the width of the global la header and the tdm header and footer to the width of the table. The hook useMeasure() could be used to dynamically read the width of the table and the set the width of the headers and footers to match, in order to avoid the appearance shown in your screenshot above.

[roslynwythe]

@entrotech Thank you for merging this PR. You may have noticed that at smaller screen sizes, some features (of the toolbar above the table) are cut off, and I believe that some design and implementation changes should be considered to make those elements more responsive.

I have an alternative solution in which scrolling is done at the page level, and the problem depicted in #1934 (comment) is resolved by the use of CSS and JavaScript to dynamically adjust the width of the various elements to align.

[roslynwythe]

@entrotech Thank you for merging this PR. You may have noticed that at smaller screen sizes, some features (of the toolbar above the table) are cut off, and I believe that some design and implementation changes should be considered to make those elements more responsive.

I have an alternative solution in which scrolling is done at the page level, and the problem depicted in #1934 (comment) is resolved by the use of CSS and JavaScript to dynamically adjust the width of the various elements to align.