feat(governance): more mobile view improvements (#4751)

Co-authored-by: Joe <joe@vega.xyz>

apps/governance-e2e/src/support/staking.functions.ts

@@ -195,8 +195,7 @@ export function validateValidatorListTotalStakeAndShare(
   cy.contains('Loading...', epochTimeout).should('not.exist');
   waitForBeginningOfEpoch();
   cy.get(`[row-id="${positionOnList}"]`)
-    .should('have.length', 2)
-    .eq(1)
+    .first()
     .within(() => {
       cy.getByTestId(stakeValidatorListTotalStake, epochTimeout).should(
         'have.text',

apps/governance/src/routes/home/index.tsx

@@ -45,7 +45,7 @@ const HomeProposals = ({
   const { t } = useTranslation();
 
   return (
-    <section className="mb-16" data-testid="home-proposals">
+    <section className="mb-16 break-all" data-testid="home-proposals">
       <Heading title={t('vegaGovernance')} />
       <h3 className="mb-6">{t('homeProposalsIntro')}</h3>
       <div className="mb-8">

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -127,7 +127,7 @@ export const Proposal = ({
         voteState={voteState}
       />
 
-      <div className="my-10">
+      <div className="my-10 break-all">
         <ProposalChangeTable proposal={proposal} />
       </div>
 

apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -352,7 +352,6 @@ export const ConsensusValidatorsTable = ({
           field: ValidatorFields.RANKING_INDEX,
           headerName: '#',
           width: 60,
-          pinned: 'left',
         },
         {
           field: ValidatorFields.VALIDATOR,
@@ -362,7 +361,6 @@ export const ConsensusValidatorsTable = ({
             if (a === b) return 0;
             return a > b ? 1 : -1;
           },
-          pinned: 'left',
           width: 260,
         },
         {

apps/governance/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx

@@ -195,14 +195,12 @@ export const StandbyPendingValidatorsTable = ({
           field: ValidatorFields.RANKING_INDEX,
           headerName: '#',
           width: 60,
-          pinned: 'left',
         },
         {
           field: ValidatorFields.VALIDATOR,
           headerName: t(ValidatorFields.VALIDATOR).toString(),
           cellRenderer: ValidatorRenderer,
           comparator: ({ name: a }, { name: b }) => Math.sign(a - b),
-          pinned: 'left',
           width: 260,
         },
         {

apps/governance/src/routes/staking/node/validator-table.tsx

@@ -122,6 +122,7 @@ export const ValidatorTable = ({
 
       <div className="my-12" data-testid="validator-table">
         <SubHeading title={t('profile')} />
+        <div className="break-all">
           <RoundedWrapper paddingBottom={true}>
             <KeyValueTable data-testid="validator-table-profile">
               <KeyValueTableRow>
@@ -134,7 +135,10 @@ export const ValidatorTable = ({
                 <span>{t('ABOUT THIS VALIDATOR')}</span>
 
                 <Tooltip description={t('AboutThisValidatorDescription')}>
-                <a data-testid="validator-description-url" href={node.infoUrl}>
+                  <a
+                    data-testid="validator-description-url"
+                    href={node.infoUrl}
+                  >
                     {node.infoUrl}
                   </a>
                 </Tooltip>
@@ -154,6 +158,7 @@ export const ValidatorTable = ({
               </KeyValueTableRow>
             </KeyValueTable>
           </RoundedWrapper>
+        </div>
 
         <div className="mb-10">
           {t('validatorTableIntro')}{' '}
@@ -167,6 +172,7 @@ export const ValidatorTable = ({
         </div>
 
         <SubHeading title={t('ADDRESS')} />
+        <div className="break-all">
           <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
             <KeyValueTable data-testid="validator-table-address">
               <KeyValueTableRow>
@@ -196,8 +202,10 @@ export const ValidatorTable = ({
               </KeyValueTableRow>
             </KeyValueTable>
           </RoundedWrapper>
+        </div>
 
         <SubHeading title={t('STAKE')} />
+        <div className="break-all">
           <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
             <KeyValueTable data-testid="validator-table-stake">
               <KeyValueTableRow>
@@ -247,8 +255,10 @@ export const ValidatorTable = ({
               </KeyValueTableRow>
             </KeyValueTable>
           </RoundedWrapper>
+        </div>
 
         <SubHeading title={t('PENALTIES')} />
+        <div className="break-all">
           <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
             <KeyValueTable data-testid="validator-table-penalties">
               <KeyValueTableRow>
@@ -274,13 +284,17 @@ export const ValidatorTable = ({
                   <strong>{t('TOTAL PENALTIES')}</strong>
                 </span>
                 <span data-testid="total-penalties">
-                <strong>{formatNumberPercentage(penalties.overall, 2)}</strong>
+                  <strong>
+                    {formatNumberPercentage(penalties.overall, 2)}
+                  </strong>
                 </span>
               </KeyValueTableRow>
             </KeyValueTable>
           </RoundedWrapper>
+        </div>
 
         <SubHeading title={t('VOTING POWER')} />
+        <div className="break-all">
           <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
             <KeyValueTable data-testid="validator-table-voting-power">
               <KeyValueTableRow>
@@ -306,6 +320,7 @@ export const ValidatorTable = ({
             </KeyValueTable>
           </RoundedWrapper>
         </div>
+      </div>
     </>
   );
 };

apps/governance/src/routes/token/token-details/token-details.tsx

@@ -54,7 +54,7 @@ export const TokenDetails = ({
     config.token_vesting_contract?.address || ENV.addresses.tokenVestingAddress;
 
   return (
-    <div className="token-details">
+    <div className="token-details break-all">
       <RoundedWrapper>
         <KeyValueTable>
           <KeyValueTableRow>