filepond--list-scroller overlays other elements [Bug]

[nightspite]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

The bug that I have found is causing all elements below the dropzone to not be clickable.
It's caused by one of 2 things: either z-indexes or the way of positioning the elements needs to be changed.

.filepond--list-scroller has a height of 100% (so it inherits from the parent -> 76px) & it's translated by 76px, so it looks like on the screenshot below. Because of that the z-indexes on child elements are not playing along with the other elements on the page.

A simple solution, that I'm currently using is changing position: absolute & transform: translate3d() to just flex layout.

.filepond--root {
  display: flex !important;
  flex-direction: column !important;
}

.filepond--drop-label {
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
}

.filepond--list-scroller {
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
  height: auto !important;
  flex: 1 !important;
}

Reproduction

I am using the React library, but the problem refers to styling, so I though creating the issue in the main repo is the way.
But the setup using React looks like that:

'use client';

import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
import './upload-dropzone.css';
import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import { useRef } from 'react';
import { useCreateUpload } from '@/api/upload';

// filepond plugins
registerPlugin(
  FilePondPluginFileValidateType,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginFilePoster,
);

interface UploadDropzoneProps {
  teamId?: string;
}

export const UploadDropzone = ({ teamId }: UploadDropzoneProps) => {
  const { mutateAsync: createUpload } = useCreateUpload();
  const ref = useRef<FilePond>(null);

  return (
    <FilePond
      acceptedFileTypes={[
        'image/png',
        'image/jpeg',
        'image/gif',
        'video/mp4',
        'video/mov',
      ]}
      allowFilePoster
      // allowImageCrop
      // allowImageResize
      // allowImageTransform
      allowMultiple
      credits={false}
      disabled={!teamId}
      labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      maxFiles={10}
      name="files"
      // onprocessfile={(error, file) => {
      //   if (!error && file && ref.current) {
      //     ref.current?.removeFile(file);
      //   }
      // }}
      ref={ref}
      server={{
        process: async (
          _fieldName,
          file,
          _metadata,
          load,
          error,
          _progress,
          _abort,
        ) => {
          try {
            if (!teamId) {
              throw new Error('No team selected');
            }
            const formData = new FormData();

            formData.append('teamId', teamId);
            formData.append('file', file);

            await createUpload({
              body: formData,
            });
            load('done');
          } catch (e) {
            error('Error uploading file');
          }
        },
      }}
      stylePanelLayout="compact"
    />
  );
};

Environment

- Device: Macbook Pro M1 Max
- OS: MacOS Ventura 13.4.1 (22F82)
- Browser: Arc Version 1.25.1 (45028)

Npm packages
- "react": "18.2.0",
- "react-dom": "18.2.0",
- "react-filepond": "^7.1.2",
- "filepond-plugin-file-poster": "^2.5.1",
- "filepond-plugin-file-validate-type": "^1.2.8",
- "filepond-plugin-image-crop": "^2.0.6",
- "filepond-plugin-image-edit": "^1.6.3",
- "filepond-plugin-image-exif-orientation": "^1.0.11",
- "filepond-plugin-image-preview": "^4.6.12",
- "filepond-plugin-image-resize": "^2.0.10",
- "filepond-plugin-image-transform": "^3.8.7",

[KrunchMuffin]

@nightspite This is great. Thanks! Flex is the way to go.