From 9d8dde72bb527c5c61eec4552801eb388fc399a0 Mon Sep 17 00:00:00 2001
From: Zach Shilton <4624598+zchsh@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:21:19 -0400
Subject: [PATCH] chore(openapi): tweak code block visibility (#2143)

* chore(openapi): tweak code block visibility

* chore: remove extra margin
---
 .../open-api-operations/open-api-operations.module.css    | 4 ----
 .../operation-sections/operation-sections.module.css      | 8 ++++++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/open-api-docs-view/components/open-api-operations/open-api-operations.module.css b/src/views/open-api-docs-view/components/open-api-operations/open-api-operations.module.css
index d9cdf2079a..2df4eebd5a 100644
--- a/src/views/open-api-docs-view/components/open-api-operations/open-api-operations.module.css
+++ b/src/views/open-api-docs-view/components/open-api-operations/open-api-operations.module.css
@@ -8,7 +8,3 @@
 	flex-direction: column;
 	gap: 60px;
 }
-
-.header {
-	margin-bottom: 24px;
-}
diff --git a/src/views/open-api-docs-view/components/operation-sections/operation-sections.module.css b/src/views/open-api-docs-view/components/operation-sections/operation-sections.module.css
index 87bcbdfae8..aff25f1e17 100644
--- a/src/views/open-api-docs-view/components/operation-sections/operation-sections.module.css
+++ b/src/views/open-api-docs-view/components/operation-sections/operation-sections.module.css
@@ -14,6 +14,11 @@
 	grid-template-areas: 'header' 'details';
 	grid-template-columns: minmax(0, 1fr);
 
+	/* We show 'examples' in a one-column if the viewport size is large enough */
+	@media (min-width: 420px) {
+		grid-template-areas: 'header' 'examples' 'details';
+	}
+
 	/* Note: 744px = 360px per column, plus 24px grid gap.
 	   Calc & CSS vars are not supported in container queries. */
 
@@ -38,8 +43,7 @@
 .examplesStickyContainer {
 	display: none;
 
-	/* stylelint-disable-next-line at-rule-no-unknown */
-	@container (min-width: 744px) {
+	@media (min-width: 420px) {
 		display: block;
 		grid-area: examples;
 		height: 100%;