Merge pull request #2423 from oasisprotocol/kaja/responsive-total-transaction-card

Fix Total Transactions and Latest Blocks responsive alignment

Author: kaja-osojnik

.changelog/2423.bugfix.md

@@ -0,0 +1 @@
+Fix Total Transactions and Latest Blocks responsive alignment

src/app/components/TotalTransactions/index.tsx

@@ -88,12 +88,12 @@ export const TotalTransactions: FC<TotalTransactionsProps> = ({
   const { t } = useTranslation()
   const [chartDuration, setChartDuration] = useState<ChartDuration>(ChartDuration.MONTH)
   return (
-    <Card variant="layout">
+    <Card variant="layout" className="min-w-0 flex-1">
       <CardHeader>
-        <CardTitle className="flex-col sm:flex-row sm:items-center sm:justify-between gap-1">
+        <CardTitle className="flex-col flex-wrap sm:flex-row sm:items-center sm:justify-between gap-1">
           {title ?? <Typography variant="h3">{t('totalTransactions.header')}</Typography>}
 
-          <div className="md:ml-4 md:flex-1 md:text-right">
+          <div className="lg:ml-4 md:flex-1 md:text-right">
             <DurationPills handleChange={setChartDuration} value={chartDuration} />
           </div>
         </CardTitle>

src/app/pages/HomePage/RecentBlocksCard.tsx

@@ -21,7 +21,7 @@ export const RecentBlocksCard: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Card variant="layout">
+    <Card variant="layout" className="min-w-0 flex-1">
       <CardHeader>
         <CardTitle>
           <Typography variant="h3" className="text-lg">