style: add missing noWrap for some titles

GZTimeWalker · Mar 13, 2024 · ec19c5e · ec19c5e
1 parent fd5225f
commit ec19c5e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx b/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx
@@ -260,14 +260,16 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
         },
       }}
       title={
-        <Group w="100%" position="apart">
-          <Group>
+        <Group noWrap w="100%" position="apart" spacing="sm">
+          <Group noWrap spacing="sm">
             {tagData && (
               <Icon path={tagData.icon} size={1} color={theme.colors[tagData?.color][5]} />
             )}
-            <Title order={4}>{challenge?.title ?? title}</Title>
+            <Title w="calc(100% - 1.5rem)" order={4} lineClamp={1}>
+              {challenge?.title ?? title}
+            </Title>
           </Group>
-          <Text fw={700} ff={theme.fontFamilyMonospace}>
+          <Text miw="5em" fw={700} ff={theme.fontFamilyMonospace}>
             {challenge?.score ?? score} pts
           </Text>
         </Group>

diff --git a/src/GZCTF/ClientApp/src/components/admin/ChallengePreviewModal.tsx b/src/GZCTF/ClientApp/src/components/admin/ChallengePreviewModal.tsx
@@ -111,14 +111,16 @@ const ChallengePreviewModal: FC<ChallengePreviewModalProps> = (props) => {
         },
       }}
       title={
-        <Group w="100%" position="apart">
-          <Group>
+        <Group noWrap w="100%" position="apart" spacing="sm">
+          <Group noWrap spacing="sm">
             {tagData && (
               <Icon path={tagData.icon} size={1} color={theme.colors[tagData?.color][5]} />
             )}
-            <Title order={4}>{challenge?.title ?? ''}</Title>
+            <Title w="calc(100% - 1.5rem)" order={4} lineClamp={1}>
+              {challenge?.title ?? ''}
+            </Title>
           </Group>
-          <Text fw={700} ff={theme.fontFamilyMonospace}>
+          <Text miw="5em" fw={700} ff={theme.fontFamilyMonospace}>
             {challenge?.originalScore ?? 500} pts
           </Text>
         </Group>

diff --git a/src/GZCTF/ClientApp/src/components/admin/WithGameEditTab.tsx b/src/GZCTF/ClientApp/src/components/admin/WithGameEditTab.tsx
@@ -78,7 +78,7 @@ const WithGameEditTab: FC<GameEditTabProps> = ({
           >
             {t('admin.button.back')}
           </Button>
-          <Group position={contentPos ?? 'apart'} w="calc(100% - 10rem)">
+          <Group noWrap position={contentPos ?? 'apart'} w="calc(100% - 10rem)">
             {head}
           </Group>
         </>