Repository navigation
Keep Browse identifiers on one line and widen title columns - #21
Merged
Merged
Conversation
The desktop Browse table broke DOIs mid-token across several lines (overflow-wrap: anywhere in narrow 12% columns), while titles were squeezed into 20% columns. - Titles wrap only between words; title columns widen to 22%. - DOI and report-link cells stay on one line with an ellipsis; the full value remains in the link, its tooltip, the evidence row and the CSV. - DataTables autoWidth is off so the declared widths apply and the table fits its container; headers no longer break mid-word. At 1280px: mean row height 96 -> 85px; no table overflow. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configuration
📒 Files selected for processing (2)
Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review. 📝 WalkthroughWalkthroughThe browse table now displays valid report URLs without their protocol and optional ChangesBrowse Table Link and Layout Updates
Priority: ⬇️ Low Estimated code review effort: 2 (Simple) | ~10 minutes Change: Bug fix Suggested reviewers: Merge Risk: ⚪ Minimal · up to The changes aim to improve desktop table readability while keeping full link values accessible. No actionable merge-blocking risk is established; the PR appears ready after normal checks. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 1 files. (1 skipped: 1 unsupported.)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 2 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. 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. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="assets/styles.css">
<violation number="1" location="assets/styles.css:418">
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).</violation>
<violation number="2" location="assets/styles.css:420">
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.</violation>
</file>
Reply with feedback, questions, or to request a fix.
View guided diff | Turn on auto-fix | Re-trigger cubic
| .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; } |
There was a problem hiding this comment.
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; } |
| 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; } |
There was a problem hiding this comment.
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; } |
Addresses the cubic review of this PR: - Column widths now sum to exactly 100% (details column 3%, link columns 13%), so the fixed layout cannot exceed its container. - The link inside each ellipsis cell carries its own ellipsis and an inset focus outline, so the keyboard focus ring is not clipped. - The expanded evidence row wraps full URLs/DOIs anywhere again, so long identifiers cannot push it wider than the cell. - At narrow desktop widths the Type and outcome labels hyphenate (replica-tion) instead of breaking mid-syllable. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
All reported issues were addressed across 2 files (changes from recent commits).
Reply with feedback, questions, or to request a fix.
View guided diff | Turn on auto-fix | Re-trigger cubic
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The desktop Browse table broke DOIs mid-token across several lines (
overflow-wrap: anywherein narrow 12% columns), while titles were squeezed into 20% columns. This replaces the Browse-table sizing from the closed #7. #7's approach would have widened the table to 1100 px and needed horizontal scrolling; this keeps the fixed layout so the table fits and stays stable while paging and sorting.Changes
autoWidthis off, so the declared widths apply. Without this, DataTables sized columns to the unwrapped DOIs and the table overflowed to 1,411 px.Measured at 1280 px (first 25 rows)
Mobile cards are unaffected (the desktop table is hidden below 768 px).
Verification
Local Python tests pass. Before/after screenshots were checked. Browser suite left to CI.
Review follow-up (cubic)
replica-tion, with-webkit-hyphensfor older Safari); titles still wrap only between words.npm test12/12 locally and in CI.🤖 Generated with Claude Code
Summary by cubic
Fixes the desktop Browse table so DOIs no longer break across lines and titles get more room.
autoWidthis off, so the table fits its container. Type and outcome labels hyphenate at narrow widths; the evidence row wraps long URLs and DOIs anywhere.At 1280px, mean row height drops from 96 to 85px and the table no longer overflows. Mobile cards are unaffected.
Written for commit 892c179. Summary will update on new commits.
Summary by CodeRabbit
www.or protocol prefix while retaining the full address for reference. Original-study DOIs display in full.