From 19ea8ff25f7233a07f423d4a1ff2070594b604eb Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 6 Jul 2023 10:51:11 -0700
Subject: [PATCH] feat: ensure floating buttons stay within their container

---
 apps/trading/client-pages/market/market-selector-item.tsx     | 4 ++--
 apps/trading/client-pages/portfolio/deposits-container.tsx    | 2 +-
 apps/trading/client-pages/portfolio/withdrawals-container.tsx | 2 +-
 .../components/accounts-container/accounts-container.tsx      | 4 ++--
 apps/trading/components/settings/settings.tsx                 | 2 +-
 apps/trading/components/sidebar/sidebar.tsx                   | 1 +
 .../lib/components/order-list-manager/order-list-manager.tsx  | 2 +-
 7 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/trading/client-pages/market/market-selector-item.tsx b/apps/trading/client-pages/market/market-selector-item.tsx
index 458356efd..968d0298b 100644
--- a/apps/trading/client-pages/market/market-selector-item.tsx
+++ b/apps/trading/client-pages/market/market-selector-item.tsx
@@ -75,9 +75,9 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
   return (
     <div className="flex gap-2">
       <div>
-        <div className="text-ellipsis whitespace-nowrap overflow-hidden">
+        <h3 className="text-ellipsis whitespace-nowrap overflow-hidden">
           {market.tradableInstrument.instrument.code}
-        </div>
+        </h3>
         {mode && (
           <p className="text-xs text-vega-orange-500 dark:text-vega-orange-550 whitespace-nowrap">
             {mode}
diff --git a/apps/trading/client-pages/portfolio/deposits-container.tsx b/apps/trading/client-pages/portfolio/deposits-container.tsx
index e03a2f829..e0aa7ea2d 100644
--- a/apps/trading/client-pages/portfolio/deposits-container.tsx
+++ b/apps/trading/client-pages/portfolio/deposits-container.tsx
@@ -25,7 +25,7 @@ export const DepositsContainer = () => {
         overlayNoRowsTemplate={error ? error.message : t('No deposits')}
       />
       {!isReadOnly && (
-        <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-3 absolute dark:bg-black/75 bg-white/75 rounded">
+        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
           <Button
             variant="primary"
             size="sm"
diff --git a/apps/trading/client-pages/portfolio/withdrawals-container.tsx b/apps/trading/client-pages/portfolio/withdrawals-container.tsx
index 579a80fac..19c179602 100644
--- a/apps/trading/client-pages/portfolio/withdrawals-container.tsx
+++ b/apps/trading/client-pages/portfolio/withdrawals-container.tsx
@@ -32,7 +32,7 @@ export const WithdrawalsContainer = () => {
         />
       </div>
       {!isReadOnly && (
-        <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-3 absolute dark:bg-black/75 bg-white/75 rounded">
+        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
           <Button
             variant="primary"
             size="sm"
diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx
index 3bccf42fe..f9159f35d 100644
--- a/apps/trading/components/accounts-container/accounts-container.tsx
+++ b/apps/trading/components/accounts-container/accounts-container.tsx
@@ -67,11 +67,11 @@ export const AccountsContainer = ({
         gridProps={gridStoreCallbacks}
       />
       {!isReadOnly && !hideButtons && (
-        <div className="flex gap-2 justify-end p-2 px-[11px] absolute lg:fixed bottom-0 right-3 dark:bg-black/75 bg-white/75 rounded">
+        <div className="flex gap-2 justify-end p-2 absolute bottom-0 right-0 dark:bg-black/75 bg-white/75 rounded">
           <Button
             variant="primary"
             size="sm"
-            data-testid="open-transfer-dialog"
+            data-testid="open-transfer"
             onClick={() => setView({ type: ViewType.Transfer })}
           >
             {t('Transfer')}
diff --git a/apps/trading/components/settings/settings.tsx b/apps/trading/components/settings/settings.tsx
index f7cb60a61..4d7fc94b6 100644
--- a/apps/trading/components/settings/settings.tsx
+++ b/apps/trading/components/settings/settings.tsx
@@ -23,7 +23,7 @@ export const Settings = () => {
         )}
       >
         <Switch
-          name="settings-theme-switch"
+          name="settings-telemetry-switch"
           onCheckedChange={(isOn) => setIsApproved(isOn)}
           checked={isApproved}
         />
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 1c3b08cec..40cb68e44 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -238,6 +238,7 @@ const ContentWrapper = ({
     <div
       // panes have p-1, since sidebar is on the right make pl less to account for additional pane space
       className="py-4 pl-3 pr-4"
+      data-testid="sidebar-content"
     >
       {title && <h2 className="mb-4">{title}</h2>}
       {children}
diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
index 94f9be71f..d27c45abd 100644
--- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
+++ b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
@@ -139,7 +139,7 @@ export const OrderListManager = ({
 };
 
 const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
+  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end p-2 absolute bottom-0 right-0 rounded">
     <Button
       variant="primary"
       size="sm"