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
parent
a28ac3634d
commit
c214e01f03
|
@ -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
|
||||
|
|
|
@ -35,10 +35,12 @@ 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} />
|
||||
<div className="overflow-x-auto lg:ml-auto">
|
||||
<FiltersContainer />
|
||||
</div>
|
||||
</div>
|
||||
<main className="w-full max-w-6xl">{children}</main>
|
||||
</div>
|
||||
</Shell>
|
||||
|
|
Loading…
Reference in New Issue