fix: use overflow-auto (#6295)

* fix: use overflow-auto

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: scroll issues with too many filters

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: merge conflict

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
pull/6317/head^2
Udit Takkar 2023-01-07 15:30:11 +05:30 committed by GitHub
parent a28ac3634d
commit c214e01f03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 3 deletions

View File

@ -29,7 +29,7 @@ const filters: Filter[] = [
export function FiltersContainer() {
return (
<div className="flex w-full space-x-2 overflow-x-scroll rtl:space-x-reverse lg:justify-end ">
<div className="flex w-full space-x-2 rtl:space-x-reverse">
{filters.map((filter) => {
if (!filter.showByDefault) {
// TODO: check if any of the controllingQueryParams are present in the query params and show the filter if so

View File

@ -35,9 +35,11 @@ export default function BookingLayout({
return (
<Shell {...rest}>
<div className="flex max-w-6xl flex-col">
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col gap-2 lg:flex-row">
<HorizontalTabs tabs={tabs} />
<FiltersContainer />
<div className="overflow-x-auto lg:ml-auto">
<FiltersContainer />
</div>
</div>
<main className="w-full max-w-6xl">{children}</main>
</div>