feat: reactive styling for ambiguous match summary

dgidb · Dec 29, 2023 · 87e2350 · 87e2350
1 parent 3044cdd
commit 87e2350
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/client/src/components/GeneCategories/AmbiguousMatchCard/AmbiguousMatchCard.tsx b/client/src/components/GeneCategories/AmbiguousMatchCard/AmbiguousMatchCard.tsx
@@ -67,7 +67,8 @@ export const AmbiguousMatchesCard: React.FC<Props> = ({ match }) => {
           </Box>
         ) : (
           <Typography fontStyle="italic">
-            {match.searchTerm} is ambiguous. Please select context from drop down.
+            {match.searchTerm} is ambiguous. Please select context from drop
+            down.
           </Typography>
         )}
       </AccordionDetails>

diff --git a/client/src/components/Shared/AmbiguousTermsSummary/AmbiguousTermsSummary.tsx b/client/src/components/Shared/AmbiguousTermsSummary/AmbiguousTermsSummary.tsx
@@ -21,8 +21,13 @@ export const AmbiguousTermsSummary: React.FC<AmbiguousTermsSummaryProps> = ({
 }) => {
   const isMobile = useGetIsMobile();
   return !isLoading ? (
-    <Box display="flex" justifyContent="space-between" minHeight="50px" flexWrap={isMobile ? "wrap" : "nowrap"}>
-      <Box width={unmatchedTerms?.length > 0 && !isMobile  ? '80%' : '100%'}>
+    <Box
+      display="flex"
+      justifyContent="space-between"
+      minHeight="50px"
+      flexWrap={isMobile ? 'wrap' : 'nowrap'}
+    >
+      <Box width={unmatchedTerms?.length > 0 && !isMobile ? '80%' : '100%'}>
         {ambiguousTerms?.length > 0 ? (
           ambiguousTerms?.map((term: any) => {
             return (
@@ -42,7 +47,12 @@ export const AmbiguousTermsSummary: React.FC<AmbiguousTermsSummaryProps> = ({
         )}
       </Box>
       {unmatchedTerms?.length > 0 && (
-        <Box width="20%" minWidth="fit-content" className="unmatched-terms" mt={isMobile ? 2 : 0}>
+        <Box
+          width="20%"
+          minWidth="fit-content"
+          className="unmatched-terms"
+          mt={isMobile ? 2 : 0}
+        >
           <h3>
             <b>Unmatched Terms:</b>
           </h3>