Code highlight gets cut when scroll is available

[cgutierr-zgz]

What happened?

When we use the highlight for a code snippet it gets cut off on the "overflowing scrolling part(?)"

I noticed this on Google chrome on my pixel 4a

Theme version

2.4.1

Hugo version

0.15

What browsers are you seeing the problem on?

Chrome

Relevant Hugo log output

No response

[jpanther]

Thanks for the report, @cgutierr-zgz. I'll have a look into this and see if I can make some adjustments.

[cgutierr-zgz]

I think the problem does persist it even seems a bit more aggressive now

[jpanther]

Oh no! I tested this using Chrome too and had no issues, but unfortunately I don't have an Android phone to be able to test it on there directly. I take it you're using the highlight shortcode to insert the code block?

[cgutierr-zgz]

Yes, this is an example from a post i made:

{{<highlight dart "hl_lines=12">}}
// ...
final carlosCubit = SettingsCubit('carlos');
final dimaCubit = SettingsCubit('dima');
// ...

class SettingsCubit extends HydratedCubit<Settings> {
  SettingsCubit(this._id) : super(const Settings(themeMode: ThemeMode.system));

  final String _id;

  @override
  String get id => _id;
  //... other methods
}
{{</highlight>}}

If there's anything i can test, lmk, btw it does happen on google chrome too

[cgutierr-zgz]

Example from my chrome on mac -> Version 106.0.5249.119 (Official Build) (arm64)

using iphone XR view

using galaxy s8+

Chrome without any emulator view

[jpanther]

So it looks like there was some CSS caching going on in my Chrome and I've now been able to replicate this! Looking into it again now.

[jpanther]

I've created #383 so that you can have a look and see if this fixes your issue. I've tested it in Chrome and it appears to be working now. Feel free to use the deploy preview on the PR on your device and let me know if the problem has been resolved.

[cgutierr-zgz]

Thanks @jpanther , it does look good now!