maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed horizontal nav on mobile, hiding scrollbar (#4176) 

Co-authored-by: Alex van Andel <me@alexvanandel.com>
This commit is contained in:
Peer Richelsen 2022-09-05 16:50:26 +02:00 committed by GitHub
parent c610c73378
commit d0aaa4d83b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
View File

@ -245,7 +245,7 @@ function EventTypeSingleLayout({
<div className="hidden xl:block">
<VerticalTabs tabs={EventTypeTabs} sticky />
</div>
<div className="p-2 md:p-0 xl:hidden">
<div className="relative left-0 right-0 -mx-6 w-[calc(100%+40px)] p-2 md:mx-0 md:p-0 xl:hidden">
<HorizontalTabs tabs={EventTypeTabs} />
</div>
<div className="w-full ltr:mr-2 rtl:ml-2">

5
packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
View File

@ -9,7 +9,10 @@ export interface NavTabProps {
const HorizontalTabs: FC<NavTabProps> = ({ tabs, ...props }) => {
return (
<>
<nav className="flex space-x-1 overflow-scroll md:overflow-visible" aria-label="Tabs" {...props}>
<nav
className="no-scrollbar flex space-x-1 overflow-scroll px-6 md:overflow-visible md:px-0"
aria-label="Tabs"
{...props}>
{tabs.map((tab, idx) => (
<HorizontalTabItem {...tab} key={idx} />
))}