diff --git a/assets/app.js b/assets/app.js
index 32b84323..d4a0ed94 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -257,7 +257,11 @@ function formatUrlOrDoi(url, doi) {
if (href) return `${escapeHtml(truncateText(url,40))}`;
return formatDOI(doi,true);
}
-function formatUrlOrDoiShort(url, doi) { return formatUrlOrDoi(url,doi); }
+function formatUrlOrDoiShort(url, doi) {
+ const href = safeHref(url);
+ if (href) return `${escapeHtml(url.replace(/^https?:\/\/(www\.)?/i, ''))}`;
+ return formatDOI(doi, true);
+}
function formatAuthors(authorData) {
if (!authorData) return '-';
@@ -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: '', 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: '', 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')); }
});
diff --git a/assets/styles.css b/assets/styles.css
index c46f3df5..75247d41 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -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; }
+/* 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; }
+/* 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; }