Q-Select with autocomplete and use-input adds a weird spacing when selected text is too long

[franciskisiara]

I have a beefy q-select that I use with autocomplete to query the backend. Works well.

However, once the select item is placed inside the input, there is some weird spacing that appears at the bottom that I believe is due to the input. This breaks my design since the element then grows downwards for more space.

I would rather the text gets truncated with an ellipsis. I have tried a custom slot for the selected-item but the result was the same no matter how small I made my width.

How do I get rid of that little space at the bottom

This is my q-select

<q-select
    v-model="modelValue"
    :clearable="props.clearable"
    :disable="props.disable"
    :error="!!props.errorMessage"
    :error-message="props.errorMessage"
    :hide-bottom-space="Boolean(props.hint) || Boolean(props.errorMessage)"
    :multiple="props.multiple"
    :options="options"
    :use-chips="props.multiple"
    behavior="menu"
    bottom-slots
    clear-icon="mdi-close"
    class="text-caption"
    dense
    emit-value
    hide-dropdown-icon
    :hint="props.hint"
    input-debounce="700"
    map-options
    no-error-icon
    outlined
    popup-content-class="select-popup"
    use-input
    @input-value="inputFetch"
    @popup-show="popupFetch()"
>
    <template v-slot:append>
        <q-icon name="mdi-magnify" @click.stop.prevent/>
    </template>

    <template v-slot:no-option>
        <q-item>
            <q-item-section class="text-grey">
                {{ fetching ? 'Loading ...' : 'No results' }}
            </q-item-section>
        </q-item>
    </template>

    <template v-slot:option="scope">
        <q-item v-bind="scope.itemProps">
            <q-item-section
                v-if="scope.opt.avatar"
                avatar
            >
                <q-avatar square size="md">
                    <q-img
                        :src="scope.opt.avatar"
                    />
                </q-avatar>
            </q-item-section>

            <q-item-section>
                <q-item-label lines="2" class="text-caption" style="letter-spacing: 0;">
                    {{ scope.opt.label }}
                </q-item-label>

                <q-item-label caption v-if="scope.opt.caption">
                    {{ scope.opt.caption }}
                </q-item-label>
            </q-item-section>
        </q-item>

        <q-separator inset></q-separator>
    </template>
</q-select>