(impact: low) Annoying horizontal scrollbar on vcd-datagrid with details pane

[georgiatanasov147]

Prerequisites

• Are you running the latest version? OR Are you submitting a bug for a prior version?
• Did you perform a basic issue search?

Description

The vcd-datagrid component with a details pane has an annoying horizontal scrollbar which hides content and the last column filter.

Impact

It decreases usability and user experience. The user needs to always scroll to the right to use the potential filter or see the full information in the cell.

Steps to Reproduce

1. Create a simple vcd-datagrid with a details pane
2. Observe scrollbar

Expected behavior:
No scrollbar should be shown and all columns and filters should be visible.

Actual behavior:
A horizontall scrollbar is shown above the footer and the last column filter is hidden until the user scrolls to the right.

Versions

OS: Windows
Browser: Chrome, Edge
Note: Does not reproduce in Firefox!

Stackblitz

https://stackblitz.com/edit/angular-rfntwp-qbpvu9?file=src/app/datagrid-detail-pane.example.component.ts