update small

src/ui/NewSide/index.module.scss

@@ -34,6 +34,13 @@
     height: 44px;
     flex: 0 0 44px;
     justify-content: space-between;
+    padding: 1em 2em;
+    font-size: 16px;
+  }
+  .deck-zone {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
   }
   background-color: hsla(0, 0%, 100%, 0.05);
   backdrop-filter: blur(5px);

src/ui/NewSide/index.tsx

@@ -5,7 +5,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
 import { CardDetail } from "../BuildDeck/CardDetail";
-import { Background } from "../Shared";
+import { Background, ScrollableArea } from "../Shared";
 import { Chat } from "../WaitRoom/Chat";
 import styles from "./index.module.scss";
 
@@ -20,6 +20,7 @@ export const Component: React.FC = () => {
         <div className={styles.content}>
           <div className={styles["deck-container"]}>
             <Space className={styles.title}>
+              <div>请拖动更换副卡组</div>
               <Space style={{ marginRight: 6 }}>
                 <Button type="text" size="small" icon={<UndoOutlined />}>
                   重置
@@ -29,6 +30,7 @@ export const Component: React.FC = () => {
                 </Button>
               </Space>
             </Space>
+            <ScrollableArea className={styles["deck-zone"]}></ScrollableArea>
           </div>
         </div>
         <div className={styles["detail-container"]}>