From b67918d7a04d93bc00737470232fc3f5a1a2c655 Mon Sep 17 00:00:00 2001
From: Joanna <joanna.dyszkiewicz@pagepro.pl>
Date: Wed, 3 Apr 2024 15:40:04 +0200
Subject: [PATCH 1/3] fix: styles update

---
 package-lock.json                             | 15 ++++
 package.json                                  |  1 +
 .../UserHubButton/UserHubButton.tsx           |  5 +-
 .../MemberReputation/MemberReputation.tsx     |  4 +-
 .../shared/Extensions/Tooltip/Tooltip.tsx     |  2 +
 .../shared/Extensions/Tooltip/types.ts        |  1 +
 .../partials/PermissionSidebar.tsx            |  2 +-
 .../ExitRecoveryStep/ExitRecoveryStep.tsx     | 39 +++++-----
 .../steps/FinalizeStep/FinalizeStep.tsx       |  2 +-
 .../Motions/steps/OutcomeStep/OutcomeStep.tsx | 10 ++-
 .../Motions/steps/OutcomeStep/hooks.ts        | 49 ++++++++++++
 .../partials/VoteStatuses/VoteStatuses.tsx    | 10 +--
 .../Motions/steps/RevealStep/RevealStep.tsx   | 76 ++++++++++++-------
 .../Motions/steps/StakingStep/StakingStep.tsx |  4 +-
 .../Motions/steps/VotingStep/VotingStep.tsx   | 63 +++++++++------
 .../Motions/steps/VotingStep/hooks.tsx        |  1 +
 .../partials/ProgressContent.tsx              |  2 +-
 .../v5/common/ObjectiveBox/ObjectiveBox.tsx   |  5 +-
 .../partials/Objective/Objective.tsx          |  3 +-
 .../MenuWithStatusText/MenuWithStatusText.tsx | 10 +--
 .../v5/shared/ProgressBar/ProgressBar.tsx     | 19 ++---
 src/components/v5/shared/ProgressBar/types.ts |  3 +-
 .../v5/shared/StatusText/StatusText.tsx       |  9 ++-
 src/components/v5/shared/Stepper/Stepper.tsx  | 47 +++++++++---
 .../partials/StepperButton/StepperButton.tsx  | 12 ++-
 src/i18n/en.json                              |  5 +-
 src/stories/shared/ProgressBar.stories.tsx    | 14 ----
 27 files changed, 275 insertions(+), 138 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5e8d20ca77c..6d36260d25c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -79,6 +79,7 @@
         "react-helmet-async": "^2.0.3",
         "react-hook-form": "^7.45.2",
         "react-hooks-visible": "^1.1.1",
+        "react-intersection-observer": "^9.8.2",
         "react-intl": "^6.6.1",
         "react-modal": "^3.15.1",
         "react-popper": "^2.3.0",
@@ -45606,6 +45607,20 @@
         "react": ">=16.8"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz",
+      "integrity": "sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-intl": {
       "version": "6.6.1",
       "license": "BSD-3-Clause",
diff --git a/package.json b/package.json
index 33fde5a48a5..0b145c8f61b 100644
--- a/package.json
+++ b/package.json
@@ -211,6 +211,7 @@
     "react-helmet-async": "^2.0.3",
     "react-hook-form": "^7.45.2",
     "react-hooks-visible": "^1.1.1",
+    "react-intersection-observer": "^9.8.2",
     "react-intl": "^6.6.1",
     "react-modal": "^3.15.1",
     "react-popper": "^2.3.0",
diff --git a/src/components/common/Extensions/UserHubButton/UserHubButton.tsx b/src/components/common/Extensions/UserHubButton/UserHubButton.tsx
index b7b19487ad3..4aaa429fccf 100644
--- a/src/components/common/Extensions/UserHubButton/UserHubButton.tsx
+++ b/src/components/common/Extensions/UserHubButton/UserHubButton.tsx
@@ -141,7 +141,7 @@ const UserHubButton: FC = () => {
     splitWalletAddress(walletAddress ?? ADDRESS_ZERO);
 
   return (
-    <div ref={ref}>
+    <div ref={ref} className="flex-shrink-0">
       <Button
         mode="tertiary"
         size="large"
@@ -155,11 +155,12 @@ const UserHubButton: FC = () => {
         )}
         onClick={handleButtonClick}
       >
-        <div className="flex items-center">
+        <div className="flex flex-shrink-0 items-center">
           {/* If there's a user, there's a wallet */}
           {walletAddress ? (
             <>
               <UserAvatar
+                className="flex-shrink-0"
                 userAvatarSrc={user?.profile?.avatar ?? undefined}
                 userName={userName}
                 userAddress={wallet.address}
diff --git a/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx b/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx
index 34b50a89d3c..32f2a86ae21 100644
--- a/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx
+++ b/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx
@@ -43,7 +43,9 @@ const MemberReputation: FC<MemberReputationProps> = ({
         {percentageReputation === ZeroValue.NearZero && percentageReputation}
         {percentageReputation &&
           percentageReputation !== ZeroValue.NearZero && (
-            <Numeral value={percentageReputation} suffix=" %" />
+            <>
+              <Numeral value={percentageReputation} />%
+            </>
           )}
       </span>
     </div>
diff --git a/src/components/shared/Extensions/Tooltip/Tooltip.tsx b/src/components/shared/Extensions/Tooltip/Tooltip.tsx
index 3d43b09dc16..adae0a641fc 100644
--- a/src/components/shared/Extensions/Tooltip/Tooltip.tsx
+++ b/src/components/shared/Extensions/Tooltip/Tooltip.tsx
@@ -11,6 +11,7 @@ const displayName = 'Extensions.Tooltip';
 const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
   children,
   tooltipContent,
+  tooltipStyle,
   placement = 'auto',
   popperOptions,
   interactive,
@@ -68,6 +69,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
                 'bg-gray-900 [&_a]:underline': !isSuccess,
               },
             ),
+            style: tooltipStyle,
           })}
         >
           <div
diff --git a/src/components/shared/Extensions/Tooltip/types.ts b/src/components/shared/Extensions/Tooltip/types.ts
index 190162e4427..411d3e2ea5f 100644
--- a/src/components/shared/Extensions/Tooltip/types.ts
+++ b/src/components/shared/Extensions/Tooltip/types.ts
@@ -4,6 +4,7 @@ import { type PopperOptions, type TriggerType } from 'react-popper-tooltip';
 
 export interface TooltipProps {
   tooltipContent: ReactNode;
+  tooltipStyle?: React.CSSProperties;
   trigger?: TriggerType | TriggerType[] | null;
   placement?: PlacementType;
   offset?: [number, number];
diff --git a/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx b/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx
index eabd7ea9c4f..e1bda9ed965 100644
--- a/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx
@@ -77,7 +77,7 @@ const PermissionSidebar: FC<PermissionSidebarProps> = ({ transactionId }) => {
           id: 'action.executed.permissions.description',
         }),
         iconAlignment: 'top',
-        textClassName: 'text-4',
+        textClassName: 'text-4 text-gray-900',
       }}
       sections={[
         {
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx
index dbb061b7c4d..2a489ee75f4 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx
@@ -24,25 +24,28 @@ const ExitRecoveryStep: FC = () => {
       <MenuWithStatusText
         statusTextSectionProps={{
           status: StatusTypes.Info,
-          children: formatText(
-            { id: 'motion.exitRecovery.statusText' },
-            { signatures: 2 },
+          children: (
+            <>
+              <p className="text-4">
+                {formatText(
+                  { id: 'motion.exitRecovery.statusText' },
+                  { signatures: 2 },
+                )}
+              </p>
+              <ProgressBar
+                progress={0}
+                progressLabel={formatText(
+                  {
+                    id: 'motion.exitRecovery.additionalText',
+                  },
+                  { signatures: 2 },
+                )}
+                max={2}
+                className="mt-2"
+              />
+            </>
           ),
-          textClassName: 'text-4',
           iconAlignment: 'top',
-          content: (
-            <ProgressBar
-              progress={0}
-              additionalText={formatText(
-                {
-                  id: 'motion.exitRecovery.additionalText',
-                },
-                { signatures: 2 },
-              )}
-              max={2}
-              className="ml-1"
-            />
-          ),
         }}
         sections={[
           {
@@ -107,7 +110,7 @@ const ExitRecoveryStep: FC = () => {
           children: formatText({
             id: 'motion.exitRecovery.storageSlots.statusText',
           }),
-          textClassName: 'text-4',
+          textClassName: 'text-4 text-gray-900',
           iconAlignment: 'top',
         }}
         sections={[
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx
index afa562b5965..88d23f84532 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx
@@ -119,7 +119,7 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
             ? 'motion.finalizeStep.failed.statusText'
             : 'motion.finalizeStep.statusText',
         }),
-        textClassName: 'text-4',
+        textClassName: 'text-4 text-gray-900',
         iconAlignment: 'top',
         content: (
           <div />
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx
index eb7c9d4ced2..37a64ef733e 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx
@@ -55,7 +55,8 @@ const getOutcomeStepTitle = (
 
 const OutcomeStep: FC<OutcomeStepProps> = ({ motionData }) => {
   const { wallet } = useAppContext();
-  const { voteStatuses } = useOutcomeStep(motionData);
+  const { voteStatuses, stakingData } = useOutcomeStep(motionData);
+  const { stakers, stakeVoteStatuses } = stakingData || {};
 
   const voters: UserAvatarsItem[] =
     motionData?.voterRecord.map((voter) => ({
@@ -73,6 +74,8 @@ const OutcomeStep: FC<OutcomeStepProps> = ({ motionData }) => {
     ? MotionVote.Yay
     : MotionVote.Nay;
 
+  const showVotingData = voters.length !== 0;
+
   return (
     <MenuWithSections
       sections={[
@@ -83,7 +86,10 @@ const OutcomeStep: FC<OutcomeStepProps> = ({ motionData }) => {
               <h3 className="mb-4 text-center text-1">
                 {formatText(getOutcomeStepTitle(currentUserVote, winningSide))}
               </h3>
-              <VoteStatuses items={voteStatuses} voters={voters} />
+              <VoteStatuses
+                items={showVotingData ? voteStatuses : stakeVoteStatuses || []}
+                voters={showVotingData ? voters : stakers || []}
+              />
             </div>
           ),
         },
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts
index 4e3cbd192e5..2adc31fad96 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { type ColonyMotion } from '~types/graphql.ts';
 import { MotionVote } from '~utils/colonyMotions.ts';
+import { type UserAvatarsItem } from '~v5/shared/UserAvatars/types.ts';
 
 import { supportOption, opposeOption } from '../../consts.ts';
 
@@ -34,7 +35,55 @@ export const useOutcomeStep = (motionData: ColonyMotion | null | undefined) => {
     ];
   }, [motionData]);
 
+  const stakingData = useMemo(() => {
+    if (!motionData) return undefined;
+
+    const { usersStakes } = motionData;
+
+    const stakers = usersStakes.flatMap((userStakes) => {
+      const { address, stakes } = userStakes;
+
+      const yay = Number(stakes.percentage.yay);
+      const nay = Number(stakes.percentage.nay);
+      const addresses: UserAvatarsItem[] = [];
+
+      if (yay > 0) {
+        addresses.push({ address, voteCount: '1', vote: MotionVote.Yay });
+      }
+
+      if (nay > 0) {
+        addresses.push({ address, voteCount: '1', vote: MotionVote.Nay });
+      }
+
+      return addresses;
+    });
+
+    // 100 is hardcoded because in userStakes total wasn't 100% (it was like 98%). Probably because of rounding.
+    const stakeVoteStatuses: VoteStatuses[] = [
+      {
+        key: supportOption.id,
+        icon: supportOption.icon,
+        label: supportOption.label || '',
+        progress: 100,
+        status: MotionVote.Yay,
+      },
+      {
+        key: opposeOption.id,
+        icon: opposeOption.icon,
+        label: opposeOption.label || '',
+        progress: 100,
+        status: MotionVote.Nay,
+      },
+    ];
+
+    return {
+      stakers,
+      stakeVoteStatuses,
+    };
+  }, [motionData]);
+
   return {
     voteStatuses,
+    stakingData,
   };
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx
index c06de078558..92e181294d3 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx
@@ -28,10 +28,10 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
   );
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="grid grid-cols-[1fr_auto] gap-8">
       {items.map(({ key, icon: Icon, label, progress, status }) => (
-        <div key={key} className="flex w-full items-center gap-8">
-          <div className="flex max-w-[182px] grow flex-col gap-1">
+        <React.Fragment key={key}>
+          <div className="flex w-full grow flex-col gap-1">
             <span className="flex items-start gap-[0.375rem]">
               <Icon
                 className={clsx('h-[1em] w-[1em] text-[1.125rem]', {
@@ -51,8 +51,8 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
             </span>
             <ProgressBar
               progress={progress}
+              progressLabel={`${progress}%`}
               max={100}
-              additionalText="%"
               barClassName={clsx({
                 'bg-purple-200': status === MotionVote.Yay,
                 'bg-negative-300': status === MotionVote.Nay,
@@ -72,7 +72,7 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
               size={26}
             />
           )}
-        </div>
+        </React.Fragment>
       ))}
     </div>
   );
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
index 7062a1934f2..dcaf446972a 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
@@ -67,21 +67,29 @@ const RevealStep: FC<RevealStepProps> = ({
     <MenuWithStatusText
       statusTextSectionProps={{
         status: StatusTypes.Info,
-        children: formatText({ id: 'motion.revealStep.statusText' }),
-        textClassName: 'text-4',
+        iconAlignment: 'top',
+        textClassName: 'w-full',
+        children: (
+          <p className="text-gray-900 text-4">
+            {formatText({ id: 'motion.revealStep.statusText' })}
+          </p>
+        ),
         content: (
-          <div className="mt-1 flex flex-col gap-2">
-            <div className="ml-[1.375rem]">
+          <>
+            <div className="ml-[1.375rem] mt-1">
               <ProgressBar
+                className="mt-2"
                 progress={revealProgress}
+                labelClassName="!text-xs"
+                progressLabel={formatText(
+                  {
+                    id: 'motion.revealStep.votesRevealed',
+                  },
+                  {
+                    votes: revealProgress,
+                  },
+                )}
                 max={totalVoters}
-                additionalText={formatText({
-                  id:
-                    revealProgress === 1
-                      ? 'motion.revealStep.voteRevealed'
-                      : 'motion.revealStep.votesRevealed',
-                })}
-                className="ml-1"
                 isTall
               />
             </div>
@@ -94,7 +102,7 @@ const RevealStep: FC<RevealStepProps> = ({
                 {formatText({ id: 'motion.revealStep.warning' })}
               </StatusText>
             )}
-          </div>
+          </>
         ),
       }}
       sections={[
@@ -148,23 +156,35 @@ const RevealStep: FC<RevealStepProps> = ({
             </ActionForm>
           ),
         },
+        {
+          key: '2',
+          content: (
+            <AccordionItem
+              title={formatText({
+                id: isInformationAccordionOpen
+                  ? 'motion.revealStep.buttonHide'
+                  : 'motion.revealStep.buttonShow',
+              })}
+              isOpen={isInformationAccordionOpen}
+              onToggle={toggleInformationAccordion}
+              className={clsx(
+                `
+                  [&_.accordion-toggler]:text-sm
+                  [&_.accordion-toggler]:text-gray-500
+                `,
+                {
+                  '[&_.accordion-toggler]:text-blue-500':
+                    isInformationAccordionOpen,
+                },
+              )}
+              icon={CaretDown}
+              iconSize={16}
+            >
+              <RevealInformationList items={voters} />
+            </AccordionItem>
+          ),
+        },
       ]}
-      footer={
-        <AccordionItem
-          className="text-sm text-gray-500"
-          isOpen={isInformationAccordionOpen}
-          onToggle={toggleInformationAccordion}
-          title={formatText({
-            id: isInformationAccordionOpen
-              ? 'motion.revealStep.buttonHide'
-              : 'motion.revealStep.buttonShow',
-          })}
-          icon={CaretDown}
-          iconSize={16}
-        >
-          <RevealInformationList items={voters} />
-        </AccordionItem>
-      }
     />
   );
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx
index f2049eaa504..0daef908a69 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx
@@ -142,7 +142,7 @@ const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
           canInteract
             ? [
                 {
-                  key: '1',
+                  key: '2',
                   content: <NotEnoughTokensInfo />,
                   className: 'bg-negative-100 text-negative-400 !py-3',
                 },
@@ -178,7 +178,7 @@ const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
           ...(isStaked
             ? [
                 {
-                  key: '3',
+                  key: '4',
                   content: (
                     <AccordionItem
                       title={formatText({
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
index 3cbb6588b11..28a6cf6226f 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { type FC } from 'react';
 import { defineMessages } from 'react-intl';
 
@@ -55,10 +56,8 @@ const VotingStep: FC<VotingStepProps> = ({
   });
 
   const { wallet, user } = useAppContext();
-  const canVote =
-    !!wallet &&
-    !!user &&
-    !actionData.motionData.motionStateHistory.inRevealPhase;
+  const isRevealPhase = actionData.motionData.motionStateHistory.inRevealPhase;
+  const canVote = !!wallet && !!user && !isRevealPhase;
 
   const isSupportVote = currentUserVote === MotionVote.Yay;
   const isOpposeVote = currentUserVote === MotionVote.Nay;
@@ -67,24 +66,35 @@ const VotingStep: FC<VotingStepProps> = ({
     <MenuWithStatusText
       statusTextSectionProps={{
         status: StatusTypes.Info,
-        children: formatText(
-          { id: 'motion.votingStep.statusText' },
-          { thresholdPercent },
+        textClassName: 'text-4 text-gray-900 w-full',
+        children: (
+          <p className="text-4">
+            {formatText(
+              { id: 'motion.votingStep.statusText' },
+              { thresholdPercent },
+            )}
+          </p>
         ),
-        textClassName: 'text-4',
-        iconAlignment: 'top',
         content: (
           <div className="ml-[1.375rem] mt-1">
             <ProgressBar
+              className="mt-2"
               progress={currentReputationPercent}
               threshold={thresholdPercent}
-              additionalText={formatText({
-                id: 'motion.votingStep.additionalText',
-              })}
+              labelClassName="!text-xs"
+              progressLabel={formatText(
+                {
+                  id: 'motion.votingStep.additionalText',
+                },
+                {
+                  progress: currentReputationPercent,
+                },
+              )}
               isTall
             />
           </div>
         ),
+        iconAlignment: 'top',
       }}
       sections={[
         {
@@ -99,16 +109,15 @@ const VotingStep: FC<VotingStepProps> = ({
             >
               <div>
                 {hasUserVoted && (isSupportVote || isOpposeVote) && (
-                  <div className="mb-3">
-                    <div className="mb-6 flex items-center justify-between gap-2">
+                  <div className="w-full">
+                    <div className="flex items-center justify-between gap-2">
                       <h4 className="text-2">
                         {formatText({ id: 'motion.votingStep.voted' })}
                       </h4>
                       <MotionVoteBadge vote={currentUserVote} />
                     </div>
-                    {!actionData.motionData.motionStateHistory
-                      .inRevealPhase && (
-                      <>
+                    {!isRevealPhase && (
+                      <div className="mt-4 w-full">
                         <h4 className="mb-1 text-2">
                           {formatText({ id: 'motion.votingStep.changeVote' })}
                         </h4>
@@ -117,12 +126,16 @@ const VotingStep: FC<VotingStepProps> = ({
                             id: 'motion.votingStep.changeVoteDescription',
                           })}
                         </p>
-                      </>
+                      </div>
                     )}
                   </div>
                 )}
                 {canVote && (
-                  <>
+                  <div
+                    className={clsx('w-full', {
+                      'mt-4': hasUserVoted,
+                    })}
+                  >
                     {!hasUserVoted && (
                       <h4 className="mb-3 text-center text-1">
                         {formatText({ id: 'motion.votingStep.title' })}
@@ -135,19 +148,19 @@ const VotingStep: FC<VotingStepProps> = ({
                       )}
                       name="vote"
                     />
-                  </>
+                  </div>
                 )}
               </div>
-              {(hasUserVoted || canVote) && (
-                <div className="mt-7 border-t border-gray-200 pt-6" />
-              )}
-              <DescriptionList items={items} className="my-1" />
+              <DescriptionList
+                items={items}
+                className="mt-6 border-t border-gray-200 pt-6"
+              />
               {canVote && (
                 <Button
                   mode="primarySolid"
                   isFullSize
                   type="submit"
-                  className="mt-8"
+                  className="mt-6"
                   text={formatText(
                     hasUserVoted ? MSG.changeVote : MSG.submitVote,
                   )}
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx
index c66da5c6915..930bc1dd5a5 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx
@@ -162,6 +162,7 @@ export const useVotingStep = ({
             rootHash={rootHash}
             textClassName="text-sm"
             walletAddress={user?.walletAddress ?? ''}
+            hideOnMobile={false}
           />
         ),
       },
diff --git a/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx b/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx
index e4b5cdbe294..f26a117d4b1 100644
--- a/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx
+++ b/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx
@@ -57,7 +57,7 @@ const ProgressContent: FC<ProgressContentProps> = ({
           </div>
         </div>
         <span className="text-sm text-gray-600">{fileSize}</span>
-        <ProgressBar progress={progress} additionalText="%" />
+        <ProgressBar progress={progress} progressLabel={`${progress}%`} />
       </div>
     </div>
   );
diff --git a/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx b/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx
index 13af4e79676..6f74a8ff27f 100644
--- a/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx
+++ b/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx
@@ -37,7 +37,10 @@ const ObjectiveBox: FC<ObjectiveBoxProps> = ({ objective }) => {
             )
           : formatMessage(MSG.noObjectiveBoxDescription)}
       </p>
-      <ProgressBar progress={objective?.progress || 0} additionalText="%" />
+      <ProgressBar
+        progress={objective?.progress || 0}
+        progressLabel={`${objective?.progress || 0}%`}
+      />
     </div>
   );
 };
diff --git a/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx b/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx
index 99b4ab3caeb..64e9bcc336d 100644
--- a/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx
+++ b/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx
@@ -53,8 +53,7 @@ const Objective = () => {
             </p>
             <ProgressBar
               progress={objective.progress || 0}
-              className="ml-0"
-              additionalText="%"
+              progressLabel={`${objective.progress || 0}%`}
               isTall
               barClassName={selectedDomain ? teamColor : 'bg-blue-400'}
             />
diff --git a/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx b/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx
index 89c72aa293b..a0edbc30b75 100644
--- a/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx
+++ b/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx
@@ -10,8 +10,6 @@ const displayName = 'v5.shared.MenuWithStatusText';
 const MenuWithStatusText: React.FC<MenuWithStatusTextProps> = ({
   statusTextSectionProps,
   sections,
-  footer,
-  footerClassName,
 }) => {
   const { content, ...restStatusTextSectionProps } = statusTextSectionProps;
 
@@ -29,13 +27,7 @@ const MenuWithStatusText: React.FC<MenuWithStatusTextProps> = ({
     ...sections,
   ];
 
-  return (
-    <MenuWithSections
-      sections={sectionsWithStatusText}
-      footer={footer}
-      footerClassName={footerClassName}
-    />
-  );
+  return <MenuWithSections sections={sectionsWithStatusText} />;
 };
 
 MenuWithStatusText.displayName = displayName;
diff --git a/src/components/v5/shared/ProgressBar/ProgressBar.tsx b/src/components/v5/shared/ProgressBar/ProgressBar.tsx
index 16015d393c9..6f6f605f334 100644
--- a/src/components/v5/shared/ProgressBar/ProgressBar.tsx
+++ b/src/components/v5/shared/ProgressBar/ProgressBar.tsx
@@ -5,19 +5,20 @@ import { type ProgressBarProps } from './types.ts';
 
 const ProgressBar: FC<ProgressBarProps> = ({
   progress,
+  progressLabel,
   isTall,
-  additionalText,
   threshold = null,
   max = 100,
   barClassName,
   className,
+  labelClassName,
 }) => {
   if (progress > max || progress < 0) {
     throw new Error(`Progress bar value must be between between 0 and ${max}`);
   }
 
   return (
-    <div className="flex items-center">
+    <div className={clsx(className, 'flex items-center')}>
       <div
         className={clsx('relative w-full rounded bg-gray-200', {
           'h-2.5 rounded-lg': isTall,
@@ -42,14 +43,14 @@ const ProgressBar: FC<ProgressBarProps> = ({
           />
         )}
       </div>
-      <span className="ml-3 text-xs font-medium leading-3 text-gray-600">
-        {progress}
+      <span
+        className={clsx(
+          labelClassName,
+          'ml-3 flex-shrink-0 text-sm font-medium leading-3 text-gray-600',
+        )}
+      >
+        {progressLabel || progress}
       </span>
-      {additionalText && (
-        <span className={clsx(className, 'flex-shrink-0 text-gray-600 text-3')}>
-          {additionalText}
-        </span>
-      )}
     </div>
   );
 };
diff --git a/src/components/v5/shared/ProgressBar/types.ts b/src/components/v5/shared/ProgressBar/types.ts
index bd2108b0fd3..79a30d40266 100644
--- a/src/components/v5/shared/ProgressBar/types.ts
+++ b/src/components/v5/shared/ProgressBar/types.ts
@@ -1,9 +1,10 @@
 export interface ProgressBarProps {
   progress: number;
+  progressLabel?: string;
   isTall?: boolean;
-  additionalText?: React.ReactNode;
   threshold?: number;
   max?: number;
   barClassName?: string;
   className?: string;
+  labelClassName?: string;
 }
diff --git a/src/components/v5/shared/StatusText/StatusText.tsx b/src/components/v5/shared/StatusText/StatusText.tsx
index 4b3c949eca5..fed9beda42a 100644
--- a/src/components/v5/shared/StatusText/StatusText.tsx
+++ b/src/components/v5/shared/StatusText/StatusText.tsx
@@ -30,7 +30,7 @@ const StatusText: FC<PropsWithChildren<StatusTextProps>> = ({
   return (
     <div
       className={clsx(className, 'flex', {
-        'text-gray-900': status === StatusTypes.Info,
+        'text-gray-500': status === StatusTypes.Info,
         'text-success-400': status === StatusTypes.Success,
         'text-warning-400': status === StatusTypes.Warning,
         'text-negative-400': status === StatusTypes.Error,
@@ -45,7 +45,12 @@ const StatusText: FC<PropsWithChildren<StatusTextProps>> = ({
           className={clsx(iconClassName, 'flex-shrink-0')}
         />
       )}
-      <p className={textClassName}>{children}</p>
+      {children && typeof children === 'string' && (
+        <p className={textClassName}>{children}</p>
+      )}
+      {children && typeof children !== 'string' && (
+        <div className={textClassName}>{children}</div>
+      )}
     </div>
   );
 };
diff --git a/src/components/v5/shared/Stepper/Stepper.tsx b/src/components/v5/shared/Stepper/Stepper.tsx
index c2aa3a2d749..7cd9f906e54 100644
--- a/src/components/v5/shared/Stepper/Stepper.tsx
+++ b/src/components/v5/shared/Stepper/Stepper.tsx
@@ -2,6 +2,7 @@ import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import React, { useEffect, useState } from 'react';
+import { InView } from 'react-intersection-observer';
 
 import { accordionAnimation } from '~constants/accordionAnimation.ts';
 import { useMobile } from '~hooks/index.ts';
@@ -19,6 +20,7 @@ function Stepper<TKey extends React.Key>({
   items,
 }: StepperProps<TKey>): JSX.Element | null {
   const activeItemIndex = items.findIndex(({ key }) => key === activeStepKey);
+  const [hiddenItem, setHiddenItem] = useState<TKey | undefined>(undefined);
   const [openItemIndex, setOpenItemIndex] = useState(activeItemIndex);
   const isMobile = useMobile();
   const openedItem = items[openItemIndex];
@@ -47,14 +49,14 @@ function Stepper<TKey extends React.Key>({
     }
   };
 
-  useEffect(() => {
-    const handleResize = () => {
-      const element = listRef.current;
-      if (element) {
-        setIsScrollableList(element.scrollWidth > element.clientWidth);
-      }
-    };
+  const handleResize = () => {
+    const element = listRef.current;
+    if (element) {
+      setIsScrollableList(element.scrollWidth > element.clientWidth);
+    }
+  };
 
+  useEffect(() => {
     handleResize();
 
     window.addEventListener('resize', handleResize);
@@ -66,8 +68,30 @@ function Stepper<TKey extends React.Key>({
 
   useEffect(() => {
     setOpenItemIndex(activeItemIndex);
+    handleResize();
   }, [activeItemIndex]);
 
+  const handleChange = (name: TKey, inView: boolean) => {
+    if (!inView) {
+      setHiddenItem(name);
+    } else {
+      setHiddenItem(undefined);
+    }
+  };
+
+  useEffect(() => {
+    if (hiddenItem && listRef.current && isMobile && isScrollableList) {
+      const index = items.findIndex(({ key }) => key === hiddenItem);
+      if (index > -1) {
+        listRef.current.scrollBy({
+          left: 70 * index,
+          behavior: 'smooth',
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openItemIndex, isMobile]);
+
   return items.length ? (
     <>
       <div className="flex w-full items-center gap-1">
@@ -145,7 +169,11 @@ function Stepper<TKey extends React.Key>({
                     },
                   )}
                 >
-                  <div className="flex flex-col items-start gap-[.375rem] sm:flex-row sm:items-center">
+                  <InView
+                    as="div"
+                    onChange={(inView) => handleChange(key, inView)}
+                    className="flex flex-col items-start gap-[.375rem] sm:flex-row sm:items-center"
+                  >
                     <StepperButton
                       stage={
                         (index < activeItemIndex &&
@@ -157,6 +185,7 @@ function Stepper<TKey extends React.Key>({
                       }
                       onClick={() => {
                         setOpenItemIndex(index);
+                        setHiddenItem(undefined);
 
                         if (index > activeItemIndex && setActiveStepKey) {
                           setActiveStepKey(key);
@@ -168,7 +197,7 @@ function Stepper<TKey extends React.Key>({
                       {...restHeading}
                     />
                     {decor || null}
-                  </div>
+                  </InView>
                   {!isMobile && !itemDisabled && !!content && (
                     <div
                       className={clsx(
diff --git a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
index 83bf2af2e83..bbb4436b3d9 100644
--- a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
+++ b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useMobile } from '~hooks';
 import { useScrollIntoView } from '~hooks/useScrollIntoView.ts';
@@ -23,9 +23,16 @@ const StepperButton: React.FC<StepperButtonProps> = ({
   ...rest
 }) => {
   const { ref, scroll } = useScrollIntoView<HTMLButtonElement>();
+  const [buttonWidth, setButtonWidth] = useState<number>(0);
   const Icon = icon || ICON_NAME_MAP[stage];
   const isMobile = useMobile();
 
+  useEffect(() => {
+    if (ref.current) {
+      setButtonWidth(ref.current.offsetWidth);
+    }
+  }, []);
+
   useEffect(() => {
     if (isHighlighted) {
       scroll({ behavior: 'smooth', inline: 'end' });
@@ -83,8 +90,9 @@ const StepperButton: React.FC<StepperButtonProps> = ({
         </StepperTooltip>
       ) : (
         <Tooltip
-          placement={isMobile ? 'bottom' : 'right'}
+          placement="right"
           className="!inline-flex"
+          tooltipStyle={{ maxWidth: `calc(100% - ${buttonWidth}px - 20px)` }}
           {...tooltipProps}
         >
           {content}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d85a87d30b3..1c3ad550fc4 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1387,8 +1387,7 @@
     "motion.revealStep.title": "You voted:",
     "motion.revealStep.statusText": "Ends when timer ends; or all voters have revealed.",
     "motion.revealStep.warning": "You must reveal your vote for it to count and to claim your reward.",
-    "motion.revealStep.votesRevealed": "votes revealed",
-    "motion.revealStep.voteRevealed": "vote revealed",
+    "motion.revealStep.votesRevealed": "{votes} {votes, plural, one {vote} other {votes}} revealed",
     "motion.revealStep.submit": "Reveal vote",
     "motion.revealStep.buttonHide": "Hide reveal information",
     "motion.revealStep.buttonShow": "Show reveal information",
@@ -1396,7 +1395,7 @@
     "motion.revealStep.emptyDescription": "You did not vote so do not need to reveal. Please wait for all required voters to reveal or the reveal stage to end.",
     "motion.votingStep.statusText": "Voting ends when either time runs out, or {thresholdPercent}% of reputation in this domain has voted.",
     "motion.votingStep.title": "Vote to support or oppose?",
-    "motion.votingStep.additionalText": "% Rep",
+    "motion.votingStep.additionalText": "{progress}% Rep",
     "motion.votingStep.votingMethod": "Voting method",
     "motion.votingStep.teamReputation": "Team reputation",
     "motion.votingStep.rewardRange": "Reward range",
diff --git a/src/stories/shared/ProgressBar.stories.tsx b/src/stories/shared/ProgressBar.stories.tsx
index bf34d5c06ab..17a8efa07d1 100644
--- a/src/stories/shared/ProgressBar.stories.tsx
+++ b/src/stories/shared/ProgressBar.stories.tsx
@@ -24,12 +24,6 @@ const meta: Meta<typeof ProgressBar> = {
         type: 'range',
       },
     },
-    additionalText: {
-      name: 'Additional text',
-      control: {
-        type: 'text',
-      },
-    },
     isTall: {
       name: 'Is tall?',
       control: {
@@ -53,11 +47,3 @@ export const WithData: Story = {
     progress: 40,
   },
 };
-
-export const WithAdditionalText: Story = {
-  args: {
-    progress: 50,
-    additionalText: 'Rep',
-    isTall: true,
-  },
-};

From 0eb10b07479e9cd0f6955a8b47f2b3dd4a774952 Mon Sep 17 00:00:00 2001
From: Cezary Dryl <cezary.dryl@pagepro.pl>
Date: Thu, 27 Jun 2024 11:19:36 +0200
Subject: [PATCH 2/3] fix: tooltip position

---
 .../ActionSidebar/partials/Motions/Motions.tsx       | 12 ++++++------
 .../Stepper/partials/StepperButton/StepperButton.tsx |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx
index 398c641d61d..c826315ad32 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx
@@ -1,6 +1,6 @@
 import { MotionState as NetworkMotionState } from '@colony/colony-js';
 import { ThumbsDown, ThumbsUp } from '@phosphor-icons/react';
-import { left as LeftPlacementType } from '@popperjs/core';
+import { right as RightPlacementType } from '@popperjs/core';
 import clsx from 'clsx';
 import { BigNumber } from 'ethers';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
@@ -114,7 +114,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -145,7 +145,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -180,7 +180,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -244,7 +244,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -269,7 +269,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
diff --git a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
index bbb4436b3d9..ee2dd21a7c2 100644
--- a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
+++ b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
@@ -31,7 +31,7 @@ const StepperButton: React.FC<StepperButtonProps> = ({
     if (ref.current) {
       setButtonWidth(ref.current.offsetWidth);
     }
-  }, []);
+  }, [ref]);
 
   useEffect(() => {
     if (isHighlighted) {

From 359249cdbc37f2cbaade9b26343133cec4447405 Mon Sep 17 00:00:00 2001
From: Cezary Dryl <cezary.dryl@pagepro.pl>
Date: Mon, 1 Jul 2024 15:39:44 +0200
Subject: [PATCH 3/3] fix: remove useEffect, progressLabel prop

---
 .../Motions/steps/RevealStep/RevealStep.tsx   | 21 +++++++++++--------
 .../Motions/steps/VotingStep/VotingStep.tsx   | 21 +++++++++++--------
 .../v5/shared/ProgressBar/ProgressBar.tsx     |  8 +------
 src/components/v5/shared/ProgressBar/types.ts |  3 +--
 .../partials/StepperButton/StepperButton.tsx  | 17 +++++++--------
 5 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
index dcaf446972a..499f9412dda 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
@@ -80,15 +80,18 @@ const RevealStep: FC<RevealStepProps> = ({
               <ProgressBar
                 className="mt-2"
                 progress={revealProgress}
-                labelClassName="!text-xs"
-                progressLabel={formatText(
-                  {
-                    id: 'motion.revealStep.votesRevealed',
-                  },
-                  {
-                    votes: revealProgress,
-                  },
-                )}
+                progressLabel={
+                  <span className="!text-xs">
+                    {formatText(
+                      {
+                        id: 'motion.revealStep.votesRevealed',
+                      },
+                      {
+                        votes: revealProgress,
+                      },
+                    )}
+                  </span>
+                }
                 max={totalVoters}
                 isTall
               />
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
index 28a6cf6226f..5cb42616738 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
@@ -81,15 +81,18 @@ const VotingStep: FC<VotingStepProps> = ({
               className="mt-2"
               progress={currentReputationPercent}
               threshold={thresholdPercent}
-              labelClassName="!text-xs"
-              progressLabel={formatText(
-                {
-                  id: 'motion.votingStep.additionalText',
-                },
-                {
-                  progress: currentReputationPercent,
-                },
-              )}
+              progressLabel={
+                <span className="!text-xs">
+                  {formatText(
+                    {
+                      id: 'motion.votingStep.additionalText',
+                    },
+                    {
+                      progress: currentReputationPercent,
+                    },
+                  )}
+                </span>
+              }
               isTall
             />
           </div>
diff --git a/src/components/v5/shared/ProgressBar/ProgressBar.tsx b/src/components/v5/shared/ProgressBar/ProgressBar.tsx
index 6f6f605f334..925fc20d4a1 100644
--- a/src/components/v5/shared/ProgressBar/ProgressBar.tsx
+++ b/src/components/v5/shared/ProgressBar/ProgressBar.tsx
@@ -11,7 +11,6 @@ const ProgressBar: FC<ProgressBarProps> = ({
   max = 100,
   barClassName,
   className,
-  labelClassName,
 }) => {
   if (progress > max || progress < 0) {
     throw new Error(`Progress bar value must be between between 0 and ${max}`);
@@ -43,12 +42,7 @@ const ProgressBar: FC<ProgressBarProps> = ({
           />
         )}
       </div>
-      <span
-        className={clsx(
-          labelClassName,
-          'ml-3 flex-shrink-0 text-sm font-medium leading-3 text-gray-600',
-        )}
-      >
+      <span className="ml-3 flex-shrink-0 text-sm font-medium leading-3 text-gray-600">
         {progressLabel || progress}
       </span>
     </div>
diff --git a/src/components/v5/shared/ProgressBar/types.ts b/src/components/v5/shared/ProgressBar/types.ts
index 79a30d40266..5f69781fc49 100644
--- a/src/components/v5/shared/ProgressBar/types.ts
+++ b/src/components/v5/shared/ProgressBar/types.ts
@@ -1,10 +1,9 @@
 export interface ProgressBarProps {
   progress: number;
-  progressLabel?: string;
+  progressLabel?: JSX.Element | string;
   isTall?: boolean;
   threshold?: number;
   max?: number;
   barClassName?: string;
   className?: string;
-  labelClassName?: string;
 }
diff --git a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
index ee2dd21a7c2..b4f54a19ecc 100644
--- a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
+++ b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { useMobile } from '~hooks';
 import { useScrollIntoView } from '~hooks/useScrollIntoView.ts';
@@ -23,16 +23,9 @@ const StepperButton: React.FC<StepperButtonProps> = ({
   ...rest
 }) => {
   const { ref, scroll } = useScrollIntoView<HTMLButtonElement>();
-  const [buttonWidth, setButtonWidth] = useState<number>(0);
   const Icon = icon || ICON_NAME_MAP[stage];
   const isMobile = useMobile();
 
-  useEffect(() => {
-    if (ref.current) {
-      setButtonWidth(ref.current.offsetWidth);
-    }
-  }, [ref]);
-
   useEffect(() => {
     if (isHighlighted) {
       scroll({ behavior: 'smooth', inline: 'end' });
@@ -92,7 +85,13 @@ const StepperButton: React.FC<StepperButtonProps> = ({
         <Tooltip
           placement="right"
           className="!inline-flex"
-          tooltipStyle={{ maxWidth: `calc(100% - ${buttonWidth}px - 20px)` }}
+          tooltipStyle={
+            ref.current
+              ? {
+                  maxWidth: `calc(100% - ${ref.current.offsetWidth}px - 20px)`,
+                }
+              : undefined
+          }
           {...tooltipProps}
         >
           {content}