From 128bc2241d6182770ba08c208490542546433066 Mon Sep 17 00:00:00 2001
From: zhsama <torvalds@linux.do>
Date: Wed, 22 Oct 2025 17:35:04 +0800
Subject: [PATCH] feat(checkbox): adjust styles for  checkbox component layout

---
 web/app/components/base/badge.tsx               | 2 +-
 web/app/components/base/checkbox-list/index.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index 0362d8d6c4..9a0c93118a 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -20,7 +20,7 @@ const Badge = ({
   return (
     <div
       className={cn(
-        'relative inline-flex h-5 items-center rounded-[5px] border border-divider-deep px-[5px] leading-3 text-text-tertiary',
+        'relative inline-flex h-5 items-center whitespace-nowrap rounded-[5px] border border-divider-deep px-[5px] leading-3 text-text-tertiary',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index cc0b561c90..ca8333a200 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -99,7 +99,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
   }, [value, onChange, disabled])
 
   return (
-    <div className={cn('flex flex-col gap-1', containerClassName)}>
+    <div className={cn('flex w-full flex-col gap-1', containerClassName)}>
       {label && (
         <div className='system-sm-medium text-text-secondary'>
           {label}
@@ -122,9 +122,9 @@ const CheckboxList: FC<CheckboxListProps> = ({
                 disabled={disabled}
               />
             )}
-            {!searchQuery ? <div className='flex flex-1 items-center gap-1'>
+            {!searchQuery ? <div className='flex min-w-0 flex-1 items-center gap-1'>
               {title && (
-                <span className='system-xs-semibold-uppercase leading-5 text-text-secondary'>
+                <span className='system-xs-semibold-uppercase truncate leading-5 text-text-secondary'>
                   {title}
                 </span>
               )}