UI elements are getting distorted after highlighting

[GaneshDabhade]

Describe the bug
UI elements such as button/ text boxes are getting distorted when highlighted.

Steps to Reproduce

1. Open any web URL (e.g https://github.com/gildas-lormeau/SingleFile)
2. From the context menu select "Single File--> Annotate and Save the page..."
3. It will take you to a new tab, Here try to highlight the elements like buttons, and text boxes.

Bug:
After highlighting elements like buttons, the text box appears to be cluttered.

[gildas-lormeau]

Thank you, this is due to the fact that SingleFile inserts <span> tags in order to implement the text highlighting feature. I'll try to see if I can improve the implementation to avoid the bug you described. In the long term, the implementation will probably use this API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API. It would allow highlighting text without applying changes in the HTML.