Quasar q-drawer behaves inconsistently

Question

I've had to switch from Vue.js 2 with Vuetify to Vue.js 3 with Quasar (as Vuetify does not support Vue.js 3 officially yet). I am using q-drawer and its mini property , where I can switch between the mini state and the normal expanded state by clicking a button. I have two problems here:

1. When I'm starting in the mini state, expanding and returning back to mini state changes the layout in the q-drawer , so a horizontal scrollbar is shown, even though there is none at the beginning. An illustration of this behaviour can be seen in the following pictures:

   No horizontal scrollbar before the first expansion:

   A horizontal scrollbar after expanding and switching to mini again

   I tried using the the q-mini-drawer-hide class on the q-item-section that should not be visible when in the mini mode, however, the content still has a different width after expanding and minifying again than it had before.

   Question:

   Is there a way to prevent showing this horizontal scrollbar, while also leaving the functionality of the q-scroll-area for vertical scrolling? Do I have something wrong in the code, which makes the content behave in an unexpected way?

2. My second problem is with the behavior of long texts in the q-drawer . When I reload the page with the drawer in its expanded state, the long text is broken into two or more lines. This is a desired behaviour. However, once I minify and expand it again, the text is no longer on multiple lines, but on a single line going outside the width of the q-drawer , which has a set width. Illustrations following:

   Long text on multiple lines when reloading with expanded q-drawer

   After minifying and expanding the q-drawer , the long text is on a single line going outside of the q-drawer component set width

   Question:

   How to tell the q-drawer component (or some child component) to always break the text into multiple lines? Or to use ellipsis on the text?

The example code to reproduce the problem:

<template>
  <q-layout view="hHh Lpr fff">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar class="bg-black">
        <q-btn flat @click="toggleSidebar" round dense icon="mdi-menu" />
        <q-toolbar-title>
          A title
        </q-toolbar-title>
        <q-space></q-space>
        <q-btn flat round dense icon="mdi-dots-vertical"></q-btn>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="sidebar_open" side="left" elevated
      :mini="!sidebar_expanded"
      bordered
      :width="240"
      class="bg-grey-3">
      <q-scroll-area class="fit">
        <q-list>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-view-dashboard" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some text</q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-cube" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some other text</q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-clipboard-text" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some other other text</q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-cog" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some very very very very long text that should break</q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({

  setup() {
    //------------------------------------------------------------------------------------------------------------------
    // Basic setup
    //------------------------------------------------------------------------------------------------------------------
    const $store = useStore()

    const sidebar_open = ref(true)

    //------------------------------------------------------------------------------------------------------------------
    // Sidebar expansion functionality
    //------------------------------------------------------------------------------------------------------------------
    /**
     * The expansion state of the sidebar (true = expanded, false = mini)
     */
    const sidebar_expanded = computed({
      // For some reason, this needs to use the name of the store ('global' in this case) even with the namespacing disabled
      get() { return $store.state.global.sidebar_expanded },
      /** @param { boolean } value */
      set(value) { $store.dispatch('changeSidebarState', { expanded: value }) }
    })

    /**
     * Sets the sidebar expansion state to mini
     */
    const collapseSidebar = () => {
      sidebar_expanded.value = false
    }

    /**
     * Sets the sidebar expansion state to expanded
     */
    const expandSidebar = () => {
      sidebar_expanded.value = true
    }

    /**
     * Toggles the sidebar expansion state
     */
    const toggleSidebar = () => {
      if (sidebar_expanded.value) {
        collapseSidebar()
      } else {
        expandSidebar()
      }
    }

    return {
      sidebar_open,

      // Sidebar expansion functionality
      sidebar_expanded,
      toggleSidebar,
    }
  }
})
</script>

<style scoped>

</style>

Note: I am using mdi-v5 icons, as the default material-design Quasar icons behaved strangely.

Answer 1

This issue can be fix with css to force break lines

.q-item__section  { white-space: break-spaces; }

or otherwise to keep one line

.q-item__section  { white-space: nowrap; }