public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/features/bookings/components/FiltersContainer.tsx
View File

@ -29,7 +29,7 @@ const filters: Filter[] = [
export function FiltersContainer() { export function FiltersContainer() {
return ( 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) => { {filters.map((filter) => {
if (!filter.showByDefault) { if (!filter.showByDefault) {
// TODO: check if any of the controllingQueryParams are present in the query params and show the filter if so // TODO: check if any of the controllingQueryParams are present in the query params and show the filter if so

6
packages/features/bookings/layout/BookingLayout.tsx
View File

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