From 1be86b937d018441802ada25d572f7701638057f Mon Sep 17 00:00:00 2001
From: Peter Kulko <peter.kulko@raccoongang.com>
Date: Sun, 27 Oct 2024 18:34:11 +0200
Subject: [PATCH] fix: fixed typography, display and links sections

---
 www/src/components/_doc-elements.scss           | 16 ++++++++++++++++
 www/src/components/typography-page/Display.tsx  |  2 +-
 www/src/components/typography-page/Headings.tsx |  2 +-
 www/src/components/typography-page/Links.tsx    | 10 +++++-----
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
index decd92b57e..fb13ca0ec2 100644
--- a/www/src/components/_doc-elements.scss
+++ b/www/src/components/_doc-elements.scss
@@ -342,3 +342,19 @@
     grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens
   }
 }
+
+.pgn-doc__code-display-block,
+.pgn-doc__code-headings-block {
+  .pgn__data-table-cell-wrap {
+    max-width: max-content;
+  }
+
+  @media (--pgn-size-breakpoint-max-width-md) {
+    overflow: hidden;
+    overflow-x: scroll;
+
+    .pgn__data-table-layout-wrapper {
+      overflow-x: initial;
+    }
+  }
+}
diff --git a/www/src/components/typography-page/Display.tsx b/www/src/components/typography-page/Display.tsx
index 5762a98ab6..26c7379637 100644
--- a/www/src/components/typography-page/Display.tsx
+++ b/www/src/components/typography-page/Display.tsx
@@ -10,7 +10,7 @@ export default function Display() {
   return (
     <>
       <h2 className="mb-2">Display</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-display-block">
         <DataTable
           itemCount={displaySizes.length}
           data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}
diff --git a/www/src/components/typography-page/Headings.tsx b/www/src/components/typography-page/Headings.tsx
index f3eb494e9b..ab01ea7f6b 100644
--- a/www/src/components/typography-page/Headings.tsx
+++ b/www/src/components/typography-page/Headings.tsx
@@ -18,7 +18,7 @@ export default function Headings() {
   return (
     <>
       <h2 className="mb-2">Headings</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-headings-block">
         <DataTable
           itemCount={tableData.length}
           data={tableData}
diff --git a/www/src/components/typography-page/Links.tsx b/www/src/components/typography-page/Links.tsx
index 3adc083b64..2af8c0ea42 100644
--- a/www/src/components/typography-page/Links.tsx
+++ b/www/src/components/typography-page/Links.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 // @ts-ignore
-import { DataTable } from '~paragon-react';
+import { DataTable, Alert } from '~paragon-react';
+import { Info } from '~paragon-icons';
 import { TextCell } from '../TableCells';
 
 const linksClassesAndDescriptions = [
-  {
-    example: <a href="/#">Standalone Link</a>,
-    description: <span>The default style for <code>a</code> tags that don`t appear in a <code>p</code> tag.</span>,
-  },
   {
     example: <span>An <a className="inline-link" href="/foundations/typography/">inline link</a> in a sentence.</span>,
     description: <span>For links inside a <code>p</code> or with the <code>.inline-link</code> class name.</span>,
@@ -34,6 +31,9 @@ export default function Links() {
   return (
     <>
       <h2 className="mb-2">Links</h2>
+      <Alert variant="info" icon={Info}>
+        <a href="/#">Standalone Link</a> - the default style for <code>a</code> tag that appear outside of <code>p</code> tag.
+      </Alert>
       <div className="mb-4">
         <DataTable
           itemCount={4}