Having made the transition from Vue.js 2 with Vuetify to Vue.js 3 with Quasar due to Vuetify not officially supporting Vue.js 3 yet, I am utilizing q-drawer and its mini property. This allows me to toggle between the mini state and the normal expanded state by clicking a button. However, I am encountering two issues:

1. Starting in the mini state, expanding and returning back to the mini state causes the layout inside the q-drawer to change, resulting in a horizontal scrollbar being displayed even though there wasn't one initially. You can see an illustration of this behavior in the images below:

   No horizontal scrollbar prior to the first expansion: https://i.sstatic.net/eNN8p.png

   A horizontal scrollbar appears after expanding and switching back to the mini state: https://i.sstatic.net/4zBtH.png

   I attempted using the q-mini-drawer-hide class on the q-item-section intended to not be visible in the mini mode, but the content still ends up with a different width after expanding and minimizing again compared to the original width.

   Question:

   Is there a way to prevent the horizontal scrollbar from appearing while retaining the vertical scrolling functionality provided by q-scroll-area? Could there be an issue in my code that is causing the content to behave unexpectedly?

2. The second issue pertains to the behavior of long texts within the q-drawer. Upon reloading the page with the drawer in its expanded state, the long text breaks into multiple lines, which is the desired outcome. However, when I minimize and expand the drawer again, the text reverts to a single line extending beyond the width of the q-drawer, despite the set width. The illustrations below demonstrate this:

   Long text displayed across multiple lines upon reloading with an expanded q-drawer: https://i.sstatic.net/Egke9.png

   After minifying and then expanding the q-drawer, the long text returns to a single line exceeding the set width of the component: https://i.sstatic.net/iarAC.png

   Question:

   How can I instruct the q-drawer component or a child component to consistently break the text into multiple lines? Or apply ellipsis to the text?

Sample code for replicating the issue:

<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 have opted for the mdi-v5 icons as the default Quasar icons were exhibiting abnormal behavior.