feat: response tabs horizontal scrolling (stoplightio#2281)

* feat: response tabs horizontal scrolling * chore: release
vimystic · Nov 8, 2022 · 4c72e2b · 4c72e2b
1 parent b5d99f5
commit 4c72e2b
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 8 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@stoplight/elements": "^7.7.3",
+    "@stoplight/elements": "^7.7.5",
     "@stoplight/mosaic": "^1.33.0",
     "history": "^5.0.0",
     "react": "16.14.0",

diff --git a/packages/elements-core/package.json b/packages/elements-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

diff --git a/packages/elements-core/src/components/Docs/Sections.tsx b/packages/elements-core/src/components/Docs/Sections.tsx
@@ -12,11 +12,11 @@ export interface ISectionTitle {
 
 export const SectionTitle: React.FC<ISectionTitle> = ({ title, id, size = 2, children }) => {
   return (
-    <Flex flexWrap>
+    <Flex w="full">
       <Box py={1} pr={6} as={LinkHeading} size={size} aria-label={title} id={id || slugify(title)}>
         {title}
       </Box>
-      <Box alignSelf={'center'} py={1}>
+      <Box alignSelf={'center'} py={1} flexGrow style={{ minWidth: 0 }}>
         {children}
       </Box>
     </Flex>

diff --git a/packages/elements-core/src/core.css b/packages/elements-core/src/core.css
@@ -85,3 +85,8 @@
   font-size: 12px;
   line-height: 1.5em;
 }
+
+.sl-elements .HttpOperation div[role=tablist] {
+  /* Enables horizontal scrolling for response tabs */
+  overflow-x: auto;
+}
diff --git a/packages/elements-dev-portal/package.json b/packages/elements-dev-portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -64,7 +64,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~7.7.4",
+    "@stoplight/elements-core": "~7.7.5",
     "@stoplight/markdown-viewer": "^5.5.0",
     "@stoplight/mosaic": "^1.33.0",
     "@stoplight/path": "^1.3.2",

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -62,7 +62,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~7.7.4",
+    "@stoplight/elements-core": "~7.7.5",
     "@stoplight/http-spec": "^5.1.4",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.33.0",