Skip to content

Keep Browse identifiers on one line and widen title columns #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LukasWallrich merged 4 commits into from
Oct 9, 2026
Merged

Keep Browse identifiers on one line and widen title columns #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93c815f
Keep Browse identifiers on one line and widen title columns
LukasWallrich Oct 9, 2026
800fae1
Fit Browse widths to 100%, keep link focus visible, wrap evidence links
LukasWallrich Oct 9, 2026
3a2e4ae
Add -webkit-hyphens for older Safari (cubic review)
LukasWallrich Oct 9, 2026
892c179
Merge main into fix/browse-table-columns
LukasWallrich Oct 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,11 @@ function formatUrlOrDoi(url, doi) {
if (href) return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="doi-link">${escapeHtml(truncateText(url,40))}</a>`;
return formatDOI(doi,true);
}
function formatUrlOrDoiShort(url, doi) { return formatUrlOrDoi(url,doi); }
function formatUrlOrDoiShort(url, doi) {
const href = safeHref(url);
if (href) return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="doi-link" title="${escapeHtml(url)}">${escapeHtml(url.replace(/^https?:\/\/(www\.)?/i, ''))}</a>`;
return formatDOI(doi, true);
}

function formatAuthors(authorData) {
if (!authorData) return '-';
Expand Down Expand Up @@ -718,22 +722,22 @@ function initDataTable(data) {
row.year_r || '-',
{ display: getOutcomeBadgeShort(row.outcome), search: `${row.outcome || ''} ${row.outcome_quote || ''}` },
truncateText(row.type, 15) || '-',
{ display: formatDOI(row.doi_o), search: row.doi_o || '' },
{ display: formatDOI(row.doi_o, true), search: row.doi_o || '' },
{ display: formatUrlOrDoiShort(row.url_r, row.doi_r), search: `${row.url_r || ''} ${row.doi_r || ''}` }
]);

dataTable = $('#flora-table').DataTable({
data: tableData, responsive: false, pageLength: 25, dom: 'lrtip',
data: tableData, responsive: false, autoWidth: false, pageLength: 25, dom: 'lrtip',
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
order: [[4, 'desc']],
language: { search: "Search:", searchPlaceholder: "Filter studies (searches full references)..." },
columnDefs: [
{ targets: 0, className: 'details-control', orderable: false, data: null, defaultContent: '<button type="button" class="study-details" aria-label="Show study evidence" aria-expanded="false"></button>', width: '30px' },
{ targets: [1, 3], width: '20%', render: (d, t) => t === 'display' ? (typeof d === 'object' ? d.display : d) : (typeof d === 'object' ? d.search : d) },
{ targets: 0, className: 'details-control', orderable: false, data: null, defaultContent: '<button type="button" class="study-details" aria-label="Show study evidence" aria-expanded="false"></button>', width: '3%' },
{ targets: [1, 3], width: '22%', render: (d, t) => t === 'display' ? (typeof d === 'object' ? d.display : d) : (typeof d === 'object' ? d.search : d) },
{ targets: [2, 4], width: '5%' },
{ targets: 5, width: '9%', render: (d, t) => t === 'display' ? (typeof d === 'object' ? d.display : d) : (typeof d === 'object' ? d.search : d) },
{ targets: 6, width: '6%' },
{ targets: [7, 8], width: '12%', render: (d, t) => t === 'display' ? (typeof d === 'object' ? d.display : d) : (typeof d === 'object' ? d.search : d) }
{ targets: 6, width: '8%', className: 'type-cell' },
{ targets: [7, 8], width: '13%', className: 'link-cell', render: (d, t) => t === 'display' ? (typeof d === 'object' ? d.display : d) : (typeof d === 'object' ? d.search : d) }
],
createdRow: (row, d, dataIndex) => { $(row).attr('data-index', dataIndex); row.querySelector('.study-details').setAttribute('aria-label', 'Show evidence for ' + (data[dataIndex].title_o || 'original report')); }
});
Expand Down
14 changes: 13 additions & 1 deletion assets/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,19 @@ tr.shown td.details-control .study-details::before { transform: rotate(90deg); }
/* Browse mobile */
.browse-desktop { display: block; overflow-x: auto; }
.browse-desktop #flora-table { table-layout: fixed; }
.browse-desktop #flora-table td, .browse-desktop #flora-table th { word-wrap: break-word; overflow-wrap: anywhere; }
/* Text wraps between words; identifiers stay on one line and are shortened
with an ellipsis (full value in the link, its tooltip and the evidence row). */
.browse-desktop #flora-table td, .browse-desktop #flora-table th { overflow-wrap: break-word; }

@cubic-dev-ai cubic-dev-ai Bot Oct 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Replacing overflow-wrap: anywhere with break-word removes the intrinsic (min-content) size reduction for long unbreakable values. The expanded evidence row lives inside #flora-table td, and its .detail-grid uses minmax(300px, 1fr), so a long full report URL/DOI can force the card wider than the fixed-layout cell at narrow desktop widths and overflow the table. Keep anywhere for td (the nowrap link-cells are unaffected by it).

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/styles.css, line 418:

<comment>Replacing `overflow-wrap: anywhere` with `break-word` removes the intrinsic (min-content) size reduction for long unbreakable values. The expanded evidence row lives inside `#flora-table td`, and its `.detail-grid` uses `minmax(300px, 1fr)`, so a long full report URL/DOI can force the card wider than the fixed-layout cell at narrow desktop widths and overflow the table. Keep `anywhere` for `td` (the nowrap link-cells are unaffected by it).</comment>

<file context>
@@ -413,7 +413,11 @@ tr.shown td.details-control .study-details::before { transform: rotate(90deg); }
-.browse-desktop #flora-table td, .browse-desktop #flora-table th { word-wrap: break-word; overflow-wrap: anywhere; }
+/* Text wraps between words; identifiers stay on one line and are shortened
+   with an ellipsis (full value in the link, its tooltip and the evidence row). */
+.browse-desktop #flora-table td, .browse-desktop #flora-table th { overflow-wrap: break-word; }
+.browse-desktop #flora-table th { overflow-wrap: normal; }
+.browse-desktop #flora-table td.link-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</file context>
Suggested change
.browse-desktop #flora-table td, .browse-desktop #flora-table th { overflow-wrap: break-word; }
.browse-desktop #flora-table td, .browse-desktop #flora-table th { overflow-wrap: anywhere; }

/* Narrow desktop widths: the short Type and outcome labels hyphenate instead of breaking mid-syllable. */
.browse-desktop #flora-table td.type-cell, .browse-desktop #flora-table .badge { -webkit-hyphens: auto; hyphens: auto; }
.browse-desktop #flora-table th { overflow-wrap: normal; }
.browse-desktop #flora-table td.link-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@cubic-dev-ai cubic-dev-ai Bot Oct 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3: overflow: hidden on the DOI/report cells clips the focus outline of truncated links at the right cell edge, so keyboard navigators see a sliced focus ring. Add a focus-visible style rendered inside the cell (inset box-shadow) so the indicator stays visible despite the clipping.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/styles.css, line 420:

<comment>`overflow: hidden` on the DOI/report cells clips the focus outline of truncated links at the right cell edge, so keyboard navigators see a sliced focus ring. Add a focus-visible style rendered inside the cell (inset box-shadow) so the indicator stays visible despite the clipping.</comment>

<file context>
@@ -413,7 +413,11 @@ tr.shown td.details-control .study-details::before { transform: rotate(90deg); }
+   with an ellipsis (full value in the link, its tooltip and the evidence row). */
+.browse-desktop #flora-table td, .browse-desktop #flora-table th { overflow-wrap: break-word; }
+.browse-desktop #flora-table th { overflow-wrap: normal; }
+.browse-desktop #flora-table td.link-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .browse-desktop #flora-table .badge { display: inline-block; max-width: 100%; white-space: normal; word-break: break-word; text-align: left; line-height: 1.3; }
 .browse-mobile { display: none; }
</file context>
Suggested change
.browse-desktop #flora-table td.link-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-desktop #flora-table td.link-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-desktop #flora-table td.link-cell a:focus-visible { box-shadow: inset 0 0 0 2px var(--flora-focus, var(--flora-primary)); outline: none; }

/* The link itself carries the ellipsis so its focus ring can sit inside the clipped cell. */
.browse-desktop #flora-table td.link-cell a { display: block; overflow: hidden; text-overflow: ellipsis; }
.browse-desktop #flora-table td.link-cell a:focus-visible { outline-offset: -3px; }
/* The expanded evidence row shows full URLs and DOIs; let them wrap anywhere. */
.browse-desktop #flora-table .detail-row { overflow-wrap: anywhere; }
.browse-desktop #flora-table .detail-grid > * { min-width: 0; }
.browse-desktop #flora-table .badge { display: inline-block; max-width: 100%; white-space: normal; word-break: break-word; text-align: left; line-height: 1.3; }
.browse-mobile { display: none; }
.browse-mobile-search { margin-bottom: 1rem; }
Expand Down
Loading