Fix [datahub]: Display external viewer button correctly

[tkohr]

Fixes the external viewer button display while allowing truncating long values in the dropdown select.

[fgravin]

Does it works well on mobile too ?

Thanks you 🙏

[github-actions]

Affected libs: feature-record, feature-router, ui-inputs, feature-dataviz, feature-search, feature-map, feature-editor, ui-elements, feature-catalog, ui-catalog, ui-search,
Affected apps: metadata-editor, datahub, demo, webcomponents, metadata-converter, search, map-viewer, datafeeder,

• 🚀 Build and deploy storybook and demo on GitHub Pages
• 📦 Build and push affected docker images

[tkohr]

Does it works well on mobile too ?

Ah, I forgot mobile, I'll have a look

[coveralls]

coverage: 81.806% (-4.7%) from 86.461% when pulling 1f70384 on fix-external-button-flex into 3c899e0 on main.

[tkohr]

I've added the place-self-end for correct positioning of the button on mobile.

Independent of this PR the truncate within the dropdown-selector is broken when switching to mobile layout and applying flex-col here. I remember we already had troubles making truncate work within flex in #516.

For flex-row this works, but apparently not when the child switches to flex-col.

[jahow]

I'm surprised that this does anything; for me the dropdown button already has a truncate built-in if the width is too low for the text to show

[tkohr]

Yes, strangely this is necessary, because of the flex I added in the parent.

[tkohr]

I've added two more commits to fix the dropdown truncate when the title is displayed on top of the dropdown, as well the currently broken truncate in the data-view.component due to the flex around the dropdown.

Everything displays well on desktop and mobile on my side now.

[jahow]

It looks good, I wish we could understand why this kind of class is needed outside of the component (it should be able to decide its own size correctly), but I looked and couldn't find any reason so, let's go with this.

Thanks @tkohr!