Fix: last column not visible in 2x2 tables on mobile and tablet views

libs/blocks/table/table.css

@@ -692,6 +692,10 @@
     margin: 0;
   }
 
+  .table.preserve-columns .row .section-row-title {
+    grid-column: auto;
+  }
+
   .table:not(.merch) .row .section-head-title,
   .table:not(.merch) .row .section-row-title {
     border-right: 1px solid var(--border-color);
@@ -701,12 +705,25 @@
     display: block;
   }
 
+  .table.preserve-columns .row-heading .col-heading.col-1,
+  .table.preserve-columns .row.row-highlight .col-highlight.col-1 {
+    display: flex;
+  }
+
   .table .section-head .col:not(.section-head-title),
   .table:not(.merch) .col-heading.col-1,
   .table:not(.merch) .row-highlight .col-highlight.col-1:not(:only-child) {
     display: none;
   }
 
+  .table.preserve-columns .row-heading .col-heading:first-child {
+    border-top-left-radius: var(--border-radius);
+  }
+
+  .table.preserve-columns .row-heading .col-heading:last-child {
+    border-top-left-radius: 0;
+  }
+
   .table:not(.merch) .row-highlight:has(> :only-child) {
     grid-template-columns: repeat(auto-fit, 100%);
   }

libs/blocks/table/table.js

@@ -477,6 +477,7 @@ function applyStylesBasedOnScreenSize(table, originTable) {
   const deviceBySize = defineDeviceByScreenSize();
 
   const setRowStyle = () => {
+    if (table.classList.contains('preserve-columns')) return;
     if (isMerch) return;
     const sectionRow = Array.from(table.getElementsByClassName('section-row'));
     if (sectionRow.length) {
@@ -614,7 +615,10 @@ function applyStylesBasedOnScreenSize(table, originTable) {
   }
 
   removeClones();
-  if (deviceBySize === 'MOBILE' || (isMerch && deviceBySize === 'TABLET')) {
+  if (
+    !table.classList.contains('preserve-columns')
+    && (deviceBySize === 'MOBILE' || (isMerch && deviceBySize === 'TABLET'))
+  ) {
     mobileRenderer();
   } else {
     table.querySelectorAll('.hide-mobile, .left-round, .right-round').forEach((col) => { col.classList.remove('hide-mobile', 'left-round', 'right-round'); });
@@ -670,6 +674,10 @@ export default function init(el) {
     expandSection = handleSection(sectionParams);
   });
 
+  const columnCount = el.querySelector('.row-1')?.children.length || 0;
+
+  if (columnCount <= 2) el.classList.add('preserve-columns');
+
   handleHighlight(el);
   handleStickyHeader(el);
   if (isMerch) formatMerchTable(el);

test/blocks/table/mocks/two-column-table.html

@@ -0,0 +1,10 @@
+<div class="table">
+  <div>
+    <div><p>Feature</p></div>
+    <div><p>Details</p></div>
+  </div>
+  <div>
+    <div><p>Row 2 label</p></div>
+    <div><p>Row 2 value</p></div>
+  </div>
+</div>

test/blocks/table/table.test.js

@@ -29,6 +29,22 @@ describe('table and tablemetadata', () => {
       expect(table.querySelector('.row-heading')).to.exist;
     });
 
+    it('does not add preserve-columns class to tables with more than two columns', () => {
+      expect(table.classList.contains('preserve-columns')).to.be.false;
+    });
+
+    it('adds preserve-columns class to a table with two or fewer columns', async () => {
+      const html = await readFile({ path: './mocks/two-column-table.html' });
+      const container = document.createElement('div');
+      container.innerHTML = html;
+      document.body.appendChild(container);
+
+      const twoColTable = container.querySelector('.table');
+      init(twoColTable);
+      expect(twoColTable.classList.contains('preserve-columns')).to.be.true;
+      container.remove();
+    });
+
     it('expand icon event by mouse click', () => {
       const expandIcon = table.querySelector('.icon.expand');
       expect(expandIcon.ariaExpanded).to.be.equal('true');