diff --git a/packages/component/src/components/workspace-card/styles.ts b/packages/component/src/components/workspace-card/styles.ts
index 542607da6a..ea995ec9a0 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 0000000000..7060dba6bf
--- /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 9a5dc5cd96..5730bb89ab 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}