Merge pull request #3018 from XRPLF/issue-2832

Improve wallet grid layout with dynamic column sizing

Author: mDuo13

about/xrp.page.tsx

@@ -111,7 +111,7 @@ export default function XrpOverview() {
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);
-
+  const totalCols = Math.max(softwallets.length, hardwallets.length) + 1;
   return (
     <div className="landing">
       <div>
@@ -376,7 +376,7 @@ export default function XrpOverview() {
                     "Digital wallets are pieces of software that allow people to send, receive, and store cryptocurrencies, including XRP. There are two types of digital wallets: hardware and software."
                   )}
                 </h5>
-                <ul className="nav nav-grid-lg cols-of-6" id="wallets">
+                <ul className={`nav nav-grid-lg cols-of-${totalCols}`} id="wallets">
                   <li className="nav-item nav-grid-head">
                     <h6 className="fs-4-5">{translate("Software Wallets")}</h6>
                   </li>

static/css/devportal2024-v1.css

@@ -150,7 +150,11 @@ a.card:hover h3 {
 .light .circled-logo {
   border: none;
 }
-
+@for $i from 1 through 10 {
+  .cols-of-#{$i} {
+    grid-template-rows: repeat(#{$i}, min-content);
+  }
+}
 .card-deck {
   margin-top: 2.5rem;
   margin-left: (-$card-deck-margin);