fix(route-information-popup): popup text splits mid-word

Previously floating features were used for the layout of the popups of route information.
As the size of the leaflet popup is based on the size of the div, when the icon for the
profile is floated, which moves the text but doesn't change the size of the underlying div.
This meant that the text got wrapped into new lines.

Now a flex layout is used for consistent positioning together with computing the
min-width from the content, to ensure the parent div resizes as expected and word breaks
are avoided.

- reduce to necessary css classes
- inline tooltip variable
- remove overflow-x/y from .leaflet-popup-content override to avoid scrollbars

Co-authored-by: Jakob Schnell <koebi@ezelo.de>

src/fragments/map-view/components/ors-l-polyline/ors-l-polyline.js

@@ -196,15 +196,13 @@ export default {
           tooltipInnerContent += `<br> ${this.$t('global.duration')}: ${humanizedData.duration}`
         }
         let tooltipIcon = this.tooltipIcon
-        let iconStyle = ''
         if (store.getters.mapSettings.skipAllSegments) {
-          tooltipIcon = 'near_me'
-          iconStyle = 'transform: scaleY(-1) rotate(45deg)'
+          tooltipIcon = 'arrow_forward'
         }
         if (tooltipIcon) {
           return `
           <div style="display:flex;align-items:center;">
-            <div class="material-icons cy-route-popup-icon" style='min-width:40px;${iconStyle};'>${tooltipIcon}</div>
+            <div class="material-icons cy-route-popup-icon" style='min-width:40px;'>${tooltipIcon}</div>
             <div class="cy-route-popup-text" style='min-width:max-content;'>${tooltipInnerContent}</div>
           </div>`
         } else {