From 868c11507cb78e8c16c4f35c7dc4d39af4b453df Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Sat, 4 Jan 2025 18:10:28 +0100
Subject: [PATCH] Improve table layout

---
 .../assets/scss/_collapsible-block.scss       | 26 ++++++++++++++++++-
 themes/maik-blog/assets/scss/_main.scss       |  7 +++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/themes/maik-blog/assets/scss/_collapsible-block.scss b/themes/maik-blog/assets/scss/_collapsible-block.scss
index 5d35acf..611167e 100644
--- a/themes/maik-blog/assets/scss/_collapsible-block.scss
+++ b/themes/maik-blog/assets/scss/_collapsible-block.scss
@@ -32,7 +32,7 @@
             margin: 1em;
 
             > .highlight {
-                margin: 0 -1em;
+                margin: 1em -1em;
                 border-radius: 0;
 
                 &:first-child {
@@ -45,6 +45,30 @@
                     margin-bottom: -1em;
                 }
             }
+
+            > table {
+                margin: 1em -1em;
+                border-radius: 0;
+
+                &:only-child {
+                    background: inherit;
+                    padding: 0 10px;
+                }
+
+                &:first-child {
+                    margin-top: -1em;
+                }
+
+                &:last-child {
+                    margin-bottom: -1em;
+                }
+
+                td {
+                    word-break: normal;
+                    overflow-wrap: normal;
+                    white-space: pre;
+                }
+            }
         }
     }
 
diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss
index 9d906d0..ab0dc38 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -484,21 +484,20 @@ svg {
 
 table {
     width: 100%;
-    padding: 10px 10px 10px 20px;
+    padding: 10px;
     border-radius: 8px;
     font-size: 0.95rem;
-    overflow: auto;
     background: $light-background-secondary;
 
     th {
-        padding: 8px 4px;
+        padding: 8px 8px;
 
         word-break: normal;
         overflow-wrap: normal;
     }
 
     td {
-        padding: 6px 4px;
+        padding: 6px 8px;
 
         border-top: 1px solid $light-color-secondary;
     }