Fix: last column not visible in 2x2 tables on mobile and tablet views#6258
Fix: last column not visible in 2x2 tables on mobile and tablet views#6258jsmitrah26 wants to merge 2 commits into
Conversation
7eb4a99 to
92d6167
Compare
| } | ||
|
|
||
| .table.preserve-columns .section-row-title { | ||
| grid-column: auto !important; |
There was a problem hiding this comment.
Can selector be adjusted so we can avoid !important ?
|
|
||
| .table.preserve-columns .col-heading.col-1, | ||
| .table.preserve-columns .row-highlight .col-highlight.col-1 { | ||
| display: flex !important; |
| if (table.classList.contains('preserve-columns')) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
nit;
| if (table.classList.contains('preserve-columns')) { | |
| return; | |
| } | |
| if (table.classList.contains('preserve-columns')) return; |
| if (columnCount <= 2) { | ||
| el.classList.add('preserve-columns'); | ||
| } |
There was a problem hiding this comment.
nit:
| if (columnCount <= 2) { | |
| el.classList.add('preserve-columns'); | |
| } | |
| if (columnCount <= 2) el.classList.add('preserve-columns'); |
| const firstRow = el.querySelector('.row-1'); | ||
| const columnCount = firstRow?.children.length || 0; |
There was a problem hiding this comment.
nit:
| const firstRow = el.querySelector('.row-1'); | |
| const columnCount = firstRow?.children.length || 0; | |
| const columnCount = el.querySelector('.row-1')?.children.length || 0; |
|
Thanks for the review, @zagi25 ! I've addressed all the feedback and pushed the latest changes, including the CSS specificity update and the suggested JS improvements. Thanks! |
|
@jsmitrah26 has this been run by Consonant or anyone else ? Although it does fix the issue it changes look of the table, currently rows are stacked, with your fix they stay as columns. |
|
Hi @zagi25 , Thanks for pointing this out. This hasn't been reviewed by the Consonant team yet. While exploring the Table block, I noticed this issue specifically with two-column tables, where the mobile/tablet column selector isn't available, resulting in one column being hidden with no way to access it. That's why I decided to work on a fix for this specific case. I also discussed this with my colleague VenkateshMitrah, who is a vendor worker on Adobe. He pointed me to the related tickets (MWPW-194499 and MWPW-188525) and explained that they are currently on hold until the site redesign. |
2 participants
Resolves: MWPW-199959
Description
As part of exploring the Adobe Blog components in Milo, I identified an issue with the Table block's responsive column display. I investigated the root cause, implemented a fix, and contributed the changes.
When a Table block contains exactly two columns, the first column becomes hidden on mobile and tablet viewports, leaving only one column visible. This change automatically preserves both columns for two-column tables, ensuring they remain visible and accessible across smaller viewports while keeping the existing behavior unchanged for tables with more than two columns.
Steps to Reproduce
Expected: Both columns remain visible.
Actual: The first column is hidden, leaving only one column visible.
Test URLs
Before: https://main--mitrah-milo-hub--jsmitrah26.aem.live/table-block
After: https://main--mitrah-milo-hub--jsmitrah26.aem.live/table-block?milolibs=table-preserve-column--milo--jsmitrah26