fix: list display

sandbox/mock-document-response.ts

@@ -1,7 +1,7 @@
 export default {
   id: 'da315607-4d04-4a54-810d-45156b575932',
   // eslint-disable-next-line no-template-curly-in-string
-  content: "# Markdown UI\n\nA markdown renderer and edit UI.\n\n## Formatting types\n\n### Code block and inline code\n\n```typescript\n/**\n * Combine a first name and last name into a single string.\n * @param {string} firstName - The first name.\n * @param {string} lastName - The last name.\n * @returns {string} The combined full name.\n */\nconst combineNames = (firstName: string, lastName: string): string => {\n  return `${firstName} ${lastName}`\n}\n\nconst name = combineNames('Marty', 'McFly')\n\nconsole.log(name)\n\n// Marty McFly\n```\n\nThis sentence has `inlineCode` in the middle.\n\n### Emoji\n\n:smile: :rocket: :tada:\n\n### Link\n\n[link](https://github.com)\n\n### Tables\n\n| Header | Header | Header |\n| :--- | :--- | :--- |\n| Cell | Cell | Cell |\n\n### Todo items\n\n- [x] Todo item checked\n- [ ] Another item not checked\n\n---\n\n### Diagrams\n\n#### Mermaid\n\n```mermaid\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\n#### Plantuml\n\n```plantuml\nBob -> Alice : hello\n```\n\n#### DOT\n\n```dot\ndigraph example1 {\n    1 -> 2 -> { 4, 5 };\n    1 -> 3 -> { 6, 7 };\n}\n```\n",
+  content: "# Markdown UI\n\nA markdown renderer and edit UI.\n\n## Formatting types\n\n### Code block and inline code\n\n```typescript\n/**\n * Combine a first name and last name into a single string.\n * @param {string} firstName - The first name.\n * @param {string} lastName - The last name.\n * @returns {string} The combined full name.\n */\nconst combineNames = (firstName: string, lastName: string): string => {\n  return `${firstName} ${lastName}`\n}\n\nconst name = combineNames('Marty', 'McFly')\n\nconsole.log(name)\n\n// Marty McFly\n```\n\nThis sentence has `inlineCode` in the middle.\n\n### Links\n\n[GitHub source](https://github.com/Kong/markdown)\n[Docs](https://github.com/Kong/markdown)\n\n### Lists\n\n#### Unordered lists\n\n- A list item\n- Another item in the list\n  - This one is indented\n  - So is this one\n- But this one is not\n\n#### Ordered lists\n\n1. A list item\n2. Another item in the list\n    1. This one is indented\n    2. So is this one\n3. But this one is not\n\n#### Task lists\n\n- [X] A completed task\n- [ ] An incomplete task\n\n### Emoji\n\n:smile: :rocket: :tada:\n\n### Tables\n\n| Header | Header | Header |\n| :--- | :--- | :--- |\n| Cell | Cell | Cell |\n\n---\n\n### Diagrams\n\n#### Mermaid\n\n```mermaid\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\n#### Plantuml\n\n```plantuml\nBob -> Alice : hello\n```\n\n#### DOT\n\n```dot\ndigraph example1 {\n    1 -> 2 -> { 4, 5 };\n    1 -> 3 -> { 6, 7 };\n}\n```\n",
   parent_document_id: null,
   slug: 'markdown',
   title: 'markdown',

src/components/MarkdownContent.vue

@@ -169,11 +169,11 @@ $header-anchor-offset-top: calc(var(--kui-space-80, $kui-space-80) + 2px);
 
     ul, ol {
       margin: var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0) var(--kui-space-70, $kui-space-70);
-      padding-left: var(--kui-space-70, $kui-space-70);
 
       // Remove the margin for a nested list
       ul, ol {
-        margin: var(--kui-space-0, $kui-space-0);
+        margin: var(--kui-space-20, $kui-space-20) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
+        padding-left: var(--kui-space-90, $kui-space-90); // to prevent being cut off
       }
 
       li {