Div around a table with overflow-x-auto (bootstrap) but the whole page becomes scroll able

I'm using Blazor, where I have a Component to load a seperate Table (with options to search and use sorting). I have a div around my table with class overflow-x-auto, but it still makes the whole page go out of the screen.

I've also tried to set it via style="overflow:scroll;", I have tried it via a seperate class, but nothing seems to make it work.

I do see the css being applied in F12 developer tools.

I feel like im missing something. Can someone take a short look for me and see what im missing?

<div class="row mb-3"><!-- Search Box --><div class="col-lg-6 mb-1"><div class="input-group"><input type="text" class="form-control" placeholder="Search..." @bind="SearchTerm" @oninput="OnSearchInputChanged" /><span class="input-group-text"><i class="bi bi-search"></i></span></div></div><div class="col-lg-4"><select @bind="@SelectedPeriod" class="form-select"><option value="" disabled>Select a Period</option>            @foreach (var period in Periods)            {<option value="@period">@period</option>            }</select></div><div class="col-lg-2"><LoadingButton OnClick="async () => await RefreshReport()" InitialButtonText="Refresh" LoadingIcon="true" LoadingButtonText="Loading" w100="true" /></div></div><div class="row mb-3"><div class="col-lg-12 text-end"><LoadingButton OnClick="DownloadAsFile" InitialButtonText="Download" LoadingIcon="true" LoadingButtonText="Loading" ButtonStyle="btn-success" /></div></div>@if (FilteredData != null){<div class="row mt-3"><div class="col-lg-12 text-start"><span>@(FilteredData?.Count() ?? 0) @(FilteredData?.Count() == 1 ? "row found" : "rows found")</span></div></div>}<div class="table-responsive overflow-x-auto"><table class="table table-hover table-sm"><thead><tr>                @foreach (var header in ColumnHeaders)                {                    if (!ExcludedColumns.Contains(header))                    {<th class="sortable-header"><span style="display: inline-block;">@header</span><svg class="icon" width="16" height="16" style="display: inline-block;"><use href="#fluent--arrow-sort-24-regular"></use></svg></th>                    }                }</tr></thead><tbody>            @foreach (var row in FilteredData)            {<tr>                    @foreach (var header in ColumnHeaders)                    {                        if (!ExcludedColumns.Contains(header))                        {<td>@row[header]</td>                        }                    }</tr>            }</tbody></table></div>

EDIT: The table becomes scrollable as soon as a smaller screen is used.