Wrapped text in DiagnosticReportTable#15221
Conversation
WalkthroughModified the DiagnosticReportResultsTable component to fix text wrapping behavior. Updated table cell layout and styling to use whitespace normalization and word-break properties instead of flex-based structures. Adjusted column widths and spacing to prevent scrollbars and enable proper text wrapping for values, units, and reference ranges. Changes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 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 |
There was a problem hiding this comment.
Pull request overview
This PR implements text wrapping in the DiagnosticReportTable to improve readability and eliminate horizontal scrolling. The change enhances the user experience by ensuring all table content is visible without requiring scrollbar interaction.
Changes:
- Added text wrapping utilities (
whitespace-normal,wrap-break-word) to table cells - Implemented fixed table layout with percentage-based column widths for consistent sizing
- Adjusted spacing by replacing flexbox gap with margin for better text flow
| <div className="w-2 h-px bg-gray-400" /> | ||
| {component.code?.display} | ||
| </div> | ||
| <TableCell className="pl-4 border-r border-b border-gray-300 whitespace-normal wrap-break-word"> |
There was a problem hiding this comment.
The class 'wrap-break-word' is not a standard Tailwind CSS utility class. Use 'break-words' instead, which is the correct Tailwind utility for word breaking. This applies to all occurrences of 'wrap-break-word' in this file.
| <div className="w-2 h-px bg-gray-400" /> | ||
| {component.code?.display} |
There was a problem hiding this comment.
The removal of the flex container wrapper ('flex items-center gap-1') causes the decorative line and text to no longer be properly aligned. The original flex layout should be preserved to maintain the visual alignment of these elements.
| <div className="w-2 h-px bg-gray-400" /> | |
| {component.code?.display} | |
| <div className="flex items-center gap-1"> | |
| <div className="w-2 h-px bg-gray-400" /> | |
| <span>{component.code?.display}</span> | |
| </div> |
| <TableCell className="border-r border-b border-gray-300"> | ||
| <div className="flex items-center gap-2"> | ||
| <TableCell className="border-r border-b border-gray-300 whitespace-normal wrap-break-word"> | ||
| <div className="whitespace-normal"> |
There was a problem hiding this comment.
Removing 'flex items-center gap-2' and only keeping 'whitespace-normal' may cause misalignment between the value and unit, especially when the text wraps. Consider using 'flex flex-wrap items-center' instead to maintain proper alignment while allowing wrapping.
| <div className="whitespace-normal"> | |
| <div className="flex flex-wrap items-center whitespace-normal"> |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Facility/services/diagnosticReports/components/DiagnosticReportResultsTable.tsx (1)
146-173: Same invalid class in observation cells.Apply the same fix here — replace
wrap-break-wordwithbreak-words.🐛 Proposed fix for observation cells
- <TableCell className="whitespace-normal wrap-break-word"> + <TableCell className="whitespace-normal break-words"> {observation.observation_definition?.title || observation.observation_definition?.code?.display} </TableCell> - <TableCell className="whitespace-normal wrap-break-word"> + <TableCell className="whitespace-normal break-words"> {!hasComponents && ( <div className="whitespace-normal"> <span>{observation.value.value}</span> {observation.value.unit && ( <span className="text-gray-500 ml-1"> {observation.value.unit.display} </span> )} </div> )} </TableCell> - <TableCell className="whitespace-normal wrap-break-word"> + <TableCell className="whitespace-normal break-words"> {!hasComponents && renderReferenceRange( observation.reference_range || [], observation.value, )} </TableCell> - <TableCell className="whitespace-normal wrap-break-word"> + <TableCell className="whitespace-normal break-words"> {!hasComponents && observation.interpretation && renderInterpretation(observation.interpretation)} </TableCell>
🤖 Fix all issues with AI agents
In
`@src/pages/Facility/services/diagnosticReports/components/DiagnosticReportResultsTable.tsx`:
- Around line 107-127: The Tailwind class `wrap-break-word` used in the
TableCell elements is invalid so text won't wrap; update each TableCell in
DiagnosticReportResultsTable (the cells rendering component.code?.display,
component.value, reference_range, and interpretation) to replace
`wrap-break-word` with the correct Tailwind utility `break-words` (ensure all
occurrences in the className strings for those TableCell elements are changed).
- Around line 187-202: In DiagnosticReportResultsTable.tsx, replace the invalid
Tailwind class "wrap-break-word" used on the two TableHead elements with the
correct class (e.g., "break-words") so headers can wrap as intended; keep the
existing "whitespace-normal" and "w-[25%]" classes and update the two TableHead
nodes inside the TableHeader (the header cells rendering t("reference_range")
and t("interpretation")) to use "break-words" instead of "wrap-break-word".
| <TableCell className="pl-4 border-r border-b border-gray-300 whitespace-normal wrap-break-word"> | ||
| <div className="w-2 h-px bg-gray-400" /> | ||
| {component.code?.display} | ||
| </TableCell> | ||
| <TableCell className="border-r border-b border-gray-300"> | ||
| <div className="flex items-center gap-2"> | ||
| <TableCell className="border-r border-b border-gray-300 whitespace-normal wrap-break-word"> | ||
| <div className="whitespace-normal"> | ||
| <span>{component.value.value}</span> | ||
| {component.value.unit && ( | ||
| <span className="text-gray-500"> | ||
| <span className="text-gray-500 ml-1"> | ||
| {component.value.unit.display} | ||
| </span> | ||
| )} | ||
| </div> | ||
| </TableCell> | ||
| <TableCell className="border-r border-b border-gray-300"> | ||
| <TableCell className="border-r border-b border-gray-300 whitespace-normal wrap-break-word"> | ||
| {component.reference_range && | ||
| renderReferenceRange(component.reference_range, component.value)} | ||
| </TableCell> | ||
| <TableCell className="border-b border-gray-300"> | ||
| <TableCell className="border-b border-gray-300 whitespace-normal wrap-break-word"> | ||
| {renderInterpretation(component.interpretation || "")} | ||
| </TableCell> |
There was a problem hiding this comment.
Invalid Tailwind class wrap-break-word — text wrapping won't work.
wrap-break-word is not a valid Tailwind CSS utility. The correct class is break-words (which sets overflow-wrap: break-word). Since this PR's goal is to fix text wrapping, using a non-existent class means the fix won't work as intended.
🐛 Proposed fix for component cells
- <TableCell className="pl-4 border-r border-b border-gray-300 whitespace-normal wrap-break-word">
+ <TableCell className="pl-4 border-r border-b border-gray-300 whitespace-normal break-words">
<div className="w-2 h-px bg-gray-400" />
{component.code?.display}
</TableCell>
- <TableCell className="border-r border-b border-gray-300 whitespace-normal wrap-break-word">
+ <TableCell className="border-r border-b border-gray-300 whitespace-normal break-words">
<div className="whitespace-normal">
<span>{component.value.value}</span>
{component.value.unit && (
<span className="text-gray-500 ml-1">
{component.value.unit.display}
</span>
)}
</div>
</TableCell>
- <TableCell className="border-r border-b border-gray-300 whitespace-normal wrap-break-word">
+ <TableCell className="border-r border-b border-gray-300 whitespace-normal break-words">
{component.reference_range &&
renderReferenceRange(component.reference_range, component.value)}
</TableCell>
- <TableCell className="border-b border-gray-300 whitespace-normal wrap-break-word">
+ <TableCell className="border-b border-gray-300 whitespace-normal break-words">
{renderInterpretation(component.interpretation || "")}
</TableCell>🤖 Prompt for AI Agents
In
`@src/pages/Facility/services/diagnosticReports/components/DiagnosticReportResultsTable.tsx`
around lines 107 - 127, The Tailwind class `wrap-break-word` used in the
TableCell elements is invalid so text won't wrap; update each TableCell in
DiagnosticReportResultsTable (the cells rendering component.code?.display,
component.value, reference_range, and interpretation) to replace
`wrap-break-word` with the correct Tailwind utility `break-words` (ensure all
occurrences in the className strings for those TableCell elements are changed).
| <div className="rounded-md border overflow-hidden"> | ||
| <Table className="border-collapse bg-white shadow-sm cursor-default table-fixed w-full"> | ||
| <TableHeader className="bg-gray-100"> | ||
| <TableRow className="divide-x-1 divide-gray-300"> | ||
| <TableHead className="font-medium text-sm text-gray-700"> | ||
| <TableHead className="font-medium text-sm text-gray-700 w-[25%]"> | ||
| {t("test")} | ||
| </TableHead> | ||
| <TableHead className="font-medium text-sm text-gray-700"> | ||
| <TableHead className="font-medium text-sm text-gray-700 w-[25%]"> | ||
| {t("result")} | ||
| </TableHead> | ||
| <TableHead className="font-medium text-sm text-gray-700"> | ||
| <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal wrap-break-word"> | ||
| {t("reference_range")} | ||
| </TableHead> | ||
| <TableHead className="font-medium text-sm text-gray-700"> | ||
| <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal wrap-break-word"> | ||
| {t("interpretation")} | ||
| </TableHead> |
There was a problem hiding this comment.
Table layout approach is good; fix invalid class in headers.
The table-fixed with explicit w-[25%] column widths and overflow-hidden on the container is a solid approach for controlled text wrapping. However, the same invalid wrap-break-word class needs to be fixed in the header cells.
🐛 Proposed fix for header cells
- <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal wrap-break-word">
+ <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal break-words">
{t("reference_range")}
</TableHead>
- <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal wrap-break-word">
+ <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal break-words">
{t("interpretation")}
</TableHead>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="rounded-md border overflow-hidden"> | |
| <Table className="border-collapse bg-white shadow-sm cursor-default table-fixed w-full"> | |
| <TableHeader className="bg-gray-100"> | |
| <TableRow className="divide-x-1 divide-gray-300"> | |
| <TableHead className="font-medium text-sm text-gray-700"> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%]"> | |
| {t("test")} | |
| </TableHead> | |
| <TableHead className="font-medium text-sm text-gray-700"> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%]"> | |
| {t("result")} | |
| </TableHead> | |
| <TableHead className="font-medium text-sm text-gray-700"> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal wrap-break-word"> | |
| {t("reference_range")} | |
| </TableHead> | |
| <TableHead className="font-medium text-sm text-gray-700"> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal wrap-break-word"> | |
| {t("interpretation")} | |
| </TableHead> | |
| <div className="rounded-md border overflow-hidden"> | |
| <Table className="border-collapse bg-white shadow-sm cursor-default table-fixed w-full"> | |
| <TableHeader className="bg-gray-100"> | |
| <TableRow className="divide-x-1 divide-gray-300"> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%]"> | |
| {t("test")} | |
| </TableHead> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%]"> | |
| {t("result")} | |
| </TableHead> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal break-words"> | |
| {t("reference_range")} | |
| </TableHead> | |
| <TableHead className="font-medium text-sm text-gray-700 w-[25%] whitespace-normal break-words"> | |
| {t("interpretation")} | |
| </TableHead> |
🤖 Prompt for AI Agents
In
`@src/pages/Facility/services/diagnosticReports/components/DiagnosticReportResultsTable.tsx`
around lines 187 - 202, In DiagnosticReportResultsTable.tsx, replace the invalid
Tailwind class "wrap-break-word" used on the two TableHead elements with the
correct class (e.g., "break-words") so headers can wrap as intended; keep the
existing "whitespace-normal" and "w-[25%]" classes and update the two TableHead
nodes inside the TableHeader (the header cells rendering t("reference_range")
and t("interpretation")) to use "break-words" instead of "wrap-break-word".
🚀 Preview Deployment Ready!🔗 Preview URL: https://pr-15221.care-preview-a7w.pages.dev 📱 Mobile Access: This preview will be automatically updated when you push new commits to this PR. |
🎭 Playwright Test ResultsStatus: ❌ Failed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4908 |
|
@SiddanthNayak Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
Fixes #15220
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.