diff --git a/app/views/ReportView/components/RapidSummary/index.scss b/app/views/ReportView/components/RapidSummary/index.scss index 692555d2d..e2a386d4e 100644 --- a/app/views/ReportView/components/RapidSummary/index.scss +++ b/app/views/ReportView/components/RapidSummary/index.scss @@ -32,6 +32,13 @@ &__none { padding: 16px; } + + &__unknown-significance { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); + grid-gap: 1rem; + margin: 1rem 0; + } } .rapid-summary--print { diff --git a/app/views/ReportView/components/RapidSummary/index.tsx b/app/views/ReportView/components/RapidSummary/index.tsx index 201439f54..1122f6094 100644 --- a/app/views/ReportView/components/RapidSummary/index.tsx +++ b/app/views/ReportView/components/RapidSummary/index.tsx @@ -591,31 +591,31 @@ const RapidSummary = ({ const unknownSignificanceSection = useMemo(() => { if (unknownSignificanceResults?.length > 0) { + const sortedVUS = unknownSignificanceResults.sort(({ displayName: displayNameA }, { displayName: displayNameB }) => { + if (displayNameA < displayNameB) { + return -1; + } + if (displayNameA > displayNameB) { + return 1; + } + return 0; + }); + return ( - - { - (unknownSignificanceResults).sort(({ displayName: displayNameA }, { displayName: displayNameB }) => { - if (displayNameA < displayNameB) { - return -1; - } - if (displayNameA > displayNameB) { - return 1; - } - return 0; - }).map((entry) => ( - - - {getGenomicEvent({ data: entry })} - - - )) - } - +
+ {sortedVUS.map((entry) => ( + + + {getGenomicEvent({ data: entry })} + + + ))} +
); } return (