CodePane size not customizable

[MichaelFroeschen]

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list spectacle) [email protected] What version of React are you using? (can be found by running npm list react) [email protected] What browser are you using? Firefox What machine are you on? Windows

Describe the Problem

I made a layout for my presentations that does not use the whole width of the page, by displaying several areas with different background values. The slide is defined like this:

    <Slide>
      <FlexBox
        height="100%"
        flexDirection="column"
        alignItems="flex-start"
        justifyContent="flex-start"
      >
        <Box position="absolute" top="10px" right="10px">
          <Image src="assets/somelogo.png" />
        </Box>
        <Heading fontSize="12px">Header</Heading>
        <Box
          position="absolute"
          top="150px"
          width="700px"
          height="60px"
          backgroundColor="#00518E"
          zIndex="500"
        >
          <Text margin="0px" color="#ffffff" fontSize="22px">
            Sub Header
          </Text>
        </Box>
        <Box
          padding="16px"
          paddingTop="36px"
          position="absolute"
          left="60px"
          top="180px"
          right="60px"
          bottom="40px"
          backgroundColor="#F5F5F5"
        >
          <CodePane language="json">
            {`
{
  "some": value
}
      `}
          </CodePane>
        </Box>
      </FlexBox>
    </Slide>

Using that slide results in the codepane being wider than the box it is contained in. I also have no way to define its width other than setting the width in the theme. Setting the width and height value of the theme to 100% fixes the issue for me, but i still can't customize the code panes size directly. I think that customizing the size might be useful, especially in a situation where the code pane is contained in a sub layout

Expected behavior: [What you expect to happen]

There is a way to customize the code panes size

Actual behavior: [What actually happens]

The code pane size is not customizable which can result in it being too wide

[fthebaud]

I've noticed the same issue today, I was trying to display two blocks of code next to each other using FlexBox and CodePane.

<FlexBox justifyContent="space-around" alignItems="top">
    <CodePane language="tsx" showLineNumbers={false} theme={codeTheme}>
        1...
    </CodePane>
    <CodePane
        language="tsx"
        showLineNumbers={false}
        theme={codeTheme}>
        2...
    </CodePane>
</FlexBox>

I end up with two code blocks, each with a fixed width filling the entirety of the slide (horizontal overflow). I tried using the width / maxWidth props on CodePane, to no avail.

I resorted to a CSS hack to fix the issue (the fixed width is on a <pre> element generated by CodePane):

pre {
  width: 100% !important;
}

[fturiot]

same problem impoqqible to rezise

[fritz-c]

There is a workaround using CSS you could rely on for the time being: https://codesandbox.io/s/codepane-layout-options-workaround-spectacle-ry8cq5?file=/src/index.js:1673-1797

Looking at the CodePane source in the library, it appears there is no existing way to style it with just props. That would be a good feature to add.