chore: expand vertically stacked cards to fit width

Author: asuzuki-jumptrading

src/features/Overview/StatusCard/index.tsx

@@ -10,8 +10,8 @@ import { voteDistanceAtom, voteStateAtom } from "../../../api/atoms";
 
 export default function SlotStatusCard() {
   return (
-    <Card>
-      <Flex direction="column" height="100%" gap="2">
+    <Card style={{ flexGrow: 1 }}>
+      <Flex direction="column" height="100%" gap="2" align="start">
         <CardHeader text="Status" />
         <div className={styles.statRow}>
           <CurrentSlotText />

src/features/Overview/TransactionsCard/index.tsx

@@ -7,7 +7,7 @@ import TransactionStats from "./TransactionStats";
 
 export default function TransactionsCard() {
   return (
-    <Card style={{ flex: 1 }}>
+    <Card style={{ flex: 100 }}>
       <Flex direction="column" height="100%" gap="2">
         <CardHeader text="Transactions" />
         <Flex gap="4" flexGrow="1">

src/features/Overview/ValidatorsCard/index.tsx

@@ -15,7 +15,7 @@ export default function ValidatorsCard() {
   const delinquentLabel = formatNumberLamports(peerStats.delinquentStake);
 
   return (
-    <Card>
+    <Card style={{ flexGrow: 1 }}>
       <Flex direction="column" height="100%" gap="2">
         <CardHeader text="Validators" />
         <Flex gap="2" flexGrow="1">
@@ -49,7 +49,7 @@ export default function ValidatorsCard() {
               />
             </div>
           </Flex>
-          <Box flexGrow="1" style={{ minWidth: "200px" }}>
+          <Box style={{ minWidth: "200px" }}>
             <Chart
               activeStake={peerStats.activeStake}
               delinquentStake={peerStats.delinquentStake}