fix(tables): fix tables overflowing divs and unaligned borders #160
Conversation
## 🧰 Changes - add `overflow: auto` to `.rdmd-table-inner` to allow large tables to scroll as per the request in: https://linear.app/readme-io/issue/CX-179/tables-no-longer-scrolling-horizontally - remove the `:after` border and replace it with a border applied directly to the table (also, nests `:first-child` CSS rules under the new `table` rule) - sort CSS properties and lints CSS (going to make into separate commit for easier review) ## 🧬 QA & Testing - Do long tables with multiple columns that were built with the table widget now show correctly: - stay inside their containing div - don't appear to have extra columns - don't appear to have a line through the first overflow column (see video in https://linear.app/readme-io/issue/CX-179/tables-no-longer-scrolling-horizontally)
CX-179 Tables no longer scrolling horizontally
Getting reports of tables extending out too far. https://galileo-ft.readme.io/galileo-pro/reference#program-api-intro It's also happening in our own docs: https://docs.readme.com/docs/transifex-1 Looks like the wrapping and/or the horizontal scrolling is not happening. Intercom links https://app.intercom.com/a/apps/m6855w1q/inbox/inbox/2699575/conversations/7278100011982 https://app.intercom.com/a/apps/m6855w1q/inbox/inbox/2699575/conversations/7278100012044 https://app.intercom.com/a/apps/m6855w1q/inbox/inbox/3483083/conversations/7278100012306 https://app.intercom.com/a/apps/m6855w1q/inbox/inbox/3483083/conversations/7278100012550 https://app.intercom.com/a/apps/m6855w1q/inbox/inbox/3483083/conversations/7278100012715 https://app.intercom.com/a/apps/m6855w1q/inbox/inbox/3293893/conversations/7278100013139 (upgraded this person to have CSS — downgrade after) |
|
Here are the changes that will be included in the main ReadMe repo to fix the tables popping out of their divs at iPad widths. 👍 EDIT: Put up a PR just to show those small changes: https://github.com/readmeio/readme/pull/4463/files |
|
This PR was released!🚀 Changes included in v6.27.1-next.2 |
## Version 6.27.1 ### 🛠 Fixes & Updates * **image:** filter null magic blocks ([#158](#158)) ([603e0b5](603e0b5)) * fix release (not all masters are mains) ([0f5a8e9](0f5a8e9)) * fix release branch ([345e44f](345e44f)) * **tables:** fix tables overflowing divs and unaligned borders ([#160](#160)) ([aa5fc94](aa5fc94)) * trigger release ([b7349c2](b7349c2)) <!--SKIP CI-->
|
This PR was released!🚀 Changes included in v6.27.1 |
🧰 Changes
overflow: autoto.rdmd-table-innerto allow large tablesto scroll as per the request in:
https://linear.app/readme-io/issue/CX-179/tables-no-longer-scrolling-horizontally
:afterborder and replace it with a border applieddirectly to the table (also, nests
:first-childCSS rules underthe new
tablerule)Separated the linting/sorting changes into a separate commit for easier review:
Content changes commit:
8134338
Just linting and sorting fixes commit:
ba6a949
🧬 QA & Testing
Demo video with audio showing markdown fixes alongside an accompanying fix to be included in the readme repo PR
Added this since it's such a pain and half getting it set up npm link + temp disabling the existing hotfixes in the browser
table-fixes.with.audio.mp4
widget now show correctly and...
(see video in https://linear.app/readme-io/issue/CX-179/tables-no-longer-scrolling-horizontally)
Fixes CX-179