update word break, annouceCandidacyModal stepper layout

Joystream · Nov 22, 2023 · 0c60c0f · 0c60c0f
1 parent 944a54b
commit 0c60c0f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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
@@ -54,6 +54,10 @@ const CandidatePreviewColumn = styled(ScrollableModalColumn)`
   flex: 0 0 336px;
   flex-direction: column;
   gap: 24px;
+
+  * {
+    word-break: normal;
+  }
 `
 
 const CandidacyPointList = styled.ul`