diff --git a/docs/tour/grid-diagrams.md b/docs/tour/grid-diagrams.md
index 845f4fe..ae5bf4b 100644
--- a/docs/tour/grid-diagrams.md
+++ b/docs/tour/grid-diagrams.md
@@ -9,6 +9,8 @@ import GridNestedGrid from '@site/static/d2/grid-nested-grid.d2';
import Table from '@site/static/d2/table.d2';
import GridUnaligned from '@site/static/d2/grid-unaligned.d2';
import GridAligned from '@site/static/d2/grid-aligned.d2';
+import GridPadding1 from '@site/static/d2/grid-padding-1.d2';
+import GridPadding2 from '@site/static/d2/grid-padding-2.d2';
# Grid Diagrams
@@ -195,3 +197,26 @@ It'd be nicer if it were centered. This can be achieved by adding 2 invisible el
+## Troubleshooting
+
+### Why is there extra padding in one cell?
+
+Elements in a grid column have the same width and elements in a grid row have the same
+height.
+
+So in this example, a small empty space in "Backend Node" is present.
+
+
+ {GridPadding1}
+
+
+
+
+It's due to the label of "Flask Pod" being slightly longer than "Next Pod". So the way we
+fix that is to set `width`s to match.
+
+
+ {GridPadding2}
+
+
+
diff --git a/src/theme/CodeBlock/CodeBlock.scss b/src/theme/CodeBlock/CodeBlock.scss
index d49216f..ffe8008 100644
--- a/src/theme/CodeBlock/CodeBlock.scss
+++ b/src/theme/CodeBlock/CodeBlock.scss
@@ -147,3 +147,7 @@
.CodeBlock.expanded pre::before {
display: none;
}
+
+.CodeBlock.expanded.expandeable pre {
+ padding-bottom: 4rem;
+}
diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js
index f274dde..2900cf6 100644
--- a/src/theme/CodeBlock/index.js
+++ b/src/theme/CodeBlock/index.js
@@ -80,7 +80,7 @@ export default function D2CodeBlock(props) {
// Just a large enough value to fit all
maxHeight: isExpanded ? "6000px" : "200px",
overflow: "hidden",
- transition: "max-height 0.5s ease",
+ transition: "max-height 1s ease",
};
const { colorMode } = docusaurusThemeCommon.useColorMode();
switch (colorMode) {
@@ -153,7 +153,10 @@ export default function D2CodeBlock(props) {
return (