mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
4a81785036
This patch addresses #1649 to fix documentation layout. In fact there are multiple issues with the current layout. 1. Flex layout might have an issue with overflowing content. See https://codepen.io/gregorw/full/gOdqreo. 2. The props table at the bottom of each page doesn’t overflow and stretches the layout. This minimal change fixes code snippets in such a way that they are wrapped on small screens, since `overflow-x: scroll` doesn’t seem to work with the flexbox layout used. See code pen for problem description and solution A. This fixes horizontal scrollbars on all pages that don’t have other issues such as a large non-overflowing props table at the bottom. The prop table at the bottom needs a separate PR. Possible solutions are that we get overflow/scroll to work or that we change to the mobile table of contents earlier. Maybe using a non-flexbox layout would solve some of the problems, too. See solution B of code pen above.
21 lines
341 B
Svelte
21 lines
341 B
Svelte
<script>
|
|
export let code = "";
|
|
|
|
import copy from "clipboard-copy";
|
|
import { CodeSnippet } from "carbon-components-svelte";
|
|
</script>
|
|
|
|
<div>
|
|
<CodeSnippet
|
|
code="{code}"
|
|
type="inline"
|
|
copy="{(text) => copy(text)}"
|
|
class="code-override"
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
margin-bottom: var(--cds-spacing-03);
|
|
}
|
|
</style>
|