Bookkeeper info cards responsiveness

Author: ShahanaFarooqui

apps/frontend/src/components/bookkeeper/BkprHome/AccountEventsInfo/AccountEventsInfo.tsx

@@ -41,7 +41,7 @@ const AccountEventsInfo = () => {
                 </Row>
               </Row>
             :
-              <>
+              <Row className='h-100 align-items-stretch'>
                 <div className='d-flex flex-column align-items-stretch justify-content-between'>
                   <div className='d-flex flex-column align-items-start p-2'>
                     <span className='fs-6 text-dark'>Total Invoice Received</span>
@@ -51,8 +51,6 @@ const AccountEventsInfo = () => {
                     <span className='fs-6 text-dark'>Total Payments Sent</span>
                     <span className='fs-2 fw-bold primary'>-<CurrencyBox value={bkprSummary.total_payments_sent_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-2 fw-bold primary'></CurrencyBox></span>
                   </div>
-                </div>
-                <div className='d-flex flex-column align-items-stretch justify-content-between'>
                   <div className='d-flex flex-column align-items-start p-2'>
                     <span className='fs-6 text-dark'>Routing Revenue</span>
                     <span className='fs-2 fw-bold primary'>+<CurrencyBox value={bkprSummary.routing_revenue_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-2 fw-bold primary'></CurrencyBox></span>
@@ -62,7 +60,7 @@ const AccountEventsInfo = () => {
                     <span className='fs-2 fw-bold primary'>-<CurrencyBox value={bkprSummary.onchain_fee_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-2 fw-bold primary'></CurrencyBox></span>
                   </div>
                 </div>
-              </>
+              </Row>
         }
       </Card.Body>
       <Card.Footer className='d-flex justify-content-end px-2'>

apps/frontend/src/components/bookkeeper/BkprHome/SatsFlowInfo/SatsFlowInfo.tsx

@@ -41,7 +41,7 @@ const SatsFlowInfo = () => {
                 </Row>
               </Row>
             :
-              <div className='d-flex flex-row justify-content-between '>
+              <Row className='h-100 align-items-stretch'>
                 <div className='d-flex flex-column align-items-start p-2'>
                   <span className='fs-6 text-dark'>Inflow this month</span>
                   <span className='fs-3 fw-bold positive'>
@@ -54,7 +54,7 @@ const SatsFlowInfo = () => {
                     <CurrencyBox value={bkprSummary.outflows_for_period_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-3 fw-bold negative'></CurrencyBox>
                   </span>
                 </div>
-              </div>
+              </Row>
         }
       </Card.Body>
       <Card.Footer className='d-flex justify-content-end px-2'>

apps/frontend/src/components/bookkeeper/BkprHome/VolumeInfo/VolumeInfo.tsx

@@ -55,7 +55,7 @@ const VolumeInfo = () => {
               </Row>
             :
             <>
-              <div className='d-flex flex-column align-items-start p-2 pb-0 h-50'>
+              <Row className='h-100 align-items-stretch'>
                 <span className='fs-6 text-dark'>Route with Most Traffic</span>
                 <OverlayTrigger
                   placement='auto'
@@ -64,8 +64,6 @@ const VolumeInfo = () => {
                 >
                   <span className='fs-4 fw-bold positive'>{bkprSummary.most_traffic_route?.channel_scids}</span>
                 </OverlayTrigger>
-              </div>
-              <div className='d-flex flex-column align-items-start p-2 pt-0 h-50'>
                 <span className='fs-6 text-dark'>Route with Least Traffic</span>
                 <OverlayTrigger
                   placement='auto'
@@ -74,7 +72,7 @@ const VolumeInfo = () => {
                 >
                   <span className='fs-4 fw-bold negative'>{bkprSummary.least_traffic_route?.channel_scids}</span>
                 </OverlayTrigger>
-              </div>
+              </Row>
             </>
         }
       </Card.Body>