From 0e2b361950ba8ebb29e25e1bbae1e6171b5abfa2 Mon Sep 17 00:00:00 2001
From: Connor Barr <crnbarr@gmail.com>
Date: Tue, 3 Sep 2024 17:13:24 +0100
Subject: [PATCH] fix: claimable orders mobile (#3821)

---
 .../components/complex/orders-history/index.tsx  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/complex/orders-history/index.tsx b/packages/web/components/complex/orders-history/index.tsx
index 654a1de23b..02a53e6c41 100644
--- a/packages/web/components/complex/orders-history/index.tsx
+++ b/packages/web/components/complex/orders-history/index.tsx
@@ -343,7 +343,9 @@ const TableGroupHeader = ({
     return (
       <tr
         style={style}
-        className={classNames("grid grid-cols-[auto_180px] items-center")}
+        className={classNames(
+          "grid grid-cols-[auto_180px] items-center md:grid-cols-[auto_100px]"
+        )}
       >
         <td colSpan={5} className="!p-0">
           <div className="flex w-full items-center justify-between pr-4">
@@ -362,7 +364,7 @@ const TableGroupHeader = ({
                 title={t("limitOrders.whatIsOrderClaim.title")}
                 body={t("limitOrders.whatIsOrderClaim.description")}
               >
-                <div className="flex h-12 w-12 items-center justify-center rounded-full transition-colors hover:bg-osmoverse-800">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full transition-colors hover:bg-osmoverse-800 md:hidden">
                   <Icon
                     id="question"
                     className="h-6 w-6 text-wosmongton-200"
@@ -374,14 +376,16 @@ const TableGroupHeader = ({
             </div>
           </div>
         </td>
-        <td className="flex items-center justify-end">
+        <td className="flex items-center justify-end md:!p-0">
           <button
-            className="flex items-center justify-center rounded-[48px] bg-wosmongton-700 py-3 px-4 disabled:opacity-50"
+            className="md:scale-1/2 flex items-center justify-center rounded-[48px] bg-wosmongton-700 py-3 px-4 disabled:opacity-50"
             onClick={claim}
             disabled={claiming}
           >
-            {claiming && <Spinner className="mr-2 !h-2 !w-2" />}
-            <span className="subtitle1">{t("limitOrders.claimAll")}</span>
+            {claiming && <Spinner className="mr-2 !h-2 !w-2 md:hidden" />}
+            <span className="subtitle1 md:text-caption">
+              {t("limitOrders.claimAll")}
+            </span>
           </button>
         </td>
       </tr>