mi6
The table on the "Auditory needs" page has border gaps between each column
Summary of the bug
The table under the "Example of hearing impairments" on the "Auditory needs" page has border gaps between each column which seems inconsistent with the design of other pages
🪜 How to reproduce
Navigate to the "Accessibility" navigation item In the left hand nav, open up the "accessibility needs" accordion Select the "Auditory needs" page and scroll down to the "Examples of hearing impairments" heading
📸 Screenshots or code
🖥 📱 Device
- Type: Desktop
- Device: MacBook
- Browser version: Chrome 131
🧐 Expected behaviour
The assumption is that there should be no border gaps between columns, however this should be checked with design first
seems to be an issue with the way mdx gets converted to table. it only applies the border on the td elements, not the tr
Proposal: provide a CSS fix in the Design System (rather than modifying the underlying MDX)
A wrapped component in the overrides could help: https://github.com/mi6/ic-design-system/blob/main/src/components/WrappedAlert/index.tsx
fix seems to be to set border-spacing: 0 on the table, but need to find a way to apply this to potentially only the markdown generated tables, which converts the following format to a table: