Issues with `display: flex`

[CallMeHein]

The spans that are created by the extension can mess with Flex layouts:

<div id="container" style="display: flex; flex-direction: row;">
  Text with<br>a break
</div>

This renders correctly as one block across two rows

When searching with the extension, the html ends up being the following (simplified):

<div id="container" style="display: flex; flex-direction: row;">
  <span>Text with</span><br><span>a break</span>
</div>

The individual parts of the text are now considered separate blocks and are affected by the flex layout -> they render in the same row because of flex-direction: row

The immediate solution could be to set display: contents on the created spans so they don't generate their own block and are unaffected by flex

[pzhlkj6612]

@CallMeHein: Nice catch!

Setting display: contents to generated spans does solve the issue with layout, but it unfortunately also prevents the background of those spans from being colored (highlighted).

git-diff

diff --git a/content/highlighter.js b/content/highlighter.js
index 25f2d08..b5c9f11 100644
--- a/content/highlighter.js
+++ b/content/highlighter.js
@@ -29,7 +29,7 @@ Find.register('Content.Highlighter', function(self) {
 
                     //If reached max number of occurrences to show, don't highlight text
                     if (this.maxIndex == null || this.occIndex <= this.maxIndex) {
-                        let style = 'all: unset; background-color: ' + options.all_highlight_color.hexColor + '; color: black;';
+                        let style = 'all: unset; display: contents; background-color: ' + options.all_highlight_color.hexColor + '; color: black;';
                         let classList = 'find-ext-occr' + index + ' ' + allHighlight;
                         this.openingMarkup = '<span style="' + style + '" class="' + classList + '">';
                         this.closingMarkup = '</span>';
@@ -234,7 +234,7 @@ Find.register('Content.Highlighter', function(self) {
         let previousIndex = Array.from(document.querySelectorAll('.' + indexHighlight));
         if (previousIndex && previousIndex.length) {
             for (let elsIndex = 0; elsIndex < previousIndex.length; elsIndex++) {
-                let style = 'all: unset; background-color: ' + options.all_highlight_color.hexColor + '; color: black;';
+                let style = 'all: unset; display: contents; background-color: ' + options.all_highlight_color.hexColor + '; color: black;';
                 previousIndex[elsIndex].classList.remove(indexHighlight);
                 previousIndex[elsIndex].setAttribute("style", style);
             }
@@ -246,7 +246,7 @@ Find.register('Content.Highlighter', function(self) {
         }
 
         for (let elsIndex = 0; elsIndex < els.length; elsIndex++) {
-            let style = 'all: unset; background-color: ' + options.index_highlight_color.hexColor + '; color: black;';
+            let style = 'all: unset; display: contents; background-color: ' + options.index_highlight_color.hexColor + '; color: black;';
             els[elsIndex].classList.add(indexHighlight);
             els[elsIndex].setAttribute("style", style);
         }
diff --git a/content/parser.js b/content/parser.js
index 6871c48..74c0dda 100644
--- a/content/parser.js
+++ b/content/parser.js
@@ -114,7 +114,7 @@ Find.register('Content.Parser', function(self) {
                                        }
 
                                        let wrapperElement = document.createElement('span');
-                                       wrapperElement.style.cssText = 'all: unset;';
+                                       wrapperElement.style.cssText = 'all: unset; display: contents';
                                        wrapperElement.setAttribute('id', identifierUUID);
                                        node.parentNode.insertBefore(wrapperElement, node);
                                        wrapperElement.appendChild(node);

Maybe we need to wrap the whole element with a box before creating spans in it? It may become so much complex, I guess.