Inline Code Gets Cutoff (Justified alignment)

[derks]

I have a trivial bug in that any inline code (i.e. something like this) is getting cutoff (like justified alignment). If I make the same text bold, it remains in-tact, but inline code gets chopped, and the remainder ends up on the next line.

Any suggestions on how I can tweak the CSS to avoid that?

[bep]

Any suggestions on how I can tweak the CSS to avoid that?

No, but as this project has (almost) no CSS on its own, I would suggest you ask the Slate project that same question.

[derks]

@bep makes sense, thank you.

[derks]

@bep I've submitted this upstream, and they were able to provide a work-around. Unfortunately though, I can't seem to get it working in docuapi and was wondering if you might be able to help:

• https://github.com/lord/slate/issues/752#issuecomment-299013257

Per suggestion, I tried putting the following in layout/partials/hook_head_end.html:

<style>
code {
    background-color: rgba(0,0,0,0.05);
    padding: 3px;
    border-radius: 3px;
    // @extend %break-words;
    @extend %code-font;
  }
</style>

I thought that should work being that the hook_head_end is loaded after styles and slate... but doesn't seem to have any effect. Any help would be appreciated.

[bep]

The snippet you posted seem to be SASS, i.e. not CSS. I could put it into my build, but it would be really cool if they could fix it in Slate so I could just use their fix.

[derks]

@bep thanks for the reply... I just realized my mistake after troubleshooting in browser console.. I actually needed .content code { ... this worked for me:

<style>
.content code {
    background-color: rgba(0,0,0,0.05);
    padding: 3px;
    border-radius: 3px;
    @extend %code-font;
    word-break: keep-all;
}
</style>

Really appreciate your help on it either way. Thank you.