SEAB-6777: Improve formatting of workflow "Versions" table

[svonworl]

Description
This PR improves the workflow page's "Versions" table so that it fits horizontally into our UI when the browser window is wide. Previously, the table was too wide for space afforded to it by our UI, causing the rightmost elements to be hidden behind other elements, wide content to be wrapped over multiple lines, and a scrollbar to appear at bottom.

Specifically, this PR:

1. removes the "sort" control from all but the "Git Reference" and "Date Modified" columns.
2. decreases the padding between adjacent columns.

These changes allow the column headers to fit within the available space, and provide extra horizontal space that columns containing wide content can scale into.

These changes make a big difference, improving the spacing and flow of the table for most workflows. Arguably, the table is less useful because we now can't sort some columns, but IMHO, the readability improvement greatly outweighs any drawbacks.

Before (develop):

After (this PR):

The tool table contains less information, and didn't need these changes.

At narrow browser widths, the table still gets mangled/hidden. A possible next step might be to remove the "information circles" and instead directly link the table heading text to the documentation.

Review Instructions
Scale your browser to maximum width, view a workflow's "Versions" table, and confirm that it fits horizontally and that there is no scroll bar. Do the same for some other types of workflows.

Issue
https://ucsc-cgl.atlassian.net/browse/SEAB-6777

Security
If there are any concerns that require extra attention from the security team, highlight them here.

Please make sure that you've checked the following before submitting your pull request. Thanks!

• Check that your code compiles by running npm run build
• Ensure that the PR targets the correct branch. Check the milestone or fix version of the ticket.
• If this is the first time you're submitting a PR or even if you just need a refresher, consider reviewing our style guide
• Do not bypass Angular sanitization (bypassSecurityTrustHtml, etc.), or justify why you need to do so
• If displaying markdown, use the markdown-wrapper component, which does extra sanitization
• Do not use cookies, although this may change in the future
• Run npm audit and ensure you are not introducing new vulnerabilities
• Do due diligence on new 3rd party libraries, checking for CVEs
• Don't allow user-uploaded images to be served from the Dockstore domain
• If this PR is for a user-facing feature, create and link a documentation ticket for this feature (usually in the same milestone as the linked issue). Style points if you create a documentation PR directly and link that instead.
• Check whether this PR disables tests. If it legitimately needs to disable a test, create a new ticket to re-enable it in a specific milestone.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 41.75%. Comparing base (810d090) to head (5dc660e).
Report is 1 commits behind head on hotfix/2.13.2.

Additional details and impacted files

@@              Coverage Diff               @@
##           hotfix/2.13.2    #2043   +/-   ##
==============================================
  Coverage          41.75%   41.75%           
==============================================
  Files                394      394           
  Lines              12320    12320           
  Branches            2959     2959           
==============================================
  Hits                5144     5144           
  Misses              4855     4855           
  Partials            2321     2321           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[denis-yuen]

At narrow browser widths, the table still gets mangled/hidden. A possible next step might be to remove the "information circles" and instead directly link the table heading text to the documentation.

Seems a bit counter-intuitive. One other quick change would be to move verified into the overview page. Metrics basically replaces verified going forward.

[kathy-t]

Would recommend adding a comment about why these styles override the default

dockstore-ui2/src/styles.scss

Lines 1249 to 1259 in f145992

	.mat-cell:not(:first-of-type),
	.mat-header-cell:not(:first-of-type) {
	padding-left: 1.6rem;
	}
	/* Material says it should have 16dp to the left and right, sadly Angular Material does not */
	.mat-cell:not(:last-of-type),
	.mat-header-cell:not(:last-of-type),
	table th {
	padding-right: 1.6rem;
	}

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud