feat: create css-only responsive table

apps/site/components/EOL/VulnerabilityChips/VulnerabilityChip/index.tsx

@@ -20,11 +20,7 @@ const VulnerabilityChip: FC<VulnerabilityChipProps> = ({
   const t = useTranslations();
 
   return (
-    <Badge
-      size="small"
-      kind={SEVERITY_KIND_MAP[severity] as BadgeKind}
-      className="mr-1"
-    >
+    <Badge size="small" kind={SEVERITY_KIND_MAP[severity] as BadgeKind}>
       {count > 0 ? <span className={styles.chipCount}>{count}</span> : null}
       {t(`components.eolChip.severity.${severity}`)}
     </Badge>

apps/site/components/EOL/VulnerabilityChips/index.tsx

@@ -23,7 +23,7 @@ const VulnerabilityChips: FC<VulnerabilityChipsProps> = ({
   );
 
   return (
-    <div className="vulnerability-chips">
+    <div className="flex flex-row flex-wrap gap-1 max-sm:justify-end">
       {SEVERITY_ORDER.filter(severity => groupedBySeverity[severity] > 0).map(
         severity => (
           <VulnerabilityChip

apps/site/components/Releases/PreviousReleasesTable.tsx

@@ -43,24 +43,30 @@ const PreviousReleasesTable: FC = () => {
       <tbody>
         {releaseData.map(release => (
           <Fragment key={release.major}>
-            <tr key={release.major}>
-              <td data-label="Version">
+            <tr data-label={release.versionWithPrefix}>
+              <td data-label={t('components.downloadReleasesTable.version')}>
                 <Link href={`/download/archive/${release.versionWithPrefix}`}>
                   v{release.major}
                 </Link>
               </td>
 
-              <td data-label="LTS">{release.codename || '-'}</td>
+              <td data-label={t('components.downloadReleasesTable.codename')}>
+                {release.codename || '-'}
+              </td>
 
-              <td data-label="Date">
+              <td
+                data-label={t('components.downloadReleasesTable.firstReleased')}
+              >
                 <FormattedTime date={release.currentStart} />
               </td>
 
-              <td data-label="Date">
+              <td
+                data-label={t('components.downloadReleasesTable.lastUpdated')}
+              >
                 <FormattedTime date={release.releaseDate} />
               </td>
 
-              <td data-label="Status">
+              <td data-label={t('components.downloadReleasesTable.status')}>
                 <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
                   {release.status}
                   {release.status === 'End-of-life' ? ' (EoL)' : ''}

apps/site/next.mdx.plugins.mjs

@@ -7,6 +7,8 @@ import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import readingTime from 'remark-reading-time';
 
+import remarkTableTitles from './util/table';
+
 /**
  * Provides all our Rehype Plugins that are used within MDX
  */
@@ -30,4 +32,6 @@ export const REMARK_PLUGINS = [
   remarkHeadings,
   // Calculates the reading time of the content
   readingTime,
+  // Adds a `data` attribute to table cells for our custom CSS
+  remarkTableTitles,
 ];

apps/site/package.json

@@ -59,6 +59,7 @@
     "feed": "~5.1.0",
     "github-slugger": "~2.0.0",
     "gray-matter": "~4.0.3",
+    "mdast-util-to-string": "^4.0.0",
     "next": "15.5.0",
     "next-intl": "~4.3.4",
     "next-themes": "~0.4.6",
@@ -73,6 +74,7 @@
     "semver": "~7.7.2",
     "sval": "^0.6.3",
     "tailwindcss": "catalog:",
+    "unist-util-visit": "^5.0.0",
     "vfile": "~6.0.3",
     "vfile-matter": "~5.0.1"
   },
@@ -85,6 +87,7 @@
     "@opennextjs/cloudflare": "^1.6.4",
     "@playwright/test": "^1.54.1",
     "@testing-library/user-event": "~14.6.1",
+    "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
     "@types/semver": "~7.7.0",
     "eslint-config-next": "15.5.0",

apps/site/util/table.ts

@@ -0,0 +1,46 @@
+import type { Root } from 'mdast';
+import { toString } from 'mdast-util-to-string';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Remark plugin that adds data-label attributes to table cells (td)
+ * based on their corresponding table headers (th).
+ */
+export default function remarkTableTitles() {
+  return (tree: Root) => {
+    visit(tree, 'table', table => {
+      // Ensure table has at least a header row and one data row
+      if (table.children.length < 2) return;
+
+      const [headerRow, ...dataRows] = table.children;
+
+      if (headerRow.children.length <= 1) {
+        table.data ??= {};
+
+        table.data.hProperties = {
+          'data-cards': 'false',
+        };
+      }
+
+      // Extract header labels from the first row
+      const headerLabels = headerRow.children.map(headerCell =>
+        toString(headerCell.children)
+      );
+
+      // Assign data-label to each cell in data rows
+      dataRows.forEach(row => {
+        row.children.forEach((cell, idx) => {
+          cell.data ??= {};
+
+          if (idx > headerLabels.length) {
+            return;
+          }
+
+          cell.data.hProperties = {
+            'data-label': headerLabels[idx],
+          };
+        });
+      });
+    });
+  };
+}

packages/ui-components/src/Common/Badge/index.module.css

@@ -1,7 +1,8 @@
 @reference "../../styles/index.css";
 
 .badge {
-  @apply rounded-full
+  @apply whitespace-nowrap
+    rounded-full
     text-center
     text-white;
 

packages/ui-components/src/styles/markdown.css

@@ -134,11 +134,10 @@ main {
       text-sm
       dark:border-neutral-800;
 
+    /* Common border and text styles */
     th,
     td {
-      @apply max-xs:block
-        max-xs:border-l-0
-        border
+      @apply border
         border-r-0
         border-t-0
         border-neutral-200
@@ -170,4 +169,62 @@ main {
       @apply sm:border-l-0;
     }
   }
+
+  /* Mobile-specific styles */
+  @media (max-width: 40rem) {
+    table:not([data-cards='false']) {
+      @apply block
+        border-0;
+
+      thead {
+        @apply sr-only;
+      }
+
+      tbody {
+        @apply block
+          space-y-4;
+      }
+
+      tr {
+        @apply rounded-xs
+          block
+          border
+          border-neutral-200
+          p-4
+          before:mb-2
+          before:text-sm
+          before:font-medium
+          before:text-neutral-500
+          before:content-[attr(data-label)]
+          dark:border-neutral-800
+          dark:before:text-neutral-400;
+      }
+
+      td {
+        @apply relative
+          block
+          border-0
+          border-b
+          px-0
+          py-2
+          pl-[33%]
+          text-right
+          text-neutral-600
+          before:absolute
+          before:left-0
+          before:top-1/2
+          before:w-1/3
+          before:-translate-y-1/2
+          before:break-words
+          before:text-left
+          before:font-medium
+          before:text-neutral-700
+          before:content-[attr(data-label)]
+          last:border-0
+          dark:border-neutral-900
+          dark:text-neutral-300
+          dark:before:text-neutral-200;
+      }
+    }
+  }
 }