From 62ce637e6368524442ac0def4d3d4cc38d6a6f89 Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Sun, 12 Jul 2026 17:59:07 -0400
Subject: [PATCH 1/5] Create usePointerType hook

---
 frontend/src/lib/hooks/use-pointer-type.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 frontend/src/lib/hooks/use-pointer-type.ts

diff --git a/frontend/src/lib/hooks/use-pointer-type.ts b/frontend/src/lib/hooks/use-pointer-type.ts
new file mode 100644
index 00000000..96bb745d
--- /dev/null
+++ b/frontend/src/lib/hooks/use-pointer-type.ts
@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type PointerType = "coarse" | "fine";
+
+export default function usePointerType() {
+  const [pointerType, setPointerType] = useState<PointerType>();
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(pointer: coarse)");
+    setPointerType(mediaQuery.matches ? "coarse" : "fine");
+
+    const listener = (e: MediaQueryListEvent) =>
+      setPointerType(e.matches ? "coarse" : "fine");
+    mediaQuery.addEventListener("change", listener);
+    return () => mediaQuery.removeEventListener("change", listener);
+  }, []);
+
+  return pointerType;
+}

From ff05d4b870523961419c3459f5593bc2a6de1e6a Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Sun, 12 Jul 2026 20:52:55 -0400
Subject: [PATCH 2/5] Add initial null type to pointer type

---
 frontend/src/lib/hooks/use-pointer-type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/hooks/use-pointer-type.ts b/frontend/src/lib/hooks/use-pointer-type.ts
index 96bb745d..fb6993c2 100644
--- a/frontend/src/lib/hooks/use-pointer-type.ts
+++ b/frontend/src/lib/hooks/use-pointer-type.ts
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 type PointerType = "coarse" | "fine";
 
 export default function usePointerType() {
-  const [pointerType, setPointerType] = useState<PointerType>();
+  const [pointerType, setPointerType] = useState<PointerType | null>(null);
   useEffect(() => {
     const mediaQuery = window.matchMedia("(pointer: coarse)");
     setPointerType(mediaQuery.matches ? "coarse" : "fine");

From 3a9b9c23b58f9130d810cc1e5e9f4c4536acbc44 Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Sun, 12 Jul 2026 20:53:24 -0400
Subject: [PATCH 3/5] Add pointer type hook to info point

---
 frontend/src/components/info-point.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/info-point.tsx b/frontend/src/components/info-point.tsx
index 7e0ccf0c..c8396992 100644
--- a/frontend/src/components/info-point.tsx
+++ b/frontend/src/components/info-point.tsx
@@ -1,9 +1,10 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { CircleQuestionMarkIcon } from "lucide-react";
 
 import { FloatingDrawer } from "@/features/drawer";
 import Tooltip, { TooltipSide } from "@/features/system-feedback/tooltip/base";
+import usePointerType from "@/lib/hooks/use-pointer-type";
 
 type InfoPointProps = {
   /**
@@ -44,21 +45,13 @@ export default function InfoPoint({
   className,
 }: InfoPointProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [isTouchDevice, setIsTouchDevice] = useState(false);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(pointer: coarse)");
-    setIsTouchDevice(mediaQuery.matches);
-
-    const listener = (e: MediaQueryListEvent) => setIsTouchDevice(e.matches);
-    mediaQuery.addEventListener("change", listener);
-    return () => mediaQuery.removeEventListener("change", listener);
-  }, []);
+  const pointerType = usePointerType();
 
   return (
     <>
       <Tooltip side={tooltipSide} content={tooltipContent}>
         <button
-          onClick={() => setDrawerOpen(isTouchDevice)}
+          onClick={() => setDrawerOpen(pointerType === "coarse")}
           aria-label={description}
         >
           <CircleQuestionMarkIcon className={className} />

From a8aa71a5ebcf787a92ccfc6e5237a191e4617f62 Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Sun, 12 Jul 2026 20:57:55 -0400
Subject: [PATCH 4/5] Add pointer-type-aware panel header text

---
 .../features/event/results/attendees/panel-header.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/event/results/attendees/panel-header.tsx b/frontend/src/features/event/results/attendees/panel-header.tsx
index 5eece13d..8605410e 100644
--- a/frontend/src/features/event/results/attendees/panel-header.tsx
+++ b/frontend/src/features/event/results/attendees/panel-header.tsx
@@ -5,6 +5,7 @@ import { CheckIcon, DoorOpenIcon, EraserIcon, Undo2Icon } from "lucide-react";
 
 import ActionButton from "@/features/button/components/action";
 import { useResultsContext } from "@/features/event/results/context";
+import usePointerType from "@/lib/hooks/use-pointer-type";
 import { cn } from "@/lib/utils/classname";
 
 type PanelHeaderProps = {
@@ -47,6 +48,8 @@ export default function PanelHeader({
     currentUser &&
     participants.some((p) => p.display_name === currentUser);
 
+  const pointerType = usePointerType();
+
   const formatHoveredSlot = () => {
     const date = new Date(hoveredSlot!);
 
@@ -125,9 +128,13 @@ export default function PanelHeader({
         {gridNumParticipants > 0 && (
           <span className="text-sm opacity-75">
             {isRemoving
-              ? `Select to remove`
+              ? pointerType === "coarse"
+                ? "Tap to remove"
+                : "Click to remove"
               : hoveredSlot === null
-                ? "Hover grid for availability"
+                ? pointerType === "coarse"
+                  ? "Tap grid for availability"
+                  : "Hover grid for availability"
                 : formatHoveredSlot()}
           </span>
         )}

From dc1611908e1a597824b917247eba71c83675afd8 Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Sun, 12 Jul 2026 21:03:38 -0400
Subject: [PATCH 5/5] Add null type comment

---
 frontend/src/lib/hooks/use-pointer-type.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/lib/hooks/use-pointer-type.ts b/frontend/src/lib/hooks/use-pointer-type.ts
index fb6993c2..0030b71d 100644
--- a/frontend/src/lib/hooks/use-pointer-type.ts
+++ b/frontend/src/lib/hooks/use-pointer-type.ts
@@ -5,6 +5,10 @@ import { useEffect, useState } from "react";
 type PointerType = "coarse" | "fine";
 
 export default function usePointerType() {
+  /**
+   * This initial null state is used to give the option to render a fallback/placeholder
+   * before the actual pointer type is determined.
+   */
   const [pointerType, setPointerType] = useState<PointerType | null>(null);
   useEffect(() => {
     const mediaQuery = window.matchMedia("(pointer: coarse)");