style: playground right side

src/assets/styles/common.less

@@ -28,6 +28,10 @@
   margin-left: 5px;
 }
 
+.m-l-24 {
+  margin-left: 24px;
+}
+
 .m-l-4 {
   margin-left: 4px;
 }

src/pages/playground/embedding.tsx

@@ -91,7 +91,7 @@ const PlaygroundEmbedding: React.FC = () => {
         <Divider
           key="divider"
           orientation="vertical"
-          style={{ height: 24, marginInline: 16 }}
+          style={{ height: 16, marginInline: 16 }}
         />,
         <ExtraContent key="extra-content" />
       ]}

src/pages/playground/images.tsx

@@ -137,7 +137,7 @@ const TextToImages: React.FC = () => {
             <Segmented
               options={optionsList}
               size="middle"
-              className="m-l-40 font-600"
+              className="m-l-24 font-600"
               value={activeKey}
               onChange={(key) => setActiveKey(key)}
             ></Segmented>
@@ -170,7 +170,7 @@ const TextToImages: React.FC = () => {
         <Divider
           key="divider"
           orientation="vertical"
-          style={{ height: 24, marginInline: 16 }}
+          style={{ height: 16, marginInline: 16 }}
         />,
         <ExtraContent key="extra-content" />
       ]}

src/pages/playground/index.tsx

@@ -120,7 +120,7 @@ const Playground: React.FC = () => {
             <Segmented
               options={optionsList}
               size="middle"
-              className="m-l-40 font-600"
+              className="m-l-24 font-600"
               value={activeKey}
               onChange={(key) => setActiveKey(key)}
             ></Segmented>

src/pages/playground/rerank.tsx

@@ -95,7 +95,7 @@ const PlaygroundRerank: React.FC = () => {
         <Divider
           key="divider"
           orientation="vertical"
-          style={{ height: 24, marginInline: 16 }}
+          style={{ height: 16, marginInline: 16 }}
         />,
         <ExtraContent key="extra-content" />
       ]}

src/pages/playground/speech.tsx

@@ -174,7 +174,7 @@ const Playground: React.FC = () => {
             <Segmented
               options={optionsList}
               size="middle"
-              className="m-l-40 font-600"
+              className="m-l-24 font-600"
               value={activeKey}
               onChange={(key) => setActiveKey(key)}
             ></Segmented>
@@ -207,7 +207,7 @@ const Playground: React.FC = () => {
         <Divider
           key="divider"
           orientation="vertical"
-          style={{ height: 24, marginInline: 16 }}
+          style={{ height: 16, marginInline: 16 }}
         />,
         <ExtraContent key="extra-content" />
       ]}

src/pages/playground/style/ground-llm.less

@@ -19,7 +19,7 @@
 
     .box {
       width: 390px;
-      padding-inline: var(--layout-content-inlinepadding);
+      padding-inline: 24px;
     }
 
     &.collapsed {

src/pages/playground/video.tsx

@@ -91,7 +91,7 @@ const PlaygroundRerank: React.FC = () => {
         <Divider
           key="divider"
           orientation="vertical"
-          style={{ height: 24, marginInline: 16 }}
+          style={{ height: 16, marginInline: 16 }}
         />,
         <ExtraContent key="extra-content" />
       ]}