Update to attempt to work with mobile (#498)

* Update to attempt to work with mobile

* Update.

Author: pwdel

frontend/src/components/TradeCTA.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+export default function TradeCTA({ onClick, disabled }) {
+  const [isSelected, setIsSelected] = useState(false);
+  const initialButtonStyle = "bg-custom-gray-light";
+  const selectedButtonStyle = "bg-neutral-btn";
+  const buttonBaseStyle = "w-full px-4 py-2 text-white border rounded focus:outline-none";
+
+  const handleClick = () => {
+    setIsSelected(!isSelected);
+    onClick && onClick();
+  };
+
+  return (
+    <div
+      className="md:hidden fixed inset-x-0 bottom-0 z-40 bg-primary-background/90 backdrop-blur p-3"
+      style={{ paddingBottom: 'calc(env(safe-area-inset-bottom) + 80px)' }}
+      data-testid="mobile-trade-cta"
+    >
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={disabled}
+        className={`${buttonBaseStyle} ${isSelected ? selectedButtonStyle : initialButtonStyle} min-w-32 text-xs sm:text-sm md:text-base disabled:opacity-50`}
+      >
+        TRADE
+      </button>
+    </div>
+  );
+}

frontend/src/components/marketDetails/MarketDetailsLayout.jsx

@@ -4,6 +4,9 @@ import MarketChart from '../charts/MarketChart';
 import ActivityTabs from '../../components/tabs/ActivityTabs';
 import ResolveModalButton from '../modals/resolution/ResolveModal';
 import BetModalButton from '../modals/bet/BetModal';
+import TradeCTA from '../TradeCTA';
+import TradeTabs from '../../components/tabs/TradeTabs';
+import { BetButton } from '../buttons/trade/BetButtons';
 import formatResolutionDate from '../../helpers/formatResolutionDate';
 
 function MarketDetailsTable({
@@ -21,6 +24,18 @@ function MarketDetailsTable({
   refetchData,
 }) {
   const [showFullDescription, setShowFullDescription] = useState(false);
+  const [showBetModal, setShowBetModal] = useState(false);
+
+  const toggleBetModal = () => setShowBetModal(prev => !prev);
+
+  const handleTransactionSuccess = () => {
+    setShowBetModal(false);  // Close modal
+    if (refetchData) {
+      refetchData();  // Trigger data refresh
+    }
+  };
+
+  const shouldShowTradeButtons = !market.isResolved && isLoggedIn && new Date(market.resolutionDateTime) > new Date();
 
   return (
     <div className='bg-gray-900 text-gray-300 p-4 rounded-lg shadow-lg w-full'>
@@ -144,20 +159,40 @@ function MarketDetailsTable({
             className='text-xs px-4 py-2'
           />
         )}
-        {!market.isResolved && isLoggedIn && new Date(market.resolutionDateTime) > new Date() && (
-          <BetModalButton
-            marketId={marketId}
-            token={token}
-            disabled={!token}
-            onTransactionSuccess={refetchData}
-            className='text-xs px-4 py-2'
-          />
+        {shouldShowTradeButtons && (
+          <div className="hidden md:block">
+            <BetButton onClick={toggleBetModal} className="text-xs px-4 py-2" />
+          </div>
         )}
       </div>
 
-      <div className='mx-auto w-full'>
+      <div className='mx-auto w-full mb-4'>
         <ActivityTabs marketId={marketId} />
       </div>
+
+      {/* Mobile floating CTA */}
+      {shouldShowTradeButtons && (
+        <TradeCTA onClick={toggleBetModal} disabled={!token} />
+      )}
+
+      {/* Spacer so content doesn't sit under the CTA */}
+      <div className="h-32 md:hidden" />
+
+      {/* Shared Trade Modal */}
+      {showBetModal && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center z-50">
+          <div className="bet-modal relative bg-blue-900 p-6 rounded-lg text-white m-6 mx-auto" style={{ width: '350px' }}>
+            <TradeTabs
+              marketId={marketId}
+              token={token}
+              onTransactionSuccess={handleTransactionSuccess}
+            />
+            <button onClick={toggleBetModal} className="absolute top-0 right-0 mt-4 mr-4 text-gray-400 hover:text-white">
+              ✕
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/pages/marketDetails/MarketDetails.jsx

@@ -14,7 +14,7 @@ const MarketDetails = () => {
   }
 
   return (
-    <div className='flex flex-col h-full'>
+    <div className='flex flex-col min-h-screen'>
       <div className='flex-grow overflow-y-auto'>
         <MarketDetailsTable
           market={details.market}

frontend/src/pages/style/Style.jsx

@@ -30,6 +30,7 @@ import LoadingSpinner from '../../components/loaders/LoadingSpinner';
 import { SharesBadge } from '../../components/buttons/trade/SellButtons';
 import ExpandableText from '../../components/utils/ExpandableText';
 import ExpandableLink from '../../components/utils/ExpandableLink';
+import TradeCTA from '../../components/TradeCTA';
 
 const Style = () => {
   const [isSelected, setIsSelected] = useState(false);
@@ -642,6 +643,20 @@ const Style = () => {
               <code>{`import ExpandableLink from '../../components/utils/ExpandableLink';`}</code>
             </td>
           </tr>
+          <tr>
+            <td className='px-6 py-4'>
+              <div className='flex flex-wrap items-center gap-4'>
+                <TradeCTA
+                  onClick={() => setIsSelected(!isSelected)}
+                  disabled={false}
+                />
+              </div>
+            </td>
+            <td className='px-6 py-4 text-sm text-gray-500'>Mobile Trade CTA</td>
+            <td className='px-6 py-4 text-sm font-mono text-gray-500'>
+              <code>{`import TradeCTA from '../../components/TradeCTA';`}</code>
+            </td>
+          </tr>
         </tbody>
       </table>
       <table className='min-w-full divide-y divide-gray-200 bg-primary-background'>