From c7d0d8ffd8dee1741621c2aa845d3348f75fdaf9 Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Sun, 21 Apr 2024 10:57:51 -0500
Subject: [PATCH] Fix modlog tap effect

---
 src/features/moderation/logs/ModlogItem.tsx     |  5 ++++-
 .../moderation/logs/ModlogItemMoreActions.tsx   | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/features/moderation/logs/ModlogItem.tsx b/src/features/moderation/logs/ModlogItem.tsx
index 1661276907..97900fb404 100644
--- a/src/features/moderation/logs/ModlogItem.tsx
+++ b/src/features/moderation/logs/ModlogItem.tsx
@@ -28,6 +28,8 @@ import {
 import useIsAdmin from "../useIsAdmin";
 import { timerOutline } from "ionicons/icons";
 import { styled } from "@linaria/react";
+import { cx } from "@linaria/core";
+import { isTouchDevice } from "../../../helpers/device";
 
 const Container = styled.div`
   display: flex;
@@ -184,7 +186,8 @@ export function ModlogItem({ item }: ModLogItemProps) {
 
   return (
     <IonItem
-      className={maxWidthCss}
+      mode="ios" // Use iOS style activatable tap highlight
+      className={cx(isTouchDevice() && "ion-activatable", maxWidthCss)}
       href={undefined}
       routerLink={link ? buildGeneralBrowseLink(link) : undefined}
       detail={false}
diff --git a/src/features/moderation/logs/ModlogItemMoreActions.tsx b/src/features/moderation/logs/ModlogItemMoreActions.tsx
index 62a0078559..1ae714306d 100644
--- a/src/features/moderation/logs/ModlogItemMoreActions.tsx
+++ b/src/features/moderation/logs/ModlogItemMoreActions.tsx
@@ -10,6 +10,7 @@ import { ModlogItemType } from "../../../routes/pages/shared/ModlogPage";
 import { getHandle } from "../../../helpers/lemmy";
 import useAppNavigation from "../../../helpers/useAppNavigation";
 import { ModeratorRole, getModIcon } from "../useCanModerate";
+import { PlainButton } from "../../shared/PlainButton";
 
 const EllipsisIcon = styled(IonIcon)`
   font-size: 1.2rem;
@@ -81,12 +82,14 @@ export default function ModlogItemMoreActions({
   }
 
   return (
-    <EllipsisIcon
-      icon={ellipsisHorizontal}
-      onClick={(e) => {
-        e.stopPropagation();
-        presentMoreActions();
-      }}
-    />
+    <PlainButton>
+      <EllipsisIcon
+        icon={ellipsisHorizontal}
+        onClick={(e) => {
+          e.stopPropagation();
+          presentMoreActions();
+        }}
+      />
+    </PlainButton>
   );
 }