fixed profilemore expansion on mobile display

components/ProfileMore.tsx

@@ -5,19 +5,13 @@ import { MoreSection, PROFILE } from "@/data/content";
 import { useFullBleed, usePrefersReducedMotion } from "@/hooks/useAnimations";
 import "@/styles/more-section.css";
 
-/**
- * Publishes the threshold rule's distance from the top of the document as
- * `--threshold-y`, which the root background gradient reads to tint everything
- * below it. Keeping this on the background instead of in an element means it
- * covers the rest of the page without adding to the scrollable area.
- */
 function useThresholdTint(ref: React.RefObject<HTMLElement | null>) {
+
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
 
     const root = document.documentElement;
-
     const publish = () => {
       const rect = el.getBoundingClientRect();
       // The rule sits at the element's vertical centre.
@@ -49,16 +43,14 @@ export default function ProfileMore() {
   const { ref: bleedRef, style: bleedStyle } = useFullBleed<HTMLDivElement>();
   useThresholdTint(bleedRef);
 
-  // Sections before `moreSectionsStart` are always visible; the rest are the
-  // payload that lives below the threshold.
   const start = PROFILE.moreSectionsStart ?? 0;
   const above = PROFILE.moreSections.slice(0, start);
   const below = PROFILE.moreSections.slice(start);
 
-  // Crossing the line opens it. The reveal then latches -- crossing back up
-  // leaves it open, so a stray hover never yanks content out from under someone
-  // mid-read. Collapsing is deliberate only: a click on the label.
-  const cross = useCallback(() => {
+  const cross = useCallback((e: any) => {
+    if(e.pointerType=='touch'){
+      return;
+    }
     setArmed(true);
     setOpen(true);
   }, []);
@@ -87,11 +79,7 @@ export default function ProfileMore() {
       {/* The threshold. The rule sits at this box's vertical centre, and the
           rule and glow bleed to the viewport edges via the measured offset.
           Entering the band at all is what counts as crossing it. */}
-      <div
-        ref={bleedRef}
-        style={{ ...bleedStyle, position: "relative" }}
-        onMouseEnter={cross}
-      >
+      <div ref={bleedRef} style={{ ...bleedStyle, position: "relative" }} onPointerEnter={cross}>
         <button
           type="button"
           className="threshold"
@@ -101,7 +89,8 @@ export default function ProfileMore() {
           aria-controls="profile-more-reveal"
           onFocus={() => setArmed(true)}
           onBlur={() => setArmed(open)}
-          onClick={toggle}
+          onClick={() => toggle()}
+    
         >
           <span className="threshold-glow" aria-hidden="true" />
           <span className="threshold-rule" aria-hidden="true" />