chore(openapi): tweak code block visibility (#2143)

* chore(openapi): tweak code block visibility * chore: remove extra margin
hashicorp · Aug 30, 2023 · 9d8dde7 · 9d8dde7 · vercel · Aug 30, 2023
1 parent e9161e5
commit 9d8dde7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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%;