From 0247eaeda9775804c0d5fe2adac26af69ce3dd19 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sun, 30 Nov 2025 00:30:10 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E5=AF=B9=E8=AF=9D=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=20Tab=20=E6=A0=8F=E9=A1=B9=E7=9B=AE=E8=BF=87=E5=A4=9A?=
 =?UTF-8?q?=E6=97=B6=E5=8F=AF=E4=BB=A5=E5=B7=A6=E5=8F=B3=E6=BB=91=E5=8A=A8?=
 =?UTF-8?q?,=20=E5=B9=B6=E4=BF=9D=E6=8C=81=E5=8E=9F=E6=9C=89=E7=9A=84?=
 =?UTF-8?q?=E5=BD=A2=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat/ChatFragment.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 06d1f31..89d2c23 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -95,6 +95,18 @@ const markedInstance = new marked.Marked({
     }
 })
 
+interface MduiTabFitSizeArgs extends React.HTMLAttributes<HTMLElement & Tab> {
+    value: string
+}
+function MduiTabFitSize({ children, ...props }: MduiTabFitSizeArgs) {
+    return <mdui-tab {...props} style={{
+        ...props?.style,
+        minWidth: 'fit-content',
+    }}>
+        {children}
+    </mdui-tab>
+}
+
 export default function ChatFragment({ target, showReturnButton, onReturnButtonClicked, openChatInfoDialog, openUserInfoDialog, ...props }: Args) {
     const [messagesList, setMessagesList] = React.useState([] as Message[])
     const [chatInfo, setChatInfo] = React.useState({
@@ -114,6 +126,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
     React.useEffect(() => {
         $(containerTabRef.current!.shadowRoot).append(`<style>.container::after { height: 0 !important; }</style>`)
         $(tabRef.current!.shadowRoot).append(`<style>.container::after { height: 0 !important; }</style>`)
+            ; (!isMobileUI()) && $(tabRef.current!.shadowRoot).append(`<style>.no-scroll-bar::-webkit-scrollbar{width:0px !important}*::-webkit-scrollbar{width:7px;height:10px}*::-webkit-scrollbar-track{width:6px;background:rgba(#101f1c,0.1);-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em}*::-webkit-scrollbar-thumb{background-color:rgba(144,147,153,0.5);background-clip:padding-box;min-height:28px;-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em;transition:background-color 0.3s;cursor:pointer}*::-webkit-scrollbar-thumb:hover{background-color:rgba(144,147,153,0.3)}</style>`)
     }, [target])
 
     async function getChatInfoAndInit() {
@@ -347,17 +360,18 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                     display: "flex",
                     flexDirection: "column",
                     height: "100%",
+                    overflowX: 'auto',
                 }}>
                     {
                         chatInfo.is_member ? <>
-                            <mdui-tab value="Chat">{chatInfo.title}</mdui-tab>
-                            {chatInfo.type == 'group' && chatInfo.is_admin && <mdui-tab value="NewMemberRequests">加入请求</mdui-tab>}
-                            {chatInfo.type == 'group' && <mdui-tab value="GroupMembers">群组成员</mdui-tab>}
+                            <MduiTabFitSize value="Chat">{chatInfo.title}</MduiTabFitSize>
+                            {chatInfo.type == 'group' && chatInfo.is_admin && <MduiTabFitSize value="NewMemberRequests">加入请求</MduiTabFitSize>}
+                            {chatInfo.type == 'group' && <MduiTabFitSize value="GroupMembers">群组成员</MduiTabFitSize>}
                         </>
-                            : <mdui-tab value="RequestJoin">{chatInfo.title}</mdui-tab>
+                            : <MduiTabFitSize value="RequestJoin">{chatInfo.title}</MduiTabFitSize>
                     }
-                    {chatInfo.type == 'group' && <mdui-tab value="Settings">设置</mdui-tab>}
-                    <mdui-tab value="None" style={{ display: 'none' }}></mdui-tab>
+                    {chatInfo.type == 'group' && <MduiTabFitSize value="Settings">设置</MduiTabFitSize>}
+                    <MduiTabFitSize value="None" style={{ display: 'none' }}></MduiTabFitSize>
                 </mdui-tabs>
                 <div style={{
                     flexGrow: '1',