fix(style): flag icon in challenge cards are not unified

GZTimeWalker · Aug 7, 2023 · e926946 · e926946
1 parent f413e95
commit e926946
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/src/GZCTF/ClientApp/package.json b/src/GZCTF/ClientApp/package.json
@@ -32,7 +32,7 @@
     "embla-carousel-react": "^7.1.0",
     "katex": "^0.16.8",
     "lz-string": "^1.5.0",
-    "marked": "^6.0.0",
+    "marked": "^7.0.0",
     "pdfjs-dist": "3.6.172",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
@@ -48,7 +48,7 @@
     "@nabla/vite-plugin-eslint": "^1.5.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/katex": "^0.16.2",
-    "@types/node": "20.4.7",
+    "@types/node": "20.4.8",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",

diff --git a/src/GZCTF/ClientApp/pnpm-lock.yaml b/src/GZCTF/ClientApp/pnpm-lock.yaml
diff --git a/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx b/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx
@@ -10,6 +10,7 @@ import {
   Title,
   createStyles,
   keyframes,
+  Box,
 } from '@mantine/core'
 import { mdiFlag } from '@mdi/js'
 import { Icon } from '@mdi/react'
@@ -72,11 +73,11 @@ const ChallengeCard: FC<ChallengeCardProps> = (props: ChallengeCardProps) => {
       })}
     >
       <Stack spacing="sm" pos="relative" style={{ zIndex: 99 }}>
-        <Group noWrap position="apart" spacing="xs">
+        <Group noWrap position="apart" spacing={2}>
           <Text lineClamp={1} fw={700} size={theme.fontSizes.lg}>
             {challenge.title}
           </Text>
-          {solved && <Icon path={mdiFlag} size={1} color={colorStr} />}
+          <Box miw="1.5em">{solved && <Icon path={mdiFlag} size={1} color={colorStr} />}</Box>
         </Group>
         <Divider />
         <Group noWrap position="apart" align="center" spacing={2}>

diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -34,7 +34,7 @@ const GRID_BREAKPOINTS = [
   { maxWidth: 2500, cols: 5 },
   { maxWidth: 2100, cols: 4 },
   { maxWidth: 1700, cols: 3 },
-  { maxWidth: 1300, cols: 2 },
+  { maxWidth: 1350, cols: 2 },
   { maxWidth: 900, cols: 1 },
 ]