Adding text to donations to ensure everyone knows there is more columns.

CruGlobal · Jan 7, 2025 · 8afa291 · 8afa291
1 parent 951edd8
commit 8afa291
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/components/Contacts/ContactDetails/ContactDonationsTab/ContactDonationsTab.tsx b/src/components/Contacts/ContactDetails/ContactDonationsTab/ContactDonationsTab.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
-import { Box, Skeleton, Tab } from '@mui/material';
+import { Box, Skeleton, Tab, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next/';
 import { DonationTable } from 'src/components/DonationTable/DonationTable';
@@ -126,6 +126,10 @@ export const ContactDonationsTab: React.FC<ContactDonationsProp> = ({
             visibleColumnsStorageKey="contact-donations"
             hideDisplayName={true}
           />
+          <Typography variant="body2" sx={{ mt: 2, fontStyle: 'italic' }}>
+            On smaller screens, some columns may be hidden. Please scroll
+            horizontally to view all the data.
+          </Typography>
         </StyledTabPanel>
         <StyledTabPanel value={DonationTabKey.PartnershipInfo}>
           {!data ? (