fix: style

Author: wangdicoder

apps/docs/src/containers/theme-studio/preview-components/mail-preview.tsx

@@ -396,18 +396,18 @@ export function MailPreview(): React.ReactElement {
       <Split min={320} max={360} defaultSize="42%" className="theme-studio__mail-split">
         <Card className="theme-studio__mail-panel">
         <Card.Content>
-          <div className="theme-studio__mail-panel-head">
+          <Flex justify="space-between" className="theme-studio__mail-panel-head">
             <Heading level={3}>{folderLabels[activeFolder]}</Heading>
             <Segmented
-              size="sm"
+              size="md"
               value={activeFilter}
               options={[
                 { label: 'All mail', value: 'all' },
                 { label: 'Unread', value: 'unread' },
               ]}
               onChange={(value) => setActiveFilter(String(value) as MailFilter)}
             />
-          </div>
+          </Flex>
 
           <div className="theme-studio__mail-search-wrap">
             <Input

apps/docs/src/containers/theme-studio/theme-studio.scss

@@ -1756,22 +1756,24 @@
 }
 
 .theme-studio__mail-panel-head {
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  padding: 12px 16px;
+  padding: 20px 16px;
   border-bottom: 1px solid var(--editor-border);
 }
 
 .theme-studio__mail-panel-head .ty-typography {
   margin: 0;
+  flex: 1 1 auto;
+  min-width: 0;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: -0.01em;
 }
 
+.theme-studio__mail-panel-head .ty-segmented {
+  flex: 0 0 auto;
+}
+
 .theme-studio__mail-search-wrap {
   padding: 12px 16px;
 }