From b3700dc09e978a01681bb3fcca238d82a2e095db Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Thu, 27 Oct 2022 14:37:06 +0200
Subject: [PATCH] scrolling on mobile triggers a click outside

---
 commafeed-client/src/components/content/FeedEntryFooter.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/commafeed-client/src/components/content/FeedEntryFooter.tsx b/commafeed-client/src/components/content/FeedEntryFooter.tsx
index 3672c818..00bf1335 100644
--- a/commafeed-client/src/components/content/FeedEntryFooter.tsx
+++ b/commafeed-client/src/components/content/FeedEntryFooter.tsx
@@ -1,5 +1,6 @@
 import { t } from "@lingui/macro"
 import { Checkbox, Group, Indicator, MultiSelect, Popover } from "@mantine/core"
+import { useMediaQuery } from "@mantine/hooks"
 import { Constants } from "app/constants"
 import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries"
 import { useAppDispatch, useAppSelector } from "app/store"
@@ -17,6 +18,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
     const [scrollPosition, setScrollPosition] = useState(0)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const tags = useAppSelector(state => state.user.tags)
+    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint}px)`)
     const dispatch = useAppDispatch()
 
     const showSharingButtons =
@@ -60,7 +62,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 />
 
                 {showSharingButtons && (
-                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]}>
+                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
                         <Popover.Target>
                             <ActionButton icon={<TbShare size={18} />} label={t`Share`} />
                         </Popover.Target>
@@ -71,7 +73,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 )}
 
                 {tags && (
-                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]}>
+                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
                         <Popover.Target>
                             <Indicator label={props.entry.tags.length} showZero={false} dot={false} inline size={16}>
                                 <ActionButton icon={<TbTag size={18} />} label={t`Tags`} />