Added Max 8 for family, added responsive breakpoints for wallet and layout

src/components/MyWallet/WalletBox.jsx

@@ -10,7 +10,7 @@ export default function WalletBox({ wallet, payment }) {
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">
-        <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-[22rem]">
+        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
           {loading ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size="16" color="sky-blue" />

src/components/MyWallet/WalletItemCard.jsx

@@ -12,7 +12,7 @@ import WalletAction from "./WalletAction";
  */
 export default function WalletItemCard({ walletItem, payment }) {
   const { userDetails } = useSelector((state) => state.userDetails);
-  const accountType = userDetails?.account_type === 'FAMILY';
+  const accountType = userDetails?.account_type === "FAMILY";
   const dispatch = useDispatch();
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
 
@@ -32,12 +32,12 @@ export default function WalletItemCard({ walletItem, payment }) {
    */
   const closePopUp = () => {
     setCreditPopup({ show: false, data: {} });
-    dispatch(tableReload({ type: 'WALLETTABLE' }));
+    dispatch(tableReload({ type: "WALLETTABLE" }));
   };
 
   const image = walletItem.code
     ? `${walletItem.code.toLowerCase()}.svg`
-    : 'default.png';
+    : "default.png";
 
   return (
     <>
@@ -48,7 +48,7 @@ export default function WalletItemCard({ walletItem, payment }) {
         }}
       >
         <div className="wallet w-full flex justify-between items-start gap-3">
-          <div className="min-w-[100px] min-h-[100px] max-w-[150px] max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+          <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img
               src={localImgLoad(`images/currency/${image}`)}
               className="w-full h-full"
@@ -57,7 +57,7 @@ export default function WalletItemCard({ walletItem, payment }) {
           </div>
           <div className="balance w-full mt-2 flex justify-center">
             <div className="">
-              <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
                 Current Balance
               </p>
               <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
@@ -65,7 +65,7 @@ export default function WalletItemCard({ walletItem, payment }) {
                   walletItem.amount * 0.01,
                   walletItem.code,
                   undefined,
-                  'text-[2rem]'
+                  "text-[2rem]"
                 )}
               </p>
             </div>
@@ -73,13 +73,13 @@ export default function WalletItemCard({ walletItem, payment }) {
         </div>
 
         <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
-          HOLDINGS :{' '}
+          HOLDINGS :{" "}
           <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
             {PriceFormatter(
               walletItem.escrow * 0.01,
               walletItem.code,
               undefined,
-              'text-[2rem]'
+              "text-[2rem]"
             )}
           </span>
         </p>