Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom-in moves code on left side out of the window #29

Closed
kabl opened this issue Sep 1, 2018 · 7 comments
Closed

Zoom-in moves code on left side out of the window #29

kabl opened this issue Sep 1, 2018 · 7 comments

Comments

@kabl
Copy link

kabl commented Sep 1, 2018

Hi thanks for your amazing work.

When zooming in from a big code snippet, whole text is moved outside on the left side. See the screenshots.

I used your 'sample.mdx' deck:

<CodeSurfer
  title="Scale and Scroll 2"
  notes="Long snippets are scaled ⬇️"
  code={require("!raw-loader!../tronix.sol")}
  steps={[
    { range: [1, 3], notes: "⬇️" },
    { range: [5, 13], notes: "⬇️" },
    { range: [15, 32], notes: "⬇️" },
    { lines: [30, 35], notes: "⬇️" },
    { range: [15, 32], lines: [40], notes: "➡️" }
  ]}
/>

code snipppet can be found here: https://etherscan.io/address/0xf230b790e05390fc8295f4d3f60332c93bed42e2#code

image
image

@GazzaHazza
Copy link

I am also noticing this! Is there any solution?

@pomber
Copy link
Owner

pomber commented Sep 3, 2018

Hi! for my decks I try to keep the code in less than 50 columns (with prettier "printWidth": 50).

I'm planning to make this more responsive to the viewport and code width (#2), but having very long lines will still be a problem.

@snesjhon
Copy link

snesjhon commented Sep 4, 2018

Hi. I was also having this problem when I was making code-surfer slides. I was able to find a temp fix.

If you pass it a custom layout, you can change the font-size

import Layout from './layout.js';
---
export default Layout
<CodeSurfer
  theme={vsDarkPlus}
   ...
// layout.js
import React from 'react'
export default ({ children }) =>
  <div style={{ fontSize: '19px' }}> {children} </div>

And changing the font-size, depending on how big my code was.

See screenshots below.

I don't know if that'll solve OP's problem or is a permanent fix. Maybe <CodeSurfer> can take fontSize as a props; though as pomper said he's planning on making it more responsive, so it might be a moot point.

Without layout.js
withoutlayout

With layout.js
withlayout

@Fetz
Copy link

Fetz commented Nov 4, 2018

#29 (comment)

Sadly, that prettier option doesn't work well when using jest inlineSnapshots

@mohseenrm
Copy link

Fix by @snesjhon works! maybe fluid font-size as props helps?

@pomber pomber mentioned this issue May 13, 2019
19 tasks
@Relequestual
Copy link

Relequestual commented Aug 30, 2019

Having an issue with a long line being added (96 cols).
This is a an auto formatted JSON file, so I can't change it.
I tried to make it wrap, but could not get the css to work.

Ideally it would zoom out, but it seems like adding new wider lines doesn't make it zoom out, and the width is fixed based on the first step of code.

@pomber
Copy link
Owner

pomber commented Dec 10, 2019

Should be fixed in v3

@pomber pomber closed this as completed Dec 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants