Adjust table styling for more consistency (#50149)

src/automated-pipelines/components/parameter-table/ParameterRow.tsx

@@ -52,12 +52,7 @@ export function ParameterRow({
     <>
       <tr className={`${isChild ? 'color-bg-subtle' : ''}`}>
         <td className={`${isChild ? 'px-3' : ''}`}>
-          <div
+          <div className={cx('pl-0 pt-1 pr-1 pb-1', `${rowIndex > 0 && isChild ? 'my-3' : ''}`)}>
-            className={cx(
-              'pl-0 pt-1 pr-1 pb-1',
-              `${rowIndex > 0 && isChild ? 'pt-3 border-top color-border-muted' : ''}`,
-            )}
-          >
             <div>
               {rowParams.name ? (
                 <>

src/frame/components/ui/MarkdownContent/stylesheets/table.scss

@@ -1,19 +1,20 @@
+@import "@primer/css/support/variables/typography.scss";
 @import "src/frame/stylesheets/breakpoint-xxl.scss";
 
 .markdownBody {
   table {
-    display: table;
+    display: table; // Primer CSS sets to block
-    border-collapse: collapse;
+    width: 100%; // Primer CSS sets to max-content
-    position: relative;
+    font-size: $body-font-size;
-    font-size: 90%;
+    text-align: left;
-    width: 100%;
-    line-height: 1.5;
 
     // For mobile (small viewports) we need to fix the table
     // because if the table is larger than the viewport
     // it will force the width of the table causing issues
     // with the header on scroll
-    table-layout: fixed;
+    :not(:global(.has-nested-table)) & {
+      table-layout: fixed;
+    }
 
     // We want to keep table-layout: auto so that column widths dynamically adjust;
     // otherwise entries get needlessly squashed into narrow columns. As a workaround,
@@ -23,45 +24,50 @@
       table-layout: auto;
     }
 
-    code {
+    // **The follow selectors must be with `table` to override Primer CSS**
-      font-size: 85%;
-      padding: 0.2em 0.4em;
-      border-radius: 6px; // primer rounded-2
-    }
 
-    pre > code {
+    // Remove zebra striping
-      padding: 0;
+    tr:nth-child(2n) {
       background-color: transparent;
     }
 
-    thead tr {
+    // Make the header sticky
-      border: none;
+    thead {
+      position: sticky;
+      top: 105px; // 88 + 8 + 8 + 1, space for the site header
 
-      th {
+      @include breakpoint-xxl {
-        @include breakpoint-xxl {
+        top: 65px !important; // 48 + 8 + 8 + 1, space for the site header
-          top: 65px !important; // 48 + 8 + 8 + 1
-        }
       }
     }
 
-    th {
+    // Redraw borders as inset box-shadow to keep the border with sticky header
-      text-align: left;
+    tr,
-      position: sticky;
+    th,
-      vertical-align: top;
+    td {
-      z-index: 0;
+      border: none;
-      top: 105px; // 88 + 8 + 8 + 1
+    }
-      background: var(--color-canvas-default);
+
-      box-shadow: 0 3px 0 0 var(--color-canvas-subtle);
+    thead th,
+    thead td {
+      box-shadow: inset 0 -2px var(--color-border-muted);
+    }
+
+    tbody th,
+    tbody td {
+      box-shadow: inset 0 -1px var(--color-border-muted);
+    }
+
+    tbody tr:last-child th,
+    tbody tr:last-child td {
+      box-shadow: none;
+    }
+
+    // Adjust styling from Primer for spacing and text alignment
+    th,
+    td {
       padding: 0.75rem 0.5rem;
-      border: 0;
+      vertical-align: top;
-    }
-
-    th[align="center"] {
-      text-align: center;
-    }
-
-    th[align="right"] {
-      text-align: right;
     }
 
     th:first-child,
@@ -69,29 +75,12 @@
       padding-left: 0;
     }
 
-    td {
+    pre {
-      padding: 0.75rem 0.5rem;
+      margin-top: 0.25rem; // Defaults to 0.5rem, but looks off with vertical-align: top
-      border: 0;
-      vertical-align: top;
     }
 
-    // markdown that has been converted to HTML is often wrapped in <p> tags
+    p:last-child {
-    // don't let it interfere with the spacing
+      margin-bottom: 0; // Autogenerated content
-    td p {
-      padding: 0;
-      margin: 0;
-    }
-
-    tr:nth-child(2n) {
-      background: none;
-    }
-
-    :global(td.has-nested-table) {
-      width: 100%;
-
-      table {
-        table-layout: auto;
-      }
     }
   }
 }