Drawer / Fields block: collapse tabs in header to dropdown in narrow columns

[distantnative]

Description

Additional context

This will not solve the issue that tabs will still overlap when the tabs component alone is wider than the column.

Changelog

Fixes

• Drawers + Fields block: collapse tabs in header correctly into dropdown for narrow columns
  Block field: Tabs overlapping block title #6864
  Blocks with preview: fields: Block name and tabs do not wrap #6634

Ready?

• In-code documentation (wherever needed)
• Unit tests for fixed bug/feature
• Tests and CI checks all pass

For review team

• Add lab and/or sandbox examples (wherever helpful)
• Add changes & docs to release notes draft in Notion

[afbora]

1024x768px

I know this pr doesn't fix the issue completely Bu what about switching to dropdown automaticly for these cases?

[distantnative]

@afbora is People in your example another tab or the title?

[afbora]

That's a title. I've used the sample blueprint in the #6864

[distantnative]

Wondering why it doesn't wrap as this PR adds the CSS for wrapping. Cause it would still be too wide even on its own row?

[distantnative]

@afbora new attempt

[bastianallgeier]

I've added some additional improvements that might work. It's not super beautiful when there's a name, label and lots of tabs, but it all stays readable at least …

it looks a lot better when the name and label shrink and get a text overflow, but of course we loose readability that way.

[distantnative]

@bastianallgeier Is it intended that the drawer title disappears?

[bastianallgeier]

@distantnative that already happened before my changes.

[distantnative]

:D