Issue with format and size selection drop downs on PrimeNG p-editor toolbar

Question

I am using PrimeNg 8.1.1 with Angular 8.2.5 and quill 1.3.7. I have an issue when adding a size menu to the editor header toolbar. The selected menu item becomes hidden behind a dropdown indicator instead of being aligned to the right side of the menu item as shown in the image.

I have tried configuring the header for the editor as shown here but I still get the issue.

                                        <p-header>
                                          <select class="ql-size">
                                            <option value="small">Tiny</option>
                                            <option selected></option>
                                            <option value="large">Subheading</option>
                                            <option value="huge">Heading</option>
                                          </select>                                           
                                        <span class="ql-formats">
                                          <button class="ql-bold" aria-label="Bold"></button>
                                          <button class="ql-italic" aria-label="Italic"></button>
                                          <button class="ql-underline" aria-label="Underline"></button>
                                          <button class="ql-strike" aria-label="Strike"></button>
                                        </span>
                                        <span class="ql-formats">
                                          <select title="Text Color" class="ql-color" defaultValue="rgb(0, 0, 0)">
                                            <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
                                            ...
                                            <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
                                          </select>
                                          <span class="ql-format-separator"></span>
                                          <select title="Background Color" class="ql-background" defaultValue="rgb(255, 255, 255)">
                                            <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
                                            ...
                                            <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
                                          </select>
                                      </span>
                                        <span class="ql-formats">
                                          <button class="ql-list" title="List"></button>
                                          <button class="ql-bullet" title="Bullet"></button>
                                          <select title="Text Alignment" class="ql-align" >
                                            <option selected>Left</option>
                                            <option value="center" label="Center"></option>
                                            <option value="right" label="Right"></option>
                                            <option value="justify" label="Justify"></option>
                                          </select>            
                                        </span> 
                                        <span class="ql-formats">
                                          <button aria-label="Link" class="ql-link"></button>
                                          <button aria-label="Image" class="ql-image"></button>
                                          <select title="Font Family"class="ql-font">
                                            <option selected></option>
                                            <option value="serif">Serif</option>
                                            <option value="monospace">Monospace</option>
                                           </select>
                                        </span>
                                      </p-header>  

Answer 1

mine works fine with the code below

 <p-header>
                                <span class="ql-formats">
                                    <select class="ql-header" defaultValue="0">
                                        <option value="1">Heading</option>
                                        <option value="2">Subheading</option>
                                        <option value="0">Normal</option>
                                    </select>
                                    <select class="ql-font">
                                        <option></option>
                                        <option value="serif"></option>
                                        <option value="monospace"></option>
                                    </select>
                                </span>
                                <span class="ql-formats">
                                    <button class="ql-bold" type="button"></button>
                                    <button class="ql-italic" type="button"></button>
                                    <button class="ql-underline" type="button"></button>
                                </span>
                                <span class="ql-formats">
                                    <select class="ql-color"></select>
                                    <select class="ql-background"></select>
                                </span>
                                <span class="ql-formats">
                                    <button
                                        class="ql-list"
                                        value="ordered"
                                        type="button"
                                    ></button>
                                    <button
                                        class="ql-list"
                                        value="bullet"
                                        type="button"
                                    ></button>
                                    <select class="ql-align">
                                        <option defaultValue></option>
                                        <option value="center"></option>
                                        <option value="right"></option>
                                        <option value="justify"></option>
                                    </select>
                                </span>
                                <span class="ql-formats">
                                    <button class="ql-link" type="button"></button>
                                    <button class="ql-code-block" type="button"></button>
                                    <button class="ql-clean" type="button"></button>
                                </span>
                            <p-header>