Gatsby-theme-novela: Syntax highlight: the font-size gets bigger on mobile browser view if we write long code on a line.

[alfieqashwa]

version 0.6.5
Local data source

Describe the bug
on syntax-highlight, the font-size gets bigger on mobile browser view when write long characters.

To Reproduce
Steps to reproduce the behavior:
Try add this:

var sOne, sTwo = "JavaScript syntax highlighting", "Long string to check the view from the mobile browser";
alert(s)

and compare with

var sOne = "JavaScript syntax highlighting";
alert(s)

then the first one is bigger than the second one.

Expected behavior
it should not gets bigger. In mobile browser view (Chrome, Firefox, Safari) I see kentcdodds.com the behavior that i explained is not happen (also the line-highlight ends perfectly along the line).

Screenshots
If applicable, add screenshots to help explain your problem.

the screenshot i took from the mobile browser view when was opening https://sebastienlorber.com/handling-api-request-race-conditions-in-react

Browser

• Browser chrome, mozilla firefox, iOS safari

Additional context

i've been looking to https://github.com/kentcdodds/kentcdodds.com/blob/master/src/components/mdx/code.js and https://github.com/kentcdodds/kentcdodds.com/blob/master/src/components/layout.js also that behavior is mention in https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/#optional-add-line-highlighting-styles trying to find solution myself so i can make PR to helps novela-theme. But until now I don't find it. Sorry.

[brotzky]

Interesting! Thanks for the report, will take a look.

[Haja-andri]

Hi Dennis,

I have fixed this locally a while ago. I'd like to submit a PR but I am having trouble committing and push my fixe.
Following are the steps I have followed

• Forked the repo
• Cloned locally
• Created a branch
• Fixed and tested locally
• git add .
• git commit -m "Fixe for mobile view when code overflow the box size and font size get too big"

Not sure how to proceed from here

Could you give me some indication as for how to proceed to finalise the PR?

By the way, this is a really awesome Template, you guys rocks :)

Cheers

[brotzky]

Follow the commit message template found in the "Get help: LINK" guide in the error message!

Check the most recent commits to this repo to see some examples of commit messages as well:
https://github.com/narative/gatsby-theme-novela/commits/master

I think after that you should be fine to commit. Really appreciate the fix :)!

[Haja-andri]

Thanks for getting back to me on your weekend Dennis! I managed to create the PR, I hope you will find it helpful. This is in fact my first ever PR to contribute to an external repo (started learning to code 4 months ago, that explains my questions above :). I am personally using this theme for several reasons. Firstly because it is abvioiusly just absolutely beautiful. And Secondly, because I wanted to learn to use Gatsby/GraphQL. And there is no better way to learn than using it. You can checkout my blog here. I still have few PRs that I'd like to submit (some customisation I have done for me), but lets see if this one go through first ;) let me know if you have any questions.

[brotzky]

Thats awesome @Haja-andri :) Super cool to hear and that's a fantastic accomplishment.

Will checkout the PR.

[alfieqashwa]

Hi @Haja-andri. I looked at your blog. That's awesome customization. Agree, Novela is really beautiful theme.

[brotzky]

This was merged by the way! Download latest to have some fun.

[Haja-andri]

@brotzky Cool ! I'll go celebrate ;) .

@alfieqashwa I checked your blog as well, I return the compliment, you've done some really nice customisation. I'd like to know more about some of them, maybe we can share few tips here and there... 👍 Let me know how to reach-out

Finally a little favour to both of you. I am also starting my twitter journey (created and account this weekend) and doing followers acquisition manually for now. Follow me here, I will be sharing some cool stuff soon, including my experience using Gatsby with Novela theme :)