From 7e457f7b4c2de287133d4fffd7df7e3ed72dc3a2 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 16 May 2023 16:51:46 +0800
Subject: [PATCH] chore: add responsive styles for workspace card (#2390)

---
 .../component/src/components/workspace-card/styles.ts    | 3 +++
 .../component/src/components/workspace-list/index.css.ts | 9 +++++++++
 .../component/src/components/workspace-list/index.tsx    | 2 ++
 3 files changed, 14 insertions(+)
 create mode 100644 packages/component/src/components/workspace-list/index.css.ts

diff --git a/packages/component/src/components/workspace-card/styles.ts b/packages/component/src/components/workspace-card/styles.ts
index 542607da6..ea995ec9a 100644
--- a/packages/component/src/components/workspace-card/styles.ts
+++ b/packages/component/src/components/workspace-card/styles.ts
@@ -61,6 +61,9 @@ export const StyledCard = styled('div')<{
         pointerEvents: 'auto',
       },
     },
+    '@media (max-width: 720px)': {
+      width: '100%',
+    },
   };
 });
 
diff --git a/packages/component/src/components/workspace-list/index.css.ts b/packages/component/src/components/workspace-list/index.css.ts
new file mode 100644
index 000000000..7060dba6b
--- /dev/null
+++ b/packages/component/src/components/workspace-list/index.css.ts
@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const workspaceItemStyle = style({
+  '@media': {
+    'screen and (max-width: 720px)': {
+      width: '100%',
+    },
+  },
+});
diff --git a/packages/component/src/components/workspace-list/index.tsx b/packages/component/src/components/workspace-list/index.tsx
index 9a5dc5cd9..5730bb89a 100644
--- a/packages/component/src/components/workspace-list/index.tsx
+++ b/packages/component/src/components/workspace-list/index.tsx
@@ -13,6 +13,7 @@ import { SortableContext, useSortable } from '@dnd-kit/sortable';
 import type { FC } from 'react';
 
 import { WorkspaceCard } from '../workspace-card';
+import { workspaceItemStyle } from './index.css';
 
 export type WorkspaceListProps = {
   disabled?: boolean;
@@ -42,6 +43,7 @@ const SortableWorkspaceItem: FC<
   };
   return (
     <div
+      className={workspaceItemStyle}
       data-testid="draggable-item"
       style={style}
       ref={setNodeRef}