fix: style change for filters in mobile
parent
650b14f9e0
commit
3c0c29b034
|
@ -141,13 +141,11 @@ export default function Bookings() {
|
|||
return (
|
||||
<ShellMain hideHeadingOnMobile heading={t("bookings")} subtitle={t("bookings_description")}>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-col flex-wrap lg:flex-row">
|
||||
<div className="flex flex-row flex-wrap items-center justify-between">
|
||||
<HorizontalTabs tabs={tabs} />
|
||||
<div className="max-w-full overflow-x-auto xl:ml-auto">
|
||||
<FilterToggleCta />
|
||||
</div>
|
||||
<FilterToggleCta />
|
||||
<FiltersContainer />
|
||||
</div>
|
||||
<FiltersContainer />
|
||||
<main className="w-full">
|
||||
<div className="flex w-full flex-col" ref={animationParentRef}>
|
||||
{query.status === "error" && (
|
||||
|
|
|
@ -85,7 +85,7 @@ export function FiltersContainer() {
|
|||
const isFiltersVisible = useBookingMultiFilterStore((state) => state.isFiltersVisible, shallow);
|
||||
|
||||
return isFiltersVisible ? (
|
||||
<div className="flex w-full space-x-2 rtl:space-x-reverse">
|
||||
<div className="no-scrollbar flex w-full space-x-2 overflow-x-scroll rtl:space-x-reverse">
|
||||
<PeopleFilter />
|
||||
<EventTypeFilter />
|
||||
<TeamsFilter />
|
||||
|
@ -106,7 +106,7 @@ export function FilterToggleCta() {
|
|||
return (
|
||||
<button
|
||||
onClick={toggleFiltersVisibility}
|
||||
className="hover:border-emphasis border-default text-default hover:text-emphasis flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
|
||||
className="hover:border-emphasis border-default text-default hover:text-emphasis mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
|
||||
<Filter className="h-4 w-4" />
|
||||
<Tooltip content={t("filters")}>
|
||||
<div className="mx-2">{t("filters")}</div>
|
||||
|
|
Loading…
Reference in New Issue