scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: handle rte table overflow on smaller screens

Browse Source
This commit is contained in:
Arvid Norlin
2024-08-14 09:11:15 +02:00
parent 6ef4da125d
commit 35128dbf44
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/JsonToHtml/jsontohtml.module.css
View File

@@ -55,6 +55,10 @@
display: inline; display: inline;
} }
.tableContainer {
max-width: 100%;
overflow-x: auto;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.ol:has(li:nth-last-child(n + 5)), .ol:has(li:nth-last-child(n + 5)),
.ul:has(li:nth-last-child(n + 5)) { .ul:has(li:nth-last-child(n + 5)) {

8
components/JsonToHtml/renderOptions.tsx
View File

@@ -376,9 +376,11 @@ export const renderOptions: RenderOptions = {
) => { ) => {
const props = extractPossibleAttributes(node.attrs) const props = extractPossibleAttributes(node.attrs)
return ( return (
<Table key={node.uid} {...props}> <div className={styles.tableContainer}>
{next(node.children, embeds, fullRenderOptions)} <Table key={node.uid} {...props}>
</Table> {next(node.children, embeds, fullRenderOptions)}
</Table>
</div>
) )
}, },