Blocks with preview: fields: Block name and tabs do not wrap

[hariom147]

Description

When using preview: fields for blocks with a long title and/or many tabs, the block-title and the tabs do not wrap for narrow layouts, but instead move into eachother.

Expected behavior
When space runs out, block-title and tabs should wrap, as to stay readable and clickable.

Screenshots

To reproduce

Use this modified blueprint of the default quote-block in the starterkit.

name: Block with a longer than usual name
icon: quote
wysiwyg: true
preview: fields
tabs:
  tab1:
    fields:
      text:
        label: field.blocks.quote.text.label
        placeholder: field.blocks.quote.text.placeholder
        type: writer
        inline: true
        icon: quote
      citation:
        label: field.blocks.quote.citation.label
        placeholder: field.blocks.quote.citation.placeholder
        type: writer
        inline: true
        icon: user
  tab2:
    fields:
      info1:
        type: info
        text: Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.

  tab3:
    label: Tab with a really long name
    fields:
      info1:
        type: info
        text: Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.

[afbora]

I'm not sure which one is best way. My favorite is flex column option for mobile screens.

Wrap

Flex column

[distantnative]

@afbora could the tabs collapse on narrow views, like we do for the main blueprint tabs?

[afbora]

@distantnative I think this is great idea. But I've checked the tabs component (Layout/Tabs.vue) and it's working with link prop. But drawer tabs working with hide/show logic (@open). Maybe it's doable but it's difficult for me 🙈

[hariom147]

I also noticed, that long block-titles overflow even without tabs...