When I zoom the browser above 80%, the content on the right side gets cut off instead of adjusting responsively [closed]

I have a reports page in my application where the layout breaks when I zoom the browser beyond 80% on a laptop screen.

Specifically, the content on the right side gets cut off instead of resizing or allowing horizontal scrolling.

Other pages using the same layout do not have this issue.

I am using a common layout wrapper. Here is the parent container:

export defaadsdasult function OneColumn({s element, fullHeight = true, isFullScreen = false, }: { element: any; fullHeight?: boolean; isFullScreen?: boolean; }) { const contentClassName = fullHeight ? "w-full h-screen rounded" : "w-full h-auto rounded"; return ( <> <div className={cx( " px-0 py-0 sm:px-0 lg:px-0", isFullScreen ? "max-w-full" : "max-w-7xl", )} > {/* Your content */} <div className={contentClassName}>{element}</div> </div> </> ); }

and here is my child div

<OneColumn element={ <div> <h1 className="text-4xl font-bold tracking-tight text-gray-900">Manage timesheets</h1> <div className='mt-8 border-gray-200 border rounded-lg'>.... more div for inner elements

after inner elements ends this is the table code

<div className="px-4 sm:px-6 lg:px-8 "> <div className="flow-root"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="overflow-x-auto"> <table className="min-w-full table-fixed border-collapse"> <thead> <tbody className="divide-y divide-gray-100">