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; }