ModernTaxonomyPicker: Style problem - term list overflows panel footer

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.19.0]

Expected / Desired Behavior / Question

The buttons in the footer of the picker panel should be not "above" the term list. There should be a clear separation.

Observed Behavior

In a long list, the individual elements are located below the button bar.

Steps to Reproduce

Create a blank SPFx Solution (v1.19.0), add this package, add basic ModernTaxonomyPicker somewhere in the tsx component (example code below). Add valid termSetId for a larger term set. Serve the webpart (via gulp serve), include on SharePoint page and open the "add term panel" of the picker.

For example

import * as React from 'react';
import type { ISimpleMtpSampleProps } from './ISimpleMtpSampleProps';
import { ModernTaxonomyPicker } from '@pnp/spfx-controls-react/lib/ModernTaxonomyPicker';

export default class SimpleMtpSample extends React.Component<ISimpleMtpSampleProps, {}> {
  public render(): React.ReactElement<ISimpleMtpSampleProps> {
    const {
      termId, context
    } = this.props;

    return (
      <section>
        <ModernTaxonomyPicker allowMultipleSelections={true}
                    termSetId={termId}
                    panelTitle="Select a term"
                    label={"Test"}
                    context={context as any}
                />
      </section>
    );
  }
}

Start with the ModernTaxonomyPicker entry point and reproduce the issue using the provided TypeScript sample with a large term set, then serve the SPFx solution with gulp serve. Verify the panel's footer remains separated from the term list when the list is long.