From 5f760246720dccd9f6c77f1373e2205ed0c4a87c Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Fri, 6 Dec 2024 12:15:22 +0200
Subject: [PATCH] Storybook: Fix table markup in Design Language - Radius docs

---
 .../foundations/design-language/radius.mdx    | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)
diff --git a/storybook/stories/foundations/design-language/radius.mdx b/storybook/stories/foundations/design-language/radius.mdx
index 9117bf940d45a..fda9bcdb85219 100644
--- a/storybook/stories/foundations/design-language/radius.mdx
+++ b/storybook/stories/foundations/design-language/radius.mdx
@@ -31,25 +31,29 @@ These steps are defined as tokens. To view the values and understand how to use
 -   Accessibility: Larger radius values can create a more approachable and friendly appearance, especially for larger components like cards and modals that demand more attention from users.
 
 <table>
-  <tr>
-    <th width="50%">✅ Do</th>
-    <th width="50%">🚫 Don't</th>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <img src={ radiusDo } alt="Radius do" width="100%" />
-
-      - Scale application of radius with element or container size.
-
-      - Use `radius-round` for circles and `radius-full` for pills.
-    </td>
-    <td width="50%" valign="top">
-      <img src={ radiusDont } alt="Radius don't" width="100%" />
-
-        -   Don't nest larger radii inside smaller radii.
-
-        -   Don't apply the same
-    radius value to container and immediate descendent.
-    </td>
-  </tr>
+  <thead>
+    <tr>
+      <th width="50%">✅ Do</th>
+      <th width="50%">🚫 Don't</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td width="50%" valign="top">
+        <img src={ radiusDo } alt="Radius do" width="100%" />
+
+        - Scale application of radius with element or container size.
+
+        - Use `radius-round` for circles and `radius-full` for pills.
+      </td>
+      <td width="50%" valign="top">
+        <img src={ radiusDont } alt="Radius don't" width="100%" />
+
+          -   Don't nest larger radii inside smaller radii.
+
+          -   Don't apply the same
+      radius value to container and immediate descendent.
+      </td>
+    </tr>
+  </tbody>
 </table>

✅ Do	🚫 Don't
- - - - Scale application of radius with element or container size. - - - Use `radius-round` for circles and `radius-full` for pills. -	- - - - Don't nest larger radii inside smaller radii. - - - Don't apply the same - radius value to container and immediate descendent. -
✅ Do	🚫 Don't
+ + + - Scale application of radius with element or container size. + + - Use `radius-round` for circles and `radius-full` for pills. +	+ + + - Don't nest larger radii inside smaller radii. + + - Don't apply the same + radius value to container and immediate descendent. +