Thumbnails don't float left correctly

[reteP-riS]

I just upgraded from webtrees v2.0.25 to v2.1.6 and upgraded the Extended Family module from v2.1.0.1 to v2.1.5.4 as well. I obviously skipped a few versions and can't tell when exactly the following issue came up first.

When the module is configured to display thumbnails these no longer float left correctly. Instead the thumbnails cause a line break so that the person's box is much higher than required. Consequently there is now a lot of empty space to the right of the thumbnail.

This might have been caused by an earlier switch from the Bootstrap 4 framework to the Bootstrap 5 framework where the CSS class float-left was replaced by float-start. At least when I do this replacement manually all looks well.

I couldn't find the respective PHP or CSS code, but this is the resulting incorrect HTML code - see the 2nd line of this example. I trust you'll find the root cause.

<div class="wt-chart-box-m">
   <div class="wt-chart-box-thumbnail float-left mr-1">
      <i class="icon-silhouette icon-silhouette-m wt-icon-flip-rtl"></i>
   </div>
   <span class="hh_extended_family_counter">1</span>
...
</div>

[reteP-riS]

As a workaround I added my own CSS class float-left via the CSS and JS module like this:

[dir="ltr"] .float-left {float: left !important; padding:0px 4px 0px 0px;}

Nevertheless this issue should be resolved correctly in the module code.

[hartenthaler]

Thank you for reporting! I didn't saw this because I tested during the last weeks using the compact design. It is fixed and will be part of the next release.

[reteP-riS]

Great news! Could you please let us know what exactly needs to be fixed so that we can apply that fix manually? Then there would be no need to hurry with a new release.

Thanks a lot!

[hartenthaler]

Open ressources/views/tab.phtml; then search for "float-"; there should be 3 lines found; replace "float-left" by "float-start".

[reteP-riS]

Perfect. Thank you!