[docs] [bugs] enabling scrolling UX of Tabs in Drawer components, no-swipe-close ignored

[gg4u]

Not sure if a bug or I am missing smtg from the Documentation.

I am organising content on a side panel on the right, the user can open and close it on mobile. I am using a q-drawer component.

In it, I am using tabs to and tabs panel to organise content.

The number of tabs can exceed the width of the drawer: the behaviour I want to achieve is that a user can:

• scroll horizontally the tab bar
• scroll vertically the content in the tab panels
• optionally, if not conflicting on mobile, swipe the panel right to close the drawer

see the picture

My layout uses the props I see: https://quasar.dev/layout/drawer#Introduction and the examples I see for https://quasar.dev/vue-components/tabs

However, I cannot get the scrolling behaviour on tabs to work: if I swipe, the qDrawer will be closed as well. Any way to prevent it and get the desidered behaviour to work ?

 <q-drawer
      v-model="rightDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
      side="right"
      :width="550"

      no-swipe-close="true"  // this is not working on mobile android: I still can close the Drawer by swiping
    >

<q-tabs
          v-model="tab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator

          inline-label
          outside-arrows
          mobile-arrows // I cannot see any arrows displayed on mobile + if tabs are swiped, Drawer will be closed
        >

Please note that to find info on the qDrawer, I had to search in the documentation: I mean, there is no Drawer component nor 'Sidebar' listed in the Components sections differently than tabs, and it would be convenient to have it displayed on the main doc (without need to search for it).

[209]

Because we have class scroll

const PanelWrapper = {
  setup (_, { slots }) {
    return () => h('div', {
      class: 'q-panel scroll',
      role: 'tabpanel'
    }, hSlot(slots.default))
  }

And

        h('div', {
          class: 'q-panel scroll',
          style: transitionStyle.value,
          key: contentKey.value,
          role: 'tabpanel'
        }, [ panel ])
      ]

in https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private/use-panel.js