Data Table causing overflow scrolling layout on Desktop and a Resized UI on Mobile

[MCole-K9]

I have a pretty normal datatable in the dashboard-2 layout block.

Yet:

<div class="rounded-md border">
	<Table.Root {...$tableAttrs} >
		<Table.Header>
			{#each $headerRows as headerRow}
				<Subscribe rowAttrs={headerRow.attrs()}>
					<Table.Row>
						{#each headerRow.cells as cell (cell.id)}
							<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()}>
								<Table.Head {...attrs}>
									<Render of={cell.render()} />
								</Table.Head>
							</Subscribe>
						{/each}
					</Table.Row>
				</Subscribe>
			{/each}
		</Table.Header>
		<Table.Body {...$tableBodyAttrs}>
			{#each $pageRows as row (row.id)}
				<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
					<Table.Row {...rowAttrs}>
						{#each row.cells as cell (cell.id)}
							<Subscribe attrs={cell.attrs()} let:attrs>
								<Table.Cell {...attrs}>
									<Render of={cell.render()} />
								</Table.Cell>
							</Subscribe>
						{/each}
					</Table.Row>
					{#if $expandedRequestItem === row.original.id}
						<Table.Row>
							<Table.Cell colspan={columns.length}>
								<!-- this does exists. configured with table options -->
								 <!-- <div transition:slide> -->
									<RequestItemDataTable items={getItems(row.original.id)} />

								 <!-- </div> -->
							</Table.Cell>
						</Table.Row>
					{/if}
				</Subscribe>
			{:else}
				<Table.Row>
					<Table.Cell colspan={columns.length}>
						<p class="text-center capitalize font-semibold">
							You Have No Requests. <br /> Add New Request started
						</p>
					</Table.Cell>
				</Table.Row>
			{/each}
		</Table.Body>
	</Table.Root>
</div>

[MCole-K9]

Modified the content area with the highlighted.