From f656cae79d17f68a37f8ad61fa08cca86bae95a2 Mon Sep 17 00:00:00 2001
From: GZTime <Time.GZ@outlook.com>
Date: Wed, 5 Apr 2023 01:32:26 +0800
Subject: [PATCH] feat: use input instead of text in scoreboard

---
 .../src/components/ScoreboardTable.tsx        | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/GZCTF/ClientApp/src/components/ScoreboardTable.tsx b/GZCTF/ClientApp/src/components/ScoreboardTable.tsx
index 8df893f8a..b441c5336 100644
--- a/GZCTF/ClientApp/src/components/ScoreboardTable.tsx
+++ b/GZCTF/ClientApp/src/components/ScoreboardTable.tsx
@@ -14,6 +14,7 @@ import {
   Select,
   Tooltip,
   Center,
+  Input,
 } from '@mantine/core'
 import { Icon } from '@mdi/react'
 import {
@@ -66,7 +67,7 @@ const useStyles = createStyles((theme) => ({
   },
 }))
 
-const Lefts = [0, 55, 95, 265, 335, 390]
+const Lefts = [0, 55, 95, 275, 345, 400]
 const Widths = Array(5).fill(0)
 Lefts.forEach((val, idx) => {
   Widths[idx - 1 || 0] = val - Lefts[idx - 1 || 0]
@@ -179,20 +180,25 @@ const TableRow: FC<{
           >
             {item.name?.slice(0, 1) ?? 'T'}
           </Avatar>
-          <Text
-            lineClamp={1}
-            align="left"
-            weight={500}
+          <Input
+            variant="unstyled"
+            value={item.name}
+            readOnly
+            size="sm"
             sx={(theme) => ({
-              userSelect: 'none',
+              wrapper: {
+                width: '100%',
+              },
 
-              ...theme.fn.hover({
-                cursor: 'pointer',
-              }),
+              input: {
+                userSelect: 'none',
+
+                ...theme.fn.hover({
+                  cursor: 'pointer',
+                }),
+              },
             })}
-          >
-            {item.name}
-          </Text>
+          />
         </Group>
       </td>
       <td className={cx(classes.theadMono, classes.theadFixLeft)} style={{ left: Lefts[3] }}>