fix: large texts on dialogs don't cause wrap around issues

imperial · Jan 27, 2025 · a80a423 · a80a423
1 parent af87755
commit a80a423
Showing 1 changed file with 27 additions and 21 deletions.
diff --git a/components/dialog/CandidateCallout.tsx b/components/dialog/CandidateCallout.tsx
@@ -1,5 +1,5 @@
 import { shortenEmail } from '@/lib/utils'
-import { Callout, DataList, Flex } from '@radix-ui/themes'
+import { Card, DataList, Flex, Text } from '@radix-ui/themes'
 import React, { FC } from 'react'
 
 interface CandidateCalloutProps {
@@ -24,28 +24,32 @@ const CandidateCallout: FC<CandidateCalloutProps> = ({
   academicComments
 }) => {
   return (
-    <Callout.Root>
-      <Flex align="center" gap="9">
-        <DataList.Root>
-          <ListItem label="Applicant" value={`${firstName} ${surname}`} />
-          <ListItem label="UCAS number" value={ucasNumber} />
-          <ListItem label="Reviewer" value={reviewer ? shortenEmail(reviewer) : 'Unassigned'} />
-        </DataList.Root>
-        {showExtraInformation && (
+    <Card className="bg-blue-200">
+      <Flex>
+        <Flex flexBasis={showExtraInformation ? '40%' : '100%'}>
           <DataList.Root>
-            <ListItem
-              label="Reviewer percentile"
-              value={reviewerPercentile ? reviewerPercentile.toString() : 'N/A'}
-            />
-            <ListItem
-              label="Overall score"
-              value={overallScore ? overallScore.toString() : 'N/A'}
-            />
-            <ListItem label="Academic comments" value={academicComments || 'N/A'} />
+            <ListItem label="Applicant" value={`${firstName} ${surname}`} />
+            <ListItem label="UCAS number" value={ucasNumber} />
+            <ListItem label="Reviewer" value={reviewer ? shortenEmail(reviewer) : 'Unassigned'} />
           </DataList.Root>
+        </Flex>
+        {showExtraInformation && (
+          <Flex flexBasis="60%">
+            <DataList.Root>
+              <ListItem
+                label="Reviewer percentile"
+                value={reviewerPercentile ? reviewerPercentile.toString() : 'N/A'}
+              />
+              <ListItem
+                label="Overall score"
+                value={overallScore ? overallScore.toString() : 'N/A'}
+              />
+              <ListItem label="Academic comments" value={academicComments || 'N/A'} />
+            </DataList.Root>
+          </Flex>
         )}
       </Flex>
-    </Callout.Root>
+    </Card>
   )
 }
 
@@ -57,8 +61,10 @@ interface ListItemProps {
 const ListItem: FC<ListItemProps> = ({ label, value }) => {
   return (
     <DataList.Item align="center">
-      <DataList.Label>{label}:</DataList.Label>
-      <DataList.Value className="font-bold">{value}</DataList.Value>
+      <DataList.Label>
+        <Text weight="bold">{label}:</Text>
+      </DataList.Label>
+      <DataList.Value>{value}</DataList.Value>
     </DataList.Item>
   )
 }