diff --git a/src/ui/components/tile-grid/TileStack.tsx b/src/ui/components/tile-grid/TileStack.tsx
index cae0eadbf..b4a3b0df7 100644
--- a/src/ui/components/tile-grid/TileStack.tsx
+++ b/src/ui/components/tile-grid/TileStack.tsx
@@ -21,7 +21,7 @@ export function TileStack({
{Children.toArray(children).map((section, index) => (
{section}
diff --git a/src/ui/tests/components/tile-grid/TileWall.test.tsx b/src/ui/tests/components/tile-grid/TileWall.test.tsx
index 44af98eea..e7c76634b 100644
--- a/src/ui/tests/components/tile-grid/TileWall.test.tsx
+++ b/src/ui/tests/components/tile-grid/TileWall.test.tsx
@@ -113,6 +113,19 @@ describe("TileStack", () => {
expect(screen.getByText("first").parentElement).toHaveClass("border-b");
expect(screen.getByText("second").parentElement).toHaveClass("border-b");
});
+
+ it("hides a section whose child renders nothing, like a closed editor", () => {
+ const Closed = () => null;
+ const { container } = render(
+
+ first
+
+ ,
+ );
+ const sections = container.querySelectorAll(".border-b");
+ expect(sections[sections.length - 1]).toHaveClass("empty:hidden");
+ expect(sections[sections.length - 1]).toBeEmptyDOMElement();
+ });
});
describe("cards outside a tile layout", () => {