diff --git a/src/components/common/Extensions/UserHub/UserHub.tsx b/src/components/common/Extensions/UserHub/UserHub.tsx
index 15579427777..e06cc32b601 100644
--- a/src/components/common/Extensions/UserHub/UserHub.tsx
+++ b/src/components/common/Extensions/UserHub/UserHub.tsx
@@ -111,7 +111,7 @@ const UserHub: FC<UserHubProps> = ({
           </>
         )}
       </div>
-      <div className={clsx('relative h-full w-full')}>
+      <div className="relative h-full w-full min-w-0">
         {selectedTab === UserHubTabs.Balance && (
           <ReputationTab onTabChange={handleTabChange} />
         )}
diff --git a/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransaction.tsx b/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransaction.tsx
index cfc9584e750..9411534dfdc 100644
--- a/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransaction.tsx
+++ b/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransaction.tsx
@@ -138,7 +138,7 @@ const GroupedTransaction: FC<GroupedTransactionProps> = ({
                       {value}
                     </h4>
                     {createdAt && (
-                      <span className="mt-0.5 block text-xs text-gray-400">
+                      <span className="mt-0.5 block whitespace-nowrap text-xs text-gray-400">
                         {createdAt}
                       </span>
                     )}
@@ -156,7 +156,7 @@ const GroupedTransaction: FC<GroupedTransactionProps> = ({
                     />
                   </p>
                 </div>
-                <div className="flex gap-2 pr-8">
+                <div className="flex min-w-0 gap-2 pr-8">
                   {!isMobile && <GroupedTransactionStatus status={status} />}
                 </div>
               </div>
diff --git a/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionStatus.tsx b/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionStatus.tsx
index f38a898e4e5..091323da7db 100644
--- a/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionStatus.tsx
+++ b/src/components/common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionStatus.tsx
@@ -17,25 +17,29 @@ const GroupedTransactionStatus: FC<TransactionStatusProps> = ({ status }) => {
 
   return (
     <div
-      className={clsx('flex flex-col items-end', {
+      className={clsx('flex max-w-full flex-col items-end', {
         'text-success-400': succeeded,
         'text-negative-400': failed,
       })}
     >
-      {pending && (
-        <SpinnerGap
-          className="ml-2.5 h-[0.8125rem] w-[0.8125rem] animate-spin text-blue-400"
-          size={14}
-        />
-      )}
       <PillsBase
-        className={clsx({
-          'bg-success-100 text-success-400': succeeded,
-          'bg-negative-100 text-negative-400': failed,
-          'bg-gray-100 text-gray-500': !succeeded && !failed,
-        })}
+        className={clsx(
+          {
+            'bg-success-100 text-success-400': succeeded,
+            'bg-negative-100 text-negative-400': failed,
+            'bg-gray-100 text-gray-500': !succeeded && !failed,
+          },
+          'max-w-full',
+        )}
+        textClassName="flex max-w-full items-center"
       >
-        {status.toLowerCase()}
+        <span className="truncate">{status.toLowerCase()}</span>
+        {pending && (
+          <SpinnerGap
+            className="ml-1 h-[0.8125rem] w-[0.8125rem] flex-shrink-0 animate-spin"
+            size={14}
+          />
+        )}
       </PillsBase>
     </div>
   );