From adf9022650af9ed87bf78bb819969b91676dd451 Mon Sep 17 00:00:00 2001
From: Monine Melolaris <alpzmj9@icloud.com>
Date: Wed, 10 Apr 2024 12:47:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BD=95=E6=92=AD=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20(#861)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复：
直播间标题过长导致上方状态标识、下方按钮消失的问题；
部分浏览器页面宽度下，按钮溢出边框的问题。
调整：
将状态标识按钮调整为与旧版一致。
---
 app/streamers/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/streamers/page.tsx b/app/streamers/page.tsx
index 27d024e..3ba6195 100644
--- a/app/streamers/page.tsx
+++ b/app/streamers/page.tsx
@@ -134,8 +134,8 @@ export default function Home() {
                 <List
                     grid={{
                         gutter: 12,
-                        xs: 24,
-                        sm: 24,
+                        xs: 20,
+                        sm: 18,
                         md: 12,
                         lg: 8,
                         xl: 6,
@@ -147,7 +147,7 @@ export default function Home() {
                             <Card
                             shadows='hover'
                             style={{
-                                maxWidth: 310,
+                                maxWidth: 360,
                                 margin: '8px 2px',
                                 flexGrow: 1,
                             }}
@@ -156,14 +156,14 @@ export default function Home() {
                                 alignItems: 'center',
                                 justifyContent: 'space-between'
                             }}>
-                                <div style={{ flexGrow: 1, maxWidth: 250 }}>
+                                <div style={{ position: 'absolute', right: "10%", top: 9}}>{item.status}</div>
+                                <div style={{ flexGrow: 1}}>
                                     <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                        <h3 style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.remark}</h3>
-                                        {item.status}
+                                        <h3 style={{ color: 'var(--semi-color-text-0)', fontWeight: 500, maxWidth: '60%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.remark}</h3>
                                     </div>
                                     <Text ellipsis={{ showTooltip: { opts: { style: { wordBreak: 'break-all' } } } }} type="tertiary">{item.url}</Text>
-                                    <div style={{ margin: '0', display: 'flex', justifyContent: 'flex-end' }}>
-                                        <ButtonGroup theme='borderless'>
+                                    <div style={{ margin: '0', display: 'flex', padding: "0 0 32px 0px", justifyContent: 'flex-end' }}>
+                                        <ButtonGroup theme='borderless' style={{ position: 'absolute', right: "10%", bottom: "15%"}}>
                                             <TemplateModal onOk={handleUpdate} entity={item}>
                                                 <Button theme='borderless' icon={<IconEdit2Stroked />}></Button>
                                             </TemplateModal>