From 7b9d9b960ba70338b5503ec1795b92349de056c9 Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Fri, 7 Feb 2025 19:05:32 -0500
Subject: [PATCH 1/5] Wrap content in div

---
 src/components/ListTable.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/ListTable.js b/src/components/ListTable.js
index e37f9a58a..1722d7ba1 100644
--- a/src/components/ListTable.js
+++ b/src/components/ListTable.js
@@ -78,7 +78,9 @@ const bodyCellStyle = css`
     flex-direction: column;
     align-items: flex-start;
   }
+`;
 
+const bodyCellContentStyle = css`
   *,
   p,
   a {
@@ -86,14 +88,14 @@ const bodyCellStyle = css`
   }
 
   // Target any nested components (paragraphs, admonitions, tables) and any paragraphs within those nested components
-  & > div > *,
-  & > div > div p {
+  & > *,
+  & > div p {
     margin: 0 0 12px;
   }
 
   // Prevent extra margin below last element (such as when multiple paragraphs are present)
-  & > div > div *:last-child,
-  & > div > *:last-child {
+  & > div *:last-child,
+  & > *:last-child {
     margin-bottom: 0;
   }
 `;
@@ -308,7 +310,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
                 {headerGroup.headers.map((header) => {
                   return (
                     <HeaderCell className={cx(baseCellStyle, headerCellStyle)} key={header.id} header={header}>
-                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      <div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
                     </HeaderCell>
                   );
                 })}
@@ -323,7 +325,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
                 const role = isStub ? 'rowheader' : null;
                 return (
                   <Cell key={cell.id} className={cx(baseCellStyle, bodyCellStyle, isStub && stubCellStyle)} role={role}>
-                    {cell.renderValue()}
+                    <div className={cx(bodyCellContentStyle)}>{cell.renderValue()}</div>
                   </Cell>
                 );
               })}

From 0d96a42d56e14228fa559a5455181f4d95197c17 Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Mon, 10 Feb 2025 18:23:32 -0500
Subject: [PATCH 2/5] Update snapshot

---
 .../unit/__snapshots__/ListTable.test.js.snap | 576 +++++++++++-------
 1 file changed, 350 insertions(+), 226 deletions(-)

diff --git a/tests/unit/__snapshots__/ListTable.test.js.snap b/tests/unit/__snapshots__/ListTable.test.js.snap
index 361037d02..61dc39366 100644
--- a/tests/unit/__snapshots__/ListTable.test.js.snap
+++ b/tests/unit/__snapshots__/ListTable.test.js.snap
@@ -76,22 +76,6 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   align-items: flex-start;
 }
 
-.emotion-3 *,
-.emotion-3 p,
-.emotion-3 a {
-  line-height: 20px;
-}
-
-.emotion-3>div>*,
-.emotion-3>div>div p {
-  margin: 0 0 12px;
-}
-
-.emotion-3>div>div *:last-child,
-.emotion-3>div>*:last-child {
-  margin-bottom: 0;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -115,7 +99,23 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   text-align: left;
 }
 
-.emotion-5 {
+.emotion-5 *,
+.emotion-5 p,
+.emotion-5 a {
+  line-height: 20px;
+}
+
+.emotion-5>*,
+.emotion-5>div p {
+  margin: 0 0 12px;
+}
+
+.emotion-5>div *:last-child,
+.emotion-5>*:last-child {
+  margin-bottom: 0;
+}
+
+.emotion-6 {
   margin: unset;
   font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #001E2B;
@@ -127,12 +127,12 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   color: var(--font-color-primary);
 }
 
-.emotion-5 strong,
-.emotion-5 b {
+.emotion-6 strong,
+.emotion-6 b {
   font-weight: 700;
 }
 
-.emotion-6 {
+.emotion-7 {
   padding: 0 8px;
   overflow: hidden;
   padding: 10px 8px!important;
@@ -145,25 +145,25 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   align-content: flex-start;
 }
 
-.emotion-6:focus-visible {
+.emotion-7:focus-visible {
   box-shadow: inset;
 }
 
-.emotion-6:last-child {
+.emotion-7:last-child {
   padding-right: 24px;
 }
 
-.emotion-6 * {
+.emotion-7 * {
   font-size: 13px!important;
   line-height: inherit;
 }
 
-.emotion-6>div {
+.emotion-7>div {
   height: unset;
   min-height: unset;
 }
 
-.emotion-6>div {
+.emotion-7>div {
   min-height: unset;
   max-height: unset;
   -webkit-flex-direction: column;
@@ -175,22 +175,6 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   align-items: flex-start;
 }
 
-.emotion-6 *,
-.emotion-6 p,
-.emotion-6 a {
-  line-height: 20px;
-}
-
-.emotion-6>div>*,
-.emotion-6>div>div p {
-  margin: 0 0 12px;
-}
-
-.emotion-6>div>div *:last-child,
-.emotion-6>div>*:last-child {
-  margin-bottom: 0;
-}
-
 <div
     class="emotion-0"
     tabindex="0"
@@ -235,81 +219,105 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
               class="emotion-4"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-5"
               >
-                notebook
-              </p>
+                <p
+                  class="emotion-6"
+                >
+                  notebook
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-6"
+            class="emotion-7"
           >
             <div
               class="emotion-4"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-5"
               >
-                50
-              </p>
+                <p
+                  class="emotion-6"
+                >
+                  50
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-6"
+            class="emotion-7"
           >
             <div
               class="emotion-4"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-5"
               >
-                8.5x11,in
-              </p>
+                <p
+                  class="emotion-6"
+                >
+                  8.5x11,in
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-6"
+            class="emotion-7"
           >
             <div
               class="emotion-4"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-5"
               >
-                A
-              </p>
+                <p
+                  class="emotion-6"
+                >
+                  A
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-6"
+            class="emotion-7"
           >
             <div
               class="emotion-4"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-5"
               >
-                college-ruled,perforated
-              </p>
+                <p
+                  class="emotion-6"
+                >
+                  college-ruled,perforated
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-6"
+            class="emotion-7"
           >
             <div
               class="emotion-4"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-5"
               >
-                8
-              </p>
+                <p
+                  class="emotion-6"
+                >
+                  8
+                </p>
+              </div>
             </div>
           </td>
         </tr>
@@ -494,22 +502,6 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   align-items: flex-start;
 }
 
-.emotion-16 *,
-.emotion-16 p,
-.emotion-16 a {
-  line-height: 20px;
-}
-
-.emotion-16>div>*,
-.emotion-16>div>div p {
-  margin: 0 0 12px;
-}
-
-.emotion-16>div>div *:last-child,
-.emotion-16>div>*:last-child {
-  margin-bottom: 0;
-}
-
 .dark-theme .emotion-16 {
   background-color: #112733;
   border-right: 3px solid #3D4F58;
@@ -538,7 +530,23 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   text-align: left;
 }
 
-.emotion-18 {
+.emotion-18 *,
+.emotion-18 p,
+.emotion-18 a {
+  line-height: 20px;
+}
+
+.emotion-18>*,
+.emotion-18>div p {
+  margin: 0 0 12px;
+}
+
+.emotion-18>div *:last-child,
+.emotion-18>*:last-child {
+  margin-bottom: 0;
+}
+
+.emotion-19 {
   margin: unset;
   font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #001E2B;
@@ -550,12 +558,12 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   color: var(--font-color-primary);
 }
 
-.emotion-18 strong,
-.emotion-18 b {
+.emotion-19 strong,
+.emotion-19 b {
   font-weight: 700;
 }
 
-.emotion-19 {
+.emotion-20 {
   padding: 0 8px;
   overflow: hidden;
   padding: 10px 8px!important;
@@ -568,25 +576,25 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   align-content: flex-start;
 }
 
-.emotion-19:focus-visible {
+.emotion-20:focus-visible {
   box-shadow: inset;
 }
 
-.emotion-19:last-child {
+.emotion-20:last-child {
   padding-right: 24px;
 }
 
-.emotion-19 * {
+.emotion-20 * {
   font-size: 13px!important;
   line-height: inherit;
 }
 
-.emotion-19>div {
+.emotion-20>div {
   height: unset;
   min-height: unset;
 }
 
-.emotion-19>div {
+.emotion-20>div {
   min-height: unset;
   max-height: unset;
   -webkit-flex-direction: column;
@@ -598,22 +606,6 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   align-items: flex-start;
 }
 
-.emotion-19 *,
-.emotion-19 p,
-.emotion-19 a {
-  line-height: 20px;
-}
-
-.emotion-19>div>*,
-.emotion-19>div>div p {
-  margin: 0 0 12px;
-}
-
-.emotion-19>div>div *:last-child,
-.emotion-19>div>*:last-child {
-  margin-bottom: 0;
-}
-
 <div
     class="emotion-0"
     tabindex="0"
@@ -634,7 +626,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
             <div
               class="emotion-4"
             >
-              name
+              <div>
+                name
+              </div>
             </div>
           </th>
           <th
@@ -644,7 +638,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
             <div
               class="emotion-4"
             >
-              quantity
+              <div>
+                quantity
+              </div>
             </div>
           </th>
           <th
@@ -654,7 +650,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
             <div
               class="emotion-4"
             >
-              size
+              <div>
+                size
+              </div>
             </div>
           </th>
           <th
@@ -664,7 +662,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
             <div
               class="emotion-4"
             >
-              status
+              <div>
+                status
+              </div>
             </div>
           </th>
           <th
@@ -674,7 +674,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
             <div
               class="emotion-4"
             >
-              tags
+              <div>
+                tags
+              </div>
             </div>
           </th>
           <th
@@ -684,7 +686,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
             <div
               class="emotion-4"
             >
-              rating
+              <div>
+                rating
+              </div>
             </div>
           </th>
         </tr>
@@ -704,81 +708,105 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                journal
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  journal
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                25
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  25
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                14x21,cm
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  14x21,cm
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                A
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  A
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                brown, lined
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  brown, lined
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                9
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  9
+                </p>
+              </div>
             </div>
           </td>
         </tr>
@@ -796,81 +824,105 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                notebook
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  notebook
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                50
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  50
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                8.5x11,in
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  8.5x11,in
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                A
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  A
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                college-ruled,perforated
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  college-ruled,perforated
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                8
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  8
+                </p>
+              </div>
             </div>
           </td>
         </tr>
@@ -888,81 +940,105 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                paper
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  paper
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                100
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  100
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                8.5x11,in
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  8.5x11,in
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                D
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  D
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                watercolor
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  watercolor
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                10
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  10
+                </p>
+              </div>
             </div>
           </td>
         </tr>
@@ -980,81 +1056,105 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                planner
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  planner
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                75
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  75
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                22.85x30,cm
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  22.85x30,cm
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                D
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  D
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                2019
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  2019
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                10
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  10
+                </p>
+              </div>
             </div>
           </td>
         </tr>
@@ -1072,81 +1172,105 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                postcard
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  postcard
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                45
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  45
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                10x,cm
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  10x,cm
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                D
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  D
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                double-sided,white
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  double-sided,white
+                </p>
+              </div>
             </div>
           </td>
           <td
-            class="emotion-19"
+            class="emotion-20"
           >
             <div
               class="emotion-17"
               data-state="entered"
             >
-              <p
+              <div
                 class="emotion-18"
               >
-                2
-              </p>
+                <p
+                  class="emotion-19"
+                >
+                  2
+                </p>
+              </div>
             </div>
           </td>
         </tr>

From 810437e00f86f2bae5d5ce7abad06be318e48193 Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:27:31 -0500
Subject: [PATCH 3/5] Fix styling

---
 src/components/ListTable.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ListTable.js b/src/components/ListTable.js
index 1722d7ba1..f6cc92153 100644
--- a/src/components/ListTable.js
+++ b/src/components/ListTable.js
@@ -57,7 +57,6 @@ const baseCellStyle = css`
   * {
     // Wrap in selector to ensure it cascades down to every element
     font-size: ${theme.fontSize.small} !important;
-    line-height: inherit;
   }
 
   // Ensure each cell is no higher than the highest content in row
@@ -90,13 +89,13 @@ const bodyCellContentStyle = css`
   // Target any nested components (paragraphs, admonitions, tables) and any paragraphs within those nested components
   & > *,
   & > div p {
-    margin: 0 0 12px;
+    margin: 0 0 12px !important;
   }
 
   // Prevent extra margin below last element (such as when multiple paragraphs are present)
   & > div *:last-child,
   & > *:last-child {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
   }
 `;
 

From 295c5880250242041bcd6da7aa8307919ee8973c Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:30:28 -0500
Subject: [PATCH 4/5] Snap

---
 tests/unit/__snapshots__/ListTable.test.js.snap | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/tests/unit/__snapshots__/ListTable.test.js.snap b/tests/unit/__snapshots__/ListTable.test.js.snap
index 61dc39366..b6908d761 100644
--- a/tests/unit/__snapshots__/ListTable.test.js.snap
+++ b/tests/unit/__snapshots__/ListTable.test.js.snap
@@ -56,7 +56,6 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
 
 .emotion-3 * {
   font-size: 13px!important;
-  line-height: inherit;
 }
 
 .emotion-3>div {
@@ -107,12 +106,12 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
 
 .emotion-5>*,
 .emotion-5>div p {
-  margin: 0 0 12px;
+  margin: 0 0 12px!important;
 }
 
 .emotion-5>div *:last-child,
 .emotion-5>*:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0!important;
 }
 
 .emotion-6 {
@@ -155,7 +154,6 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
 
 .emotion-7 * {
   font-size: 13px!important;
-  line-height: inherit;
 }
 
 .emotion-7>div {
@@ -383,7 +381,6 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 
 .emotion-3 * {
   font-size: 13px!important;
-  line-height: inherit;
 }
 
 .emotion-3>div {
@@ -435,7 +432,6 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 
 .emotion-5 * {
   font-size: 13px!important;
-  line-height: inherit;
 }
 
 .emotion-5>div {
@@ -482,7 +478,6 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 
 .emotion-16 * {
   font-size: 13px!important;
-  line-height: inherit;
 }
 
 .emotion-16>div {
@@ -538,12 +533,12 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 
 .emotion-18>*,
 .emotion-18>div p {
-  margin: 0 0 12px;
+  margin: 0 0 12px!important;
 }
 
 .emotion-18>div *:last-child,
 .emotion-18>*:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0!important;
 }
 
 .emotion-19 {
@@ -586,7 +581,6 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 
 .emotion-20 * {
   font-size: 13px!important;
-  line-height: inherit;
 }
 
 .emotion-20>div {

From d4b8b2c785cecf14074c07f664496246ba78217f Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Thu, 13 Feb 2025 10:14:28 -0500
Subject: [PATCH 5/5] Adds comment

---
 src/components/ListTable.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ListTable.js b/src/components/ListTable.js
index f6cc92153..4935d3923 100644
--- a/src/components/ListTable.js
+++ b/src/components/ListTable.js
@@ -309,6 +309,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
                 {headerGroup.headers.map((header) => {
                   return (
                     <HeaderCell className={cx(baseCellStyle, headerCellStyle)} key={header.id} header={header}>
+                      {/* Wraps cell content inside of a div so that all of its content are together when laid out. */}
                       <div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
                     </HeaderCell>
                   );
@@ -324,6 +325,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
                 const role = isStub ? 'rowheader' : null;
                 return (
                   <Cell key={cell.id} className={cx(baseCellStyle, bodyCellStyle, isStub && stubCellStyle)} role={role}>
+                    {/* Wraps cell content inside of a div so that all of its content are together when laid out. */}
                     <div className={cx(bodyCellContentStyle)}>{cell.renderValue()}</div>
                   </Cell>
                 );