chore: add responsive styles for workspace card (#2390)

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%',
+    },
   };
 });
 

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%',
+    },
+  },
+});

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}