From 621db81c7dd85aa3aefcbeb952f7529ab9661dda Mon Sep 17 00:00:00 2001
From: akcodez <ariakesh@yahoo.com>
Date: Tue, 2 Dec 2025 12:23:35 -0800
Subject: [PATCH] add proper breakpoint sizing

---
 shared/components/Link/_link-icons.scss | 47 ++++++++++++++---
 shared/components/Link/_link.scss       | 41 ++++++++++++---
 static/css/devportal2024-v1.css         | 70 ++++++++++++++++++++-----
 3 files changed, 133 insertions(+), 25 deletions(-)

diff --git a/shared/components/Link/_link-icons.scss b/shared/components/Link/_link-icons.scss
index b98e36dd13..0c2e105b9e 100644
--- a/shared/components/Link/_link-icons.scss
+++ b/shared/components/Link/_link-icons.scss
@@ -88,37 +88,70 @@ html:not(.light) {
 }
 
 // Size variants for internal arrows (wider aspect ratio)
+// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
+// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
 .bds-link-icon--internal {
   &.bds-link-icon--small {
-    width: 15px;
-    height: 14px;
+    // Mobile/Tablet: 14x13
+    width: 14px;
+    height: 13px;
+
+    // Desktop (xl): 15x14
+    @include media-breakpoint-up(xl) {
+      width: 15px;
+      height: 14px;
+    }
   }
 
   &.bds-link-icon--medium {
+    // Mobile/Tablet: 17x14
     width: 17px;
-    height: 16px;
+    height: 14px;
+
+    // Desktop (xl): 17x16
+    @include media-breakpoint-up(xl) {
+      height: 16px;
+    }
   }
 
   &.bds-link-icon--large {
-    width: 26px;
-    height: 22px;
+    // Mobile/Tablet: 20x16
+    width: 20px;
+    height: 16px;
+
+    // Desktop (xl): 26x22
+    @include media-breakpoint-up(xl) {
+      width: 26px;
+      height: 22px;
+    }
   }
 }
 
 // Size variants for external arrows (square aspect ratio)
+// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
+// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
 .bds-link-icon--external {
   &.bds-link-icon--small {
+    // Same at all breakpoints
     width: 14px;
     height: 14px;
   }
 
   &.bds-link-icon--medium {
+    // Same at all breakpoints
     width: 16px;
     height: 16px;
   }
 
   &.bds-link-icon--large {
-    width: 21px;
-    height: 21px;
+    // Mobile/Tablet: 17x17
+    width: 17px;
+    height: 17px;
+
+    // Desktop (xl): 21x21
+    @include media-breakpoint-up(xl) {
+      width: 21px;
+      height: 21px;
+    }
   }
 }
diff --git a/shared/components/Link/_link.scss b/shared/components/Link/_link.scss
index bf48f23c57..ee6455666b 100644
--- a/shared/components/Link/_link.scss
+++ b/shared/components/Link/_link.scss
@@ -30,23 +30,52 @@
   }
 }
 
-// Size variants
+// Size variants - Mobile First (xs-md base)
+// Typography specs from Figma: Desktop (xl), Tablet (lg), Mobile (xs-md)
+// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
+
 .bds-link--small {
+  // Mobile/Tablet: 14px/20.1px
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 20.1px;
+  letter-spacing: 0;
   gap: 6px;
+
+  // Desktop (xl): 16px/23.2px
+  @include media-breakpoint-up(xl) {
+    font-size: 16px;
+    line-height: 23.2px;
+    gap: 8px;
+  }
 }
 
 .bds-link--medium {
+  // Mobile/Tablet: 16px/23.2px
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 23.2px;
+  letter-spacing: 0;
   gap: 8px;
+
+  // Desktop (xl): 18px/26.1px
+  @include media-breakpoint-up(xl) {
+    font-size: 18px;
+    line-height: 26.1px;
+    letter-spacing: -0.5px;
+  }
 }
 
 .bds-link--large {
-  font-size: 20px;
-  line-height: 1.5;
-  gap: 10px;
+  // Mobile/Tablet: 18px/30px
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: -0.5px;
+  gap: 24px;
+
+  // Desktop (xl): 24px/30px
+  @include media-breakpoint-up(xl) {
+    font-size: 24px;
+    letter-spacing: 0;
+  }
 }
 
 // Link color states (Light Mode - per Figma specs)
diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css
index 430dc9fe52..07a3caa910 100644
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
@@ -14144,16 +14144,33 @@ html:not(.light) .bds-link-icon--disabled svg path {
 }
 
 .bds-link-icon--internal.bds-link-icon--small {
-  width: 15px;
-  height: 14px;
+  width: 14px;
+  height: 13px;
+}
+@media (min-width: 1280px) {
+  .bds-link-icon--internal.bds-link-icon--small {
+    width: 15px;
+    height: 14px;
+  }
 }
 .bds-link-icon--internal.bds-link-icon--medium {
   width: 17px;
-  height: 16px;
+  height: 14px;
+}
+@media (min-width: 1280px) {
+  .bds-link-icon--internal.bds-link-icon--medium {
+    height: 16px;
+  }
 }
 .bds-link-icon--internal.bds-link-icon--large {
-  width: 26px;
-  height: 22px;
+  width: 20px;
+  height: 16px;
+}
+@media (min-width: 1280px) {
+  .bds-link-icon--internal.bds-link-icon--large {
+    width: 26px;
+    height: 22px;
+  }
 }
 
 .bds-link-icon--external.bds-link-icon--small {
@@ -14165,8 +14182,14 @@ html:not(.light) .bds-link-icon--disabled svg path {
   height: 16px;
 }
 .bds-link-icon--external.bds-link-icon--large {
-  width: 21px;
-  height: 21px;
+  width: 17px;
+  height: 17px;
+}
+@media (min-width: 1280px) {
+  .bds-link-icon--external.bds-link-icon--large {
+    width: 21px;
+    height: 21px;
+  }
 }
 
 .bds-link {
@@ -14188,20 +14211,43 @@ html:not(.light) .bds-link-icon--disabled svg path {
 
 .bds-link--small {
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 20.1px;
+  letter-spacing: 0;
   gap: 6px;
 }
+@media (min-width: 1280px) {
+  .bds-link--small {
+    font-size: 16px;
+    line-height: 23.2px;
+    gap: 8px;
+  }
+}
 
 .bds-link--medium {
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 23.2px;
+  letter-spacing: 0;
   gap: 8px;
 }
+@media (min-width: 1280px) {
+  .bds-link--medium {
+    font-size: 18px;
+    line-height: 26.1px;
+    letter-spacing: -0.5px;
+  }
+}
 
 .bds-link--large {
-  font-size: 20px;
-  line-height: 1.5;
-  gap: 10px;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: -0.5px;
+  gap: 24px;
+}
+@media (min-width: 1280px) {
+  .bds-link--large {
+    font-size: 24px;
+    letter-spacing: 0;
+  }
 }
 
 a.bds-link,