fix: Use a responsive grid layout for the brainstorming cards

Having to awkwardly scroll sideways makes for a frustrating UX

Author: elken

packages/threat-composer/src/components/brainstorm/BrainstormBoard/index.tsx

@@ -243,10 +243,10 @@ const BrainstormBoardInner: FC<{ onNavigateToThreat?: NavigateToThreatHandler }>
           paddingBottom: '8px', // Space for the scrollbar
         }}>
           <div style={{
-            display: 'flex',
-            flexDirection: 'row',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
             gap: '20px',
-            width: 'fit-content', // Allow container to grow based on content
+            width: '100%',
           }}>
             {columnConfig.map(column => {
               // Show assumptions and mitigations based on individual visibility
@@ -295,4 +295,4 @@ export const BrainstormBoard: FC<BrainstormBoardProps> = ({ onNavigateToThreat }
   );
 };
 
-export default BrainstormBoard;
+export default BrainstormBoard;