Merge pull request #836 from 3YOURMIND/fix-code-block-display

fix: unflexbox code sections
3YOURMIND · Dec 4, 2023 · 1a6d442 · 1a6d442
2 parents 5f9d1aa + 1a92d41
commit 1a6d442
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/documentation/pages/usage/components/popover.vue b/packages/documentation/pages/usage/components/popover.vue
@@ -88,11 +88,9 @@
 				<KtButton label="KtPopover Button" />
 				<template v-if="values.usageMode === UsageMode.SLOT" #content>
 					<div style="max-width: 500px">
-						<code
-							data-lang="vue"
-							v-text="'<template #content>Slot</template>'"
-						/>
-						<br />
+						<pre>
+							<code v-text="'<template #content>Slot</template>'" />
+						</pre>
 						<strong>We also support sub-dropdowns</strong> like
 						<code>KtFieldSingleSelect</code>, however it’s recommended to use
 						<code>trigger="click"</code> when utilizing this.

diff --git a/packages/kotti-ui/source/kotti-style/_codes.scss b/packages/kotti-ui/source/kotti-style/_codes.scss
@@ -15,12 +15,16 @@ pre {
 	color: inherit;
 
 	code {
-		flex: 1;
-		flex-direction: column;
-		justify-content: space-between;
 		padding: unset;
 		overflow: unset;
 
+		&[data-lang] {
+			display: flex;
+			flex: 1;
+			flex-direction: row;
+			justify-content: space-between;
+		}
+
 		&[data-lang]::after {
 			align-self: flex-start;
 			margin: calc(-1 * var(--unit-2)) calc(-1 * var(--unit-8)) 0 0;
@@ -32,8 +36,6 @@ code {
 	@extend %code-base;
 
 	position: relative;
-	display: inline-flex;
-	gap: var(--unit-1);
 	padding: var(--unit-h);
 	overflow: hidden;
 	font-size: 85%;