Highligt on smaller font size hides text

Scripture App Builder
1

The height of the highlight color covers the previous rows of text. The reason for this problem is that our app uses a smaller font for /add tags. It seams like the highlight have a fixed height based on the standard font, not the actual font highlighted.

Please see the screen shoot below:

Screenshot_20220211-074222
Screenshot_20220211-0742221920×1200 172 KB

Not sure if there there is something that could be easily fix by changing the style for highlight, or if it is a bug.

2

I found a workaround to this issue by setting a semi-transparent background:

div.hlp1 {
background: rgba(255, 255, 204, 0.3);
color: HighlighterPenTextColor;
}

I didnt know that it was possible to add your own properties, but by adding rgba color with 30% transparent color the text is visible, even if the height of the highlighting overlaps.