Revert "keep Scratch block pills whole when instructions wrap"

[maxelkins]

Reverts #1637.

This removes the inline-block styling and margin added for Scratch block pills.

[zetter-rpf]

The current solution doesn't actually address this issue since the text is still breaking.

I've seen cases where the text fits on one line so this does prevent wapping in the block for thoose.

In this case I believe that this require a content change rather than a design change:

For the ExCS migration we said we want to avoid having to change content. As well putting a burden on the content authors, there are a lot of existing remixed projects that aren't going to be able to be updated.

I think the key issue is if we're happy with the wrapping or not. I don't have an opinion about this, but I think you should talk to the person who raised the issue.

[maxelkins]

For the ExCS migration we said we want to avoid having to change content. As well putting a burden on the content authors, there are a lot of existing remixed projects that aren't going to be able to be updated.

Understood, I'm not suggesting we need to change anything for the migration. The way it was working was the same as the current ExCS behaviour.

I think the wrapping is fine, and more readable than creating empty spaces in the text.

Happy to talk to the team

[zetter-rpf]

The way it was working was the same as the current ExCS behaviour

That's not true. The blocks in ExCS go onto a new line to avoid wrapping mid block. They are also much smaller as they don't use a fixed width font.

[maxelkins]

The blocks in ExCS go onto a new line to avoid wrapping mid block

Ah, thanks for clarifying, I think I was thinking of Code Club Projects.

---

After thinking it through again with the additional feedback (very helpful thank you) I was leaning towards keeping this change - since both thinks can be true: its helpful that these blocks wrap, but we can also encourage content authors to keep them short and use other display methods.

However I do still think it creates some odd visuals and wrapping which creates big empty spaces, widowed punctuaction etc.

For example:

vs

I also looked at a few other sites to see how they handle this, and of the few I looked at they all seem to wrap how we initially implemented it (see below).

Free Code Camp:

Code Academy:

Github:

Conclusion

For now, I think the original wrapping creates more readable instructions.

In addition, future interations of instructions should look to utilise other ways of writing content i.e. code blocks or rendered scratch blocks. (With the understanding that instructions currently remixed will not be updated, but still legible with the wrapping).

For example:

I'll reach out to the Experience CS team to talk about this change and how we could adapt instructions and/or other ways we could improve the design

---

Side note:

ExCS also doesn't have a resizable panel and relies on fixed widths, if the content is too long then it overflows, which is addressed in both solutions 👍