quick action combobox overflow

Question

I have a quick action that has two combobox and one textarea. The combobox opens behind the quick action footer. How can I handle this in LWC?

This is the HTML code:

<template>
    <lightning-quick-action-panel header="Parecer">
        <template if:true={firstModal}>
            <div class="page-section page-main">
                {description}
            </div>
            
            <div slot="footer">
                <lightning-button variant="neutral" label="Recusar" onclick={handleRecusar}></lightning-button>
                <lightning-button variant="brand" label="Aprovar" class="slds-m-right_x-small" onclick={handleAprovar}></lightning-button>
            </div>
        </template>
        
        <template if:true={secondModal}>
            <lightning-combobox name="progress" required label="Análise de prevenção" value={valuesAnalise} placeholder="Selecionar" options={optionsAnalise}
            onchange={handleChangeAnalise}></lightning-combobox>
            
            <lightning-combobox name="progress" required label="Contato" value={valuesContato} placeholder="Selecionar" options={optionsContato}
            onchange={handleChangeContato}></lightning-combobox>

            <lightning-textarea class="justificativa" name="justificativa" required value="" placeholder="Escreva sua Justificativa" label="Justificativa" maxlength="32000" message-when-too-long="O máximpo de caracteres foi atingido!" message-when-value-missing="Preencha a justificativa!" onblur={handleTextArea}></lightning-textarea>
            <div slot="footer">
                <lightning-button variant="neutral" label="Finalizar" onclick={handleFinalizar}></lightning-button>
            </div>
        </template>
    </lightning-quick-action-panel>
</template>

Answer 1

You may try adding this attribute to your lightning-combobox in HTML

dropdown-alignment="auto"

Reference: https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/specification