Icon breaks line with title inside Scale-Telekom-Mega-Menu-Column

[AC40]

Scale Version
3.0.0-beta.154

Framework and version
Plain HTML and Scale Components

Current Behavior
The icon of the mega-menu-column link (title above each column) breaks lines on viewports close to the breakpoint at which the desktop nav menu is replaced with the mobile nav menu.
This make sthe hierarchy and relationship between icon and title confusing and visually unclear for users.

Expected Behavior
There are two possible, "better", solutions:

1. The icon remains top-aligned with the title. In case of word wrap, it is still on the same height as the first and topmost word of the title.
2. The icon remains center-aligned with the title. In case of word wrap, it is in the middle of the total height of the title.
   
   

Code Reproduction
Any of the official scale examples with multiple levels work (e.g.: examples/telekom-header-samples/mega-menu

        <scale-telekom-mobile-menu slot="mobile-main-nav" app-name-link="/bar">
            <scale-telekom-mobile-menu-item active>
              <a href="#">Topic One</a>
              <scale-telekom-mobile-menu-item active slot="children">
                <a href="#">Second Level</a>
                <scale-telekom-mobile-menu-item slot="children">
                  <a href="#">Third Level</a>
                </scale-telekom-mobile-menu-item>
              </scale-telekom-mobile-menu-item>
            </scale-telekom-mobile-menu-item>
          </scale-telekom-mobile-menu>
      </scale-telekom-mobile-flyout-canvas>
    </scale-telekom-nav-flyout>
  </scale-telekom-nav-item>
</scale-telekom-nav-list>
<!-- main navigation (desktop) -->
<scale-telekom-nav-list variant="main-nav" slot="main-nav">
  <scale-telekom-nav-item active>
    <a href="#">Topic One</a>
  </scale-telekom-nav-item>
  </scale-telekom-nav-item>
</scale-telekom-nav-list>

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome, Firefox
• Version 131.0.6778.205 (Chrome), 133 (Firefox)

[amir-ba]

thank you @AC40 for creating a detailed issue. you can override the scale-telekom-mega-menu-colum css to have this resolved for you until we have the time to add the fix in the source code.
check the css changes in this sandbox for example

[AC40]

Thank you @amir-ba for the sandbox, your fix works well for now.