Hot Potato Python/JS tutorial: Highlight background frame for code is not fit

[Sheila111]

Describe the bug Hot Potato Python/JS tutorial: Highlight background frame for code is not fit

Steps to reproduce the behavior

3-19-2023 -- see note in https://github.com/microsoft/pxt-microbit/issues/4131#issuecomment-1474662251 and later for clarification of expected behavior.

1.Nabigate to https://makecode.microbit.org/beta# 2.Games----->Hot Potato------>Python Start Tutorial 3.Cllick step 3,4,5,6,7

Expect behavior It need to be fit for code

Actual behavior Hot Potato Python/JS tutorial: Highlight background frame for code is not fit

Additional context 1.OS: Windows(rs6) 2.makecode.microbit.org version: 3.1.87 3.Microsoft MakeCode version: 6.13.42

[ganicke]

@Sheila111 - The current display appears like this:

What is not fitting inside? The text of the code or the area of the yellow highlight?

The code progression from Step 1 to Step 2. The highlight of the difference is correct.

Step 1

def on_button_pressed_a():
    pass
input.on_button_pressed(Button.A, on_button_pressed_a)

Step 2

timer = 0

def on_button_pressed_a():
    global timer
    timer = randint(5, 15)
input.on_button_pressed(Button.A, on_button_pressed_a)

Document view: https://makecode.microbit.org/projects/spy/hot-potato

[Sheila111]

@ganicke What is not fitting inside? -----> The area of the yellow highlight is too long. Maybe adapting code length is better?

[ganicke]

@Sheila111 - are you expecting it to look more like this?

[Sheila111]

@ganicke yes, I think it's better for user.

[ganicke]

This is a request to change the css to only highlight the text span in diffs.