Back button fix within wave and modal width full

components/brain/BrainMobile.tsx

@@ -162,47 +162,49 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
 
   // Handle tab visibility and reset on wave changes
   useEffect(() => {
+    const globalViews = new Set([
+      BrainView.DEFAULT,
+      BrainView.WAVES,
+      BrainView.MESSAGES,
+      BrainView.NOTIFICATIONS,
+    ]);
+
+    const routeToView: Record<string, BrainView> = {
+      "/waves": BrainView.WAVES,
+      "/messages": BrainView.MESSAGES,
+    };
+
     if (!hasWave) {
-      if (
-        activeView !== BrainView.DEFAULT &&
-        activeView !== BrainView.WAVES &&
-        activeView !== BrainView.MESSAGES &&
-        activeView !== BrainView.NOTIFICATIONS
-      )
-        setActiveView(BrainView.DEFAULT);
+      const isWaveSpecificView = !globalViews.has(activeView);
+      if (isWaveSpecificView) {
+        setActiveView(routeToView[pathname ?? ""] ?? BrainView.DEFAULT);
+      }
       return;
     }
 
     if (!wave) return;
 
-    const isInLeaderboardAndVotingHasEnded =
-      activeView === BrainView.LEADERBOARD && isCompleted;
-    const isInWinnersAndFirstDecisionHasntPassed =
-      activeView === BrainView.WINNERS && !firstDecisionDone;
-    const isInMyVotesAndIsNotMemeWave =
-      activeView === BrainView.MY_VOTES && !isMemesWave;
-    const isInFAQAndIsNotMemeWave =
-      activeView === BrainView.FAQ && !isMemesWave;
+    const shouldResetToDefault =
+      (activeView === BrainView.LEADERBOARD && isCompleted) ||
+      (activeView === BrainView.WINNERS && !firstDecisionDone) ||
+      (activeView === BrainView.MY_VOTES && !isMemesWave) ||
+      (activeView === BrainView.FAQ && !isMemesWave);
 
-    if (
-      isInLeaderboardAndVotingHasEnded ||
-      isInWinnersAndFirstDecisionHasntPassed ||
-      isInMyVotesAndIsNotMemeWave ||
-      isInFAQAndIsNotMemeWave
-    ) {
+    if (shouldResetToDefault) {
       setActiveView(BrainView.DEFAULT);
+      return;
     }
 
-    if (hasWave && waveId) {
-      if (
-        activeView === BrainView.NOTIFICATIONS ||
-        activeView === BrainView.MESSAGES ||
-        activeView === BrainView.WAVES
-      ) {
-        setActiveView(BrainView.DEFAULT);
-      }
+    const nonWaveViews = new Set([
+      BrainView.NOTIFICATIONS,
+      BrainView.MESSAGES,
+      BrainView.WAVES,
+    ]);
+
+    if (waveId && nonWaveViews.has(activeView)) {
+      setActiveView(BrainView.DEFAULT);
     }
-  }, [hasWave, wave, isCompleted, firstDecisionDone, activeView, isMemesWave, waveId]);
+  }, [hasWave, wave, isCompleted, firstDecisionDone, activeView, isMemesWave, waveId, pathname]);
 
   const closeCreateOverlay = useCallback(() => {
     const params = new URLSearchParams(searchParams?.toString() || "");

components/voting/VotingModal.tsx

@@ -1,5 +1,6 @@
 import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import React from "react";
+import { createPortal } from "react-dom";
 import SecondaryButton from "../utils/button/SecondaryButton";
 import { SingleWaveDropVote } from "../waves/drop/SingleWaveDropVote";
 import ModalLayout from "../waves/memes/submission/layout/ModalLayout";
@@ -19,7 +20,7 @@ const VotingModal: React.FC<VotingModalProps> = ({
     return null;
   }
 
-  return (
+  const modalContent = (
     <div
       className="tw-fixed tw-inset-0 tw-bg-gray-600 tw-bg-opacity-50 tw-backdrop-blur-[1px] tw-z-50 tw-flex tw-items-center tw-justify-center"
       onClick={(e) => e.stopPropagation()}
@@ -31,7 +32,7 @@ const VotingModal: React.FC<VotingModalProps> = ({
       ></div>
 
       <div
-        className="tw-w-full tw-max-w-2xl tw-z-10"
+        className="tw-w-full tw-max-w-2xl tw-z-10 tw-px-4"
         onClick={(e) => e.stopPropagation()}
       >
         <ModalLayout title="Vote for this artwork" onCancel={onClose}>
@@ -46,6 +47,8 @@ const VotingModal: React.FC<VotingModalProps> = ({
       </div>
     </div>
   );
+
+  return createPortal(modalContent, document.body);
 };
 
 export default VotingModal;