From 0c60c0fa99841ab7cb09df5931d87b94cb10a54b Mon Sep 17 00:00:00 2001
From: eshark9312 <eshark9312@outlook.com>
Date: Wed, 22 Nov 2023 00:36:01 -0500
Subject: [PATCH] update word break, annouceCandidacyModal stepper layout

---
 .../election/CandidateVote/CandidateVote.tsx    |  4 ++++
 .../AnnounceCandidacyModal.tsx                  | 17 +++++++++++++++--
 .../components/CandidacyReview.tsx              |  4 ++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx b/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx
index c8dfa20505..24de3fbf51 100644
--- a/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx
+++ b/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx
@@ -158,6 +158,10 @@ const CandidateVoteWrapper = styled(ListItem)`
   padding: 16px 48px 16px 8px;
   cursor: pointer;
 
+  * {
+    word-break: normal;
+  }
+
   &:hover,
   &:focus,
   &:focus-within {
diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx
index be1c44f94d..80dcee2929 100644
--- a/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx
+++ b/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx
@@ -2,6 +2,7 @@ import { CouncilCandidacyNoteMetadata } from '@joystream/metadata-protobuf'
 import BN from 'bn.js'
 import React, { useEffect, useMemo, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
+import styled from 'styled-components'
 
 import { useBalance } from '@/accounts/hooks/useBalance'
 import { useHasRequiredStake } from '@/accounts/hooks/useHasRequiredStake'
@@ -302,7 +303,7 @@ export const AnnounceCandidacyModal = () => {
     <Modal onClose={hideModal} modalSize="l" modalHeight="xl">
       <ModalHeader onClick={hideModal} title="Announce candidacy" />
       <StepperModalBody>
-        <StepperModalWrapper>
+        <StepperWrapperLayout>
           <Stepper steps={getSteps(service)} />
           <StepDescriptionColumn>
             <AnnounceCandidacyConstantsWrapper constants={constants} />
@@ -342,7 +343,7 @@ export const AnnounceCandidacyModal = () => {
               )}
             </FormProvider>
           </StepperBody>
-        </StepperModalWrapper>
+        </StepperWrapperLayout>
       </StepperModalBody>
       <ModalTransactionFooter
         next={{
@@ -355,3 +356,15 @@ export const AnnounceCandidacyModal = () => {
     </Modal>
   )
 }
+
+const StepperWrapperLayout = styled(StepperModalWrapper)`
+  grid-template-columns: 220px 184px 1fr;
+
+  @media (min-width: 1024px) {
+    grid-template-columns: 220px 240px 1fr;
+  }
+
+  @media (min-width: 1440px) {
+    grid-template-columns: 220px 336px 1fr;
+  }
+`
diff --git a/packages/ui/src/council/modals/VoteForCouncil/components/CandidacyReview.tsx b/packages/ui/src/council/modals/VoteForCouncil/components/CandidacyReview.tsx
index 3e80c5fc53..baef01cc50 100644
--- a/packages/ui/src/council/modals/VoteForCouncil/components/CandidacyReview.tsx
+++ b/packages/ui/src/council/modals/VoteForCouncil/components/CandidacyReview.tsx
@@ -54,6 +54,10 @@ const CandidatePreviewColumn = styled(ScrollableModalColumn)`
   flex: 0 0 336px;
   flex-direction: column;
   gap: 24px;
+
+  * {
+    word-break: normal;
+  }
 `
 
 const CandidacyPointList = styled.ul`