From 3739a557c7961926593298cedc5652ee15d7acdc Mon Sep 17 00:00:00 2001
From: eshark9312 <eshark9312@outlook.com>
Date: Mon, 20 Nov 2023 21:33:01 -0500
Subject: [PATCH 1/5] update responsiveness

---
 .../src/accounts/components/AccountInfo.tsx   |  2 +-
 .../SelectAccount/OptionListAccount.tsx       | 13 ++----
 .../SelectAccount/SelectAccount.tsx           | 22 +++-------
 .../ui/src/accounts/components/StakeStep.tsx  |  4 +-
 .../ui/src/app/pages/Forum/ForumWatchlist.tsx | 25 +++++-------
 .../pages/WorkingGroups/MyRoles/MyRole.tsx    | 26 +++++++++++-
 .../WorkingGroups/WorkingGroupsOpening.tsx    | 35 +++++++++++++++-
 packages/ui/src/app/providers/GlobalStyle.tsx |  1 +
 .../HorizontalScroller/HorizontalScroller.tsx |  4 ++
 .../MarkdownPreview/MarkdownPreviewStyles.tsx | 11 +++--
 .../components/NetworkInfo/NetworkInfo.tsx    |  4 ++
 .../components/SidePane/SidePaneTable.tsx     |  3 --
 .../components/forms/InputComponent.tsx       |  4 ++
 .../src/common/components/page/SidePanel.tsx  |  2 +
 .../common/components/selects/components.tsx  | 40 ++++++++++++++-----
 .../MultiTransactionModalHeader.tsx           | 29 ++++++++------
 .../TransactionModal/MultiTransactionStep.tsx | 17 ++++----
 .../components/RewardAccountStep.tsx          |  4 +-
 .../components/StakeStep.tsx                  |  4 +-
 .../CandidacyPreview/CandidacyDetails.tsx     |  1 -
 .../components/ThreadCard/ThreadCard.tsx      | 23 +++++++----
 .../forum/components/category/ForumMain.tsx   |  6 ++-
 .../forum/components/threads/ThreadList.tsx   | 14 +++++--
 .../components/threads/ThreadListItem.tsx     |  7 ++--
 .../CreateThreadDetailsModal.tsx              |  2 +-
 .../modals/PostReplyModal/PostReplyModal.tsx  |  2 +-
 .../RationalePreview/RationalePreview.tsx     |  1 -
 .../SpecificParameters/FundingRequest.tsx     |  9 +++--
 .../SetCouncilBudgetIncrement.tsx             |  6 +--
 .../SpecificParameters/SetCouncilorReward.tsx |  6 +--
 .../SetInitialInvitationBalance.tsx           |  6 +--
 .../SpecificParameters/SetMembershipPrice.tsx |  6 +--
 .../UpdateChannelPayouts.tsx                  |  9 +++--
 .../components/StakingAccountStep.tsx         |  4 +-
 .../components/ApplicationsList.tsx           | 10 ++++-
 .../components/OpeningsList/OpeningsList.tsx  |  2 +-
 .../components/WorkingGroupsList.tsx          |  2 +-
 .../modals/ApplyForRoleModal/StakeStep.tsx    | 21 +++++++---
 38 files changed, 246 insertions(+), 141 deletions(-)

diff --git a/packages/ui/src/accounts/components/AccountInfo.tsx b/packages/ui/src/accounts/components/AccountInfo.tsx
index 31d0e73abb..c00d0963b8 100644
--- a/packages/ui/src/accounts/components/AccountInfo.tsx
+++ b/packages/ui/src/accounts/components/AccountInfo.tsx
@@ -42,7 +42,7 @@ export const AccountInfo = React.memo(({ account, locked }: AccountInfoProps) =>
   )
 })
 
-const AccountInfoWrap = styled.div`
+export const AccountInfoWrap = styled.div`
   display: grid;
   grid-template-columns: 40px 1fr;
   grid-template-rows: min-content 24px 18px;
diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
index bbd691532f..6b94477c93 100644
--- a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
@@ -12,27 +12,22 @@ interface Props {
   onChange: (option: AccountOption) => void
   className?: string
   isForStaking?: boolean
-  isSmallVariant?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
-export const OptionListAccount = React.memo(({ options, onChange, className, isForStaking, isSmallVariant }: Props) => {
+export const OptionListAccount = React.memo(({ options, onChange, className, isForStaking, variant }: Props) => {
   const freeAccounts = options.filter((option) => (option.optionLocks ? option.optionLocks?.length === 0 : true))
   const lockedAccounts = options.filter((option) => !!option.optionLocks?.length)
   return (
     <OptionsListComponent className={className}>
       {freeAccounts.map((option) => (
-        <Option key={option.address} onClick={() => onChange && onChange(option)} isSmallVariant={isSmallVariant}>
+        <Option key={option.address} onClick={() => onChange && onChange(option)} variant={variant}>
           <OptionAccount option={option} isForStaking={isForStaking} />
         </Option>
       ))}
       {lockedAccounts.map((option) => (
         <AccountLockTooltip boundaryClassName={className} key={option.address} locks={option.optionLocks}>
-          <Option
-            key={option.address}
-            onClick={() => onChange && onChange(option)}
-            disabled
-            isSmallVariant={isSmallVariant}
-          >
+          <Option key={option.address} onClick={() => onChange && onChange(option)} disabled variant={variant}>
             <OptionAccount option={option} isForStaking={isForStaking} />
           </Option>
         </AccountLockTooltip>
diff --git a/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx
index a611d6b92b..9c88dc5d0f 100644
--- a/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx
@@ -25,7 +25,7 @@ interface SelectAccountProps extends Pick<SelectProps<AccountOption>, 'id' | 'se
   onChange?: (selected: AccountOption) => void
   filter?: (option: AccountOption) => boolean
   name?: string
-  isSmallVariant?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
 interface SelectStakingAccountProps extends SelectAccountProps {
@@ -40,17 +40,7 @@ interface BaseSelectAccountProps extends SelectAccountProps {
 }
 
 export const BaseSelectAccount = React.memo(
-  ({
-    id,
-    onChange,
-    accounts,
-    filter,
-    selected,
-    disabled,
-    onBlur,
-    isForStaking,
-    isSmallVariant,
-  }: BaseSelectAccountProps) => {
+  ({ id, onChange, accounts, filter, selected, disabled, onBlur, isForStaking, variant }: BaseSelectAccountProps) => {
     const options = accounts.filter(filter || (() => true))
 
     const [search, setSearch] = useState('')
@@ -78,7 +68,7 @@ export const BaseSelectAccount = React.memo(
         onChange={change}
         onBlur={onBlur}
         disabled={disabled}
-        renderSelected={renderSelected(isForStaking, isSmallVariant)}
+        renderSelected={renderSelected(isForStaking, variant)}
         placeholder="Select account or paste account address"
         renderList={(onOptionClick) => (
           <OptionListAccount
@@ -86,7 +76,7 @@ export const BaseSelectAccount = React.memo(
             onChange={onOptionClick}
             options={filteredOptions}
             isForStaking={isForStaking}
-            isSmallVariant={isSmallVariant}
+            variant={variant}
           />
         )}
         onSearch={(search) => setSearch(search)}
@@ -95,9 +85,9 @@ export const BaseSelectAccount = React.memo(
   }
 )
 
-const renderSelected = (isForStaking?: boolean, isSmallVariant?: boolean) => (option: AccountOption) =>
+const renderSelected = (isForStaking?: boolean, variant?: 's' | 'm' | 'l') => (option: AccountOption) =>
   (
-    <SelectedOption isSmallVariant={isSmallVariant}>
+    <SelectedOption variant={variant}>
       <OptionAccount option={option} isForStaking={isForStaking} />
     </SelectedOption>
   )
diff --git a/packages/ui/src/accounts/components/StakeStep.tsx b/packages/ui/src/accounts/components/StakeStep.tsx
index 5aa1088453..4a447b4827 100644
--- a/packages/ui/src/accounts/components/StakeStep.tsx
+++ b/packages/ui/src/accounts/components/StakeStep.tsx
@@ -36,7 +36,7 @@ export const StakeStep = ({
   state,
   errors,
 }: StakeStepProps) => {
-  const { isMobile } = useResponsive()
+  const { isMobile, size } = useResponsive()
   const selectAccountFilter = useCallback(
     (account: Account) => !accountsFilter || accountsFilter(account),
     [accountsFilter]
@@ -61,7 +61,7 @@ export const StakeStep = ({
               minBalance={minStake}
               lockType={stakeLock}
               filter={selectAccountFilter}
-              isSmallVariant={isMobile}
+              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
             />
           </InputComponent>
         </RowGapBlock>
diff --git a/packages/ui/src/app/pages/Forum/ForumWatchlist.tsx b/packages/ui/src/app/pages/Forum/ForumWatchlist.tsx
index 7302536c49..f422fad255 100644
--- a/packages/ui/src/app/pages/Forum/ForumWatchlist.tsx
+++ b/packages/ui/src/app/pages/Forum/ForumWatchlist.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
-import styled from 'styled-components'
 
 import { PageLayout } from '@/app/components/PageLayout'
-import { HorizontalScroller } from '@/common/components/HorizontalScroller/HorizontalScroller'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
@@ -10,6 +8,7 @@ import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { ForumPageHeader } from '@/forum/components/ForumPageHeader'
 import { ThreadCard } from '@/forum/components/ThreadCard/ThreadCard'
 import { ThreadCardSkeleton } from '@/forum/components/ThreadCard/ThreadCardSkeleton'
+import { ThreadCardsStyles } from '@/forum/components/threads/ThreadList'
 import { useWatchlistedThreads } from '@/forum/hooks/useWatchlistedThreads'
 
 import { ForumTabs } from './components/ForumTabs'
@@ -27,17 +26,15 @@ export const ForumWatchlist = () => {
     return (
       <RowGapBlock gap={20}>
         {!loading ? (
-          <HorizontalScroller
-            items={
-              threads.length ? (
-                threads.map((thread) => <StyledThreadCard thread={thread} watchlistButton />)
-              ) : (
-                <div>No threads found</div>
-              )
-            }
-          />
+          <ThreadCardsStyles>
+            {threads.length ? (
+              threads.map((thread) => <ThreadCard thread={thread} watchlistButton />)
+            ) : (
+              <div>No threads found</div>
+            )}
+          </ThreadCardsStyles>
         ) : (
-          <HorizontalScroller items={<ThreadCardSkeleton count={10} />} />
+          <ThreadCardsStyles>{<ThreadCardSkeleton count={10} />}</ThreadCardsStyles>
         )}
       </RowGapBlock>
     )
@@ -53,7 +50,3 @@ export const ForumWatchlist = () => {
     />
   )
 }
-
-const StyledThreadCard = styled(ThreadCard)`
-  min-width: 330px;
-`
diff --git a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
index 5afbc0ea70..4ca1ab1f85 100644
--- a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
+++ b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { useBalance } from '@/accounts/hooks/useBalance'
-import { PageLayout, PageHeaderWrapper, PageHeaderWithButtons } from '@/app/components/PageLayout'
+import { PageLayout, PageHeaderWrapper, PageHeaderRow } from '@/app/components/PageLayout'
 import { ActivitiesBlock } from '@/common/components/Activities/ActivitiesBlock'
 import { BadgesRow, BadgeStatus } from '@/common/components/BadgeStatus'
 import { BlockTime } from '@/common/components/BlockTime'
@@ -232,3 +232,27 @@ const RoleAccountHeader = styled.section`
   justify-content: space-between;
   align-items: flex-end;
 `
+
+export const PageHeaderWithButtons = styled(PageHeaderRow)`
+  @media (max-width: 1439px) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  @media (max-width: 767px) {
+    ${ButtonsGroup} {
+      grid-auto-flow: row;
+      grid-row-gap: 8px;
+      width: 100%;
+
+      button, a {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center:
+        gap: 4px;
+      }
+    }
+  }
+`
diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
index 3944a5f149..3d21c827ae 100644
--- a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
+++ b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import { PageHeaderWithButtons, PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { BadgesRow, BadgeStatus } from '@/common/components/BadgeStatus'
@@ -177,13 +177,13 @@ export const WorkingGroupOpening = () => {
       }
       sidebar={
         <SidePanel scrollable>
+          {opening.status === OpeningStatuses.OPEN && !activeApplications?.length && <ApplicationStatus />}
           <ApplicantsList
             allApplicants={opening.applications}
             myApplication={myApplication}
             hired={hiredApplicants}
             hiringComplete={opening.status !== OpeningStatuses.OPEN}
           />
-          {opening.status === OpeningStatuses.OPEN && !activeApplications?.length && <ApplicationStatus />}
         </SidePanel>
       }
       footer={
@@ -191,6 +191,7 @@ export const WorkingGroupOpening = () => {
           <BlockTime block={opening.createdAtBlock} layout="row" dateLabel="Created" />
         </PageFooter>
       }
+      responsiveStyle={ResponsiveStyle}
     />
   )
 }
@@ -224,3 +225,33 @@ const ApplicationStats = ({
 const ApplicationStatsStyles = styled(StatsBlock).attrs({ centered: true })`
   justify-content: start;
 `
+
+
+const ResponsiveStyle = css`
+  aside {
+    > div {
+      padding: 0;
+    }
+  }
+
+  @media (min-width: 768px) {
+    grid-template-columns: 8fr 4fr;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+      'header header'
+      'main sidebar'
+      'footer footer';
+
+    aside {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      padding-left: 16px;
+
+      > div {
+        min-height: 184px;
+        overflow: hidden;
+      }
+    }
+  }
+`
diff --git a/packages/ui/src/app/providers/GlobalStyle.tsx b/packages/ui/src/app/providers/GlobalStyle.tsx
index 5c2e85df4e..61bca5f0ea 100644
--- a/packages/ui/src/app/providers/GlobalStyle.tsx
+++ b/packages/ui/src/app/providers/GlobalStyle.tsx
@@ -39,6 +39,7 @@ export const GlobalStyle = createGlobalStyle`
 
   *, *:before, *:after {
     box-sizing: border-box;
+    word-break: break-word;
   }
   *::selection, *:before::selection, *:after::selection {
     color: ${Colors.Blue[50]};
diff --git a/packages/ui/src/common/components/HorizontalScroller/HorizontalScroller.tsx b/packages/ui/src/common/components/HorizontalScroller/HorizontalScroller.tsx
index c6d1e6662b..9263c1eb07 100644
--- a/packages/ui/src/common/components/HorizontalScroller/HorizontalScroller.tsx
+++ b/packages/ui/src/common/components/HorizontalScroller/HorizontalScroller.tsx
@@ -97,6 +97,10 @@ const ItemsWrapper = styled.div`
   width: 100%;
   padding: 10px 0;
   overflow-x: hidden;
+
+  @media (min-width: 1440px) {
+    column-gap: 24px;
+  }
 `
 
 const ButtonWrapper = styled.div`
diff --git a/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx b/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx
index 91fcd842f5..8f88367752 100644
--- a/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx
+++ b/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx
@@ -77,7 +77,6 @@ export const MarkdownPreviewStyles = createGlobalStyle<MarkdownPreviewStylesProp
     line-height: 1.5;
     font-weight: 400;
     color: ${normalColor};
-    word-break: break-word;
   }
 
   .markdown-preview li {
@@ -88,7 +87,7 @@ export const MarkdownPreviewStyles = createGlobalStyle<MarkdownPreviewStylesProp
     font-weight: 400;
     color: ${normalColor};
   }
-  
+
   .markdown-preview li + li {
     margin-top: 8px;
   }
@@ -111,7 +110,7 @@ export const MarkdownPreviewStyles = createGlobalStyle<MarkdownPreviewStylesProp
   .markdown-preview ol > li {
     counter-increment: ol-list-counter;
   }
-  
+
   .markdown-preview ol li p {
     margin-top: 0;
   }
@@ -199,18 +198,18 @@ export const MarkdownPreviewStyles = createGlobalStyle<MarkdownPreviewStylesProp
   .markdown-preview table th {
     font-weight: 600;
   }
-  
+
   .markdown-preview table th,
   .markdown-preview table td {
     padding: 6px 13px;
     border: 1px solid #d0d7de;
   }
-  
+
   .markdown-preview table tr {
     background-color: #ffffff;
     border-top: 1px solid hsla(210,18%,87%,1);
   }
-  
+
   .markdown-preview table tr:nth-child(2n) {
     background-color: #f6f8fa;
   }
diff --git a/packages/ui/src/common/components/NetworkInfo/NetworkInfo.tsx b/packages/ui/src/common/components/NetworkInfo/NetworkInfo.tsx
index ca9d2e08a9..6854c097dc 100644
--- a/packages/ui/src/common/components/NetworkInfo/NetworkInfo.tsx
+++ b/packages/ui/src/common/components/NetworkInfo/NetworkInfo.tsx
@@ -44,4 +44,8 @@ export default NetworkInfo
 export const CopyText = styled(CopyComponent)`
   font-size: 14px;
   margin-left: 5px;
+
+  > span {
+    white-space: unset;
+  }
 `
diff --git a/packages/ui/src/common/components/SidePane/SidePaneTable.tsx b/packages/ui/src/common/components/SidePane/SidePaneTable.tsx
index fbccc7e910..bb897ebd7d 100644
--- a/packages/ui/src/common/components/SidePane/SidePaneTable.tsx
+++ b/packages/ui/src/common/components/SidePane/SidePaneTable.tsx
@@ -33,9 +33,6 @@ export const SidePaneRow = styled.li`
   }
 
   > *:last-child {
-    display: flex;
-    gap: 16px;
-    align-items: center;
     margin-left: 24px;
     width: fit-content;
   }
diff --git a/packages/ui/src/common/components/forms/InputComponent.tsx b/packages/ui/src/common/components/forms/InputComponent.tsx
index adcc4a5c8a..642dd660d2 100644
--- a/packages/ui/src/common/components/forms/InputComponent.tsx
+++ b/packages/ui/src/common/components/forms/InputComponent.tsx
@@ -503,3 +503,7 @@ export const InputNotificationMessage = styled(TextSmall)`
   text-overflow: ellipsis;
   white-space: nowrap;
 `
+
+export const TokenInputComponent = styled(InputComponent)`
+  width: calc(min(400px, 100%));
+`
diff --git a/packages/ui/src/common/components/page/SidePanel.tsx b/packages/ui/src/common/components/page/SidePanel.tsx
index c7b39041b9..507f7b02af 100644
--- a/packages/ui/src/common/components/page/SidePanel.tsx
+++ b/packages/ui/src/common/components/page/SidePanel.tsx
@@ -19,6 +19,8 @@ export const SidePanel = ({ scrollable, className, children }: SidePanelProps) =
 
 export const SidePanelStyles = styled.div<Pick<SidePanelProps, 'scrollable'>>`
   display: flex;
+  flex-direction: column;
+  row-gap: 36px;
   width: 100%;
   height: 100%;
   @media (min-width: 1440px) {
diff --git a/packages/ui/src/common/components/selects/components.tsx b/packages/ui/src/common/components/selects/components.tsx
index ced2ad6c29..9b1b4a135e 100644
--- a/packages/ui/src/common/components/selects/components.tsx
+++ b/packages/ui/src/common/components/selects/components.tsx
@@ -1,6 +1,8 @@
 import React, { MouseEventHandler, ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 
+import { AccountInfoWrap } from '@/accounts/components/AccountInfo'
+
 import {
   Animations,
   BorderRad,
@@ -23,12 +25,12 @@ interface Props {
   onClick: () => void
   disabled?: boolean
   className?: string
-  isSmallVariant?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
-export const Option = ({ children, onClick, disabled, className, isSmallVariant }: Props) => (
+export const Option = ({ children, onClick, disabled, className, variant }: Props) => (
   <OptionComponentContainer onClick={onClick} disabled={disabled}>
-    <OptionComponent disabled={disabled} className={className} isSmallVariant={isSmallVariant}>
+    <OptionComponent disabled={disabled} className={className} variant={variant}>
       {children}
     </OptionComponent>
   </OptionComponentContainer>
@@ -56,9 +58,9 @@ export const SelectToggleButton = ({ isOpen, disabled, onToggleClick }: SelectTo
   </ToggleButton>
 )
 
-export const SelectedOption = styled.div<{ isSmallVariant?: boolean }>`
-  ${({ isSmallVariant }) =>
-    isSmallVariant
+export const SelectedOption = styled.div<{ variant?: 's' | 'm' | 'l' }>`
+  ${({ variant }) =>
+    variant === 's'
       ? css`
           display: flex;
           flex-direction: column;
@@ -70,6 +72,26 @@ export const SelectedOption = styled.div<{ isSmallVariant?: boolean }>`
             width: fit-content;
             margin-right: auto;
           }
+
+          ${AccountInfoWrap} {
+            grid-template-areas:
+              'accountphoto accounttype'
+              'accountphoto accountname'
+              'accountaddress accountaddress';
+          }
+        `
+      : variant === 'm'
+      ? css`
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: 1fr;
+
+          ${AccountInfoWrap} {
+            grid-template-areas:
+              'accountphoto accounttype'
+              'accountphoto accountname'
+              'accountaddress accountaddress';
+          }
         `
       : css`
           display: grid;
@@ -152,9 +174,9 @@ export const OptionComponentContainer = styled.li<{ disabled?: boolean }>`
   }}
 `
 
-export const OptionComponent = styled.div<{ disabled?: boolean; isSmallVariant?: boolean }>`
-  ${({ isSmallVariant }) =>
-    isSmallVariant
+export const OptionComponent = styled.div<{ disabled?: boolean; variant?: 's' | 'm' | 'l' }>`
+  ${({ variant }) =>
+    variant === 's' || variant === 'm'
       ? css`
           display: flex;
           flex-direction: column;
diff --git a/packages/ui/src/common/modals/TransactionModal/MultiTransactionModalHeader.tsx b/packages/ui/src/common/modals/TransactionModal/MultiTransactionModalHeader.tsx
index d8dd793e9d..9c2688ba44 100644
--- a/packages/ui/src/common/modals/TransactionModal/MultiTransactionModalHeader.tsx
+++ b/packages/ui/src/common/modals/TransactionModal/MultiTransactionModalHeader.tsx
@@ -11,16 +11,19 @@ type MultiTransactionModalHeaderParams = {
   transactionSteps: TransactionStep[]
 }
 
-export const MultiTransactionModalHeader = (props: MultiTransactionModalHeaderParams) => (
-  <ModalCustomContentHeader onClick={props.onClick}>
-    {props.transactionSteps.map((step, index) => (
-      <MultiTransactionStep
-        key={index}
-        stepNumber={index + 1}
-        stepTitle={step.title}
-        active={index === props.active}
-        past={index < props.active}
-      />
-    ))}
-  </ModalCustomContentHeader>
-)
+export const MultiTransactionModalHeader = (props: MultiTransactionModalHeaderParams) => {
+  return (
+    <ModalCustomContentHeader onClick={props.onClick}>
+      {props.transactionSteps.map((step, index) => (
+        <MultiTransactionStep
+          key={index}
+          stepNumber={index + 1}
+          stepTitle={step.title}
+          active={index === props.active}
+          past={index < props.active}
+          showInfo={props.transactionSteps.length < 3 || index === props.active}
+        />
+      ))}
+    </ModalCustomContentHeader>
+  )
+}
diff --git a/packages/ui/src/common/modals/TransactionModal/MultiTransactionStep.tsx b/packages/ui/src/common/modals/TransactionModal/MultiTransactionStep.tsx
index da39b0e6a9..cf79a9b682 100644
--- a/packages/ui/src/common/modals/TransactionModal/MultiTransactionStep.tsx
+++ b/packages/ui/src/common/modals/TransactionModal/MultiTransactionStep.tsx
@@ -10,9 +10,10 @@ export interface MultiTransactionStepProps {
   stepTitle: string
   active: boolean
   past: boolean
+  showInfo: boolean
 }
 
-export const MultiTransactionStep = ({ stepNumber, stepTitle, active, past }: MultiTransactionStepProps) => {
+export const MultiTransactionStep = ({ stepNumber, stepTitle, active, past, showInfo }: MultiTransactionStepProps) => {
   return (
     <Step active={active} past={past}>
       <StepArrow>
@@ -20,10 +21,12 @@ export const MultiTransactionStep = ({ stepNumber, stepTitle, active, past }: Mu
       </StepArrow>
       <StepContent>
         <StepNumber>{stepNumber}</StepNumber>
-        <StepInfo>
-          <StepTransactionInfo lighter>Transaction {stepNumber}</StepTransactionInfo>
-          <StepTransactionTitle bold>{stepTitle}</StepTransactionTitle>
-        </StepInfo>
+        {showInfo && (
+          <StepInfo>
+            <StepTransactionInfo lighter>Transaction {stepNumber}</StepTransactionInfo>
+            <StepTransactionTitle bold>{stepTitle}</StepTransactionTitle>
+          </StepInfo>
+        )}
       </StepContent>
     </Step>
   )
@@ -72,10 +75,6 @@ const StepInfo = styled.div`
   height: 100%;
   max-width: 100%;
   overflow: hidden;
-
-  @media (max-width: 1023px) {
-    display: none;
-  }
 `
 
 const StepTransactionInfo = styled(TextInlineSmall)`
diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/components/RewardAccountStep.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/components/RewardAccountStep.tsx
index 071e2c250d..910993476e 100644
--- a/packages/ui/src/council/modals/AnnounceCandidacy/components/RewardAccountStep.tsx
+++ b/packages/ui/src/council/modals/AnnounceCandidacy/components/RewardAccountStep.tsx
@@ -7,7 +7,7 @@ import { RowGapBlock } from '@/common/components/page/PageContent'
 import { useResponsive } from '@/common/hooks/useResponsive'
 
 export const RewardAccountStep = () => {
-  const { isMobile } = useResponsive()
+  const { isMobile, size } = useResponsive()
   return (
     <RowGapBlock gap={24}>
       <Row>
@@ -23,7 +23,7 @@ export const RewardAccountStep = () => {
             required
             inputSize={isMobile ? 'xxl' : 'l'}
           >
-            <SelectAccount name="reward.account" isSmallVariant={isMobile} />
+            <SelectAccount name="reward.account" variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'} />
           </InputComponent>
         </RowGapBlock>
       </Row>
diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx
index 8dbc5a221e..b79de34b12 100644
--- a/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx
+++ b/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx
@@ -22,7 +22,7 @@ interface StakingStepProps extends ValidationHelpers {
 }
 
 export const StakeStep = ({ candidacyMember, minStake, errorChecker, errorMessageGetter }: StakingStepProps) => {
-  const { isMobile } = useResponsive()
+  const { isMobile, size } = useResponsive()
   const form = useFormContext()
   const [stake] = form.watch(['staking.amount'])
   const balances = useMyBalances()
@@ -60,7 +60,7 @@ export const StakeStep = ({ candidacyMember, minStake, errorChecker, errorMessag
               name="staking.account"
               minBalance={minStake}
               lockType="Council Candidate"
-              isSmallVariant={isMobile}
+              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
             />
           </InputComponent>
           <RowGapBlock gap={8}>
diff --git a/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx b/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
index cb8d34ba85..cb1558e4e0 100644
--- a/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
+++ b/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
@@ -52,5 +52,4 @@ const HeaderImage = styled(UserImage)`
 `
 
 const Title = styled.h4`
-  word-break: break-word;
 `
diff --git a/packages/ui/src/forum/components/ThreadCard/ThreadCard.tsx b/packages/ui/src/forum/components/ThreadCard/ThreadCard.tsx
index 0c95b8695d..949e47e428 100644
--- a/packages/ui/src/forum/components/ThreadCard/ThreadCard.tsx
+++ b/packages/ui/src/forum/components/ThreadCard/ThreadCard.tsx
@@ -44,19 +44,32 @@ export const ThreadCard = ({ thread, className, watchlistButton }: ThreadCardPro
       <TextMedium light truncateLines={3}>
         {thread.initialPostText}
       </TextMedium>
-      <ColumnGapBlock justify="space-between" align="center">
+      <ThreadCardFooter>
+        {watchlistButton && <WatchlistButton threadId={thread.id} />}
         {replies > 0 && (
           <ColumnGapBlock gap={8}>
             <ReplyIcon />
             <CountBadge count={replies} />
           </ColumnGapBlock>
         )}
-        {watchlistButton && <WatchlistButton threadId={thread.id} />}
-      </ColumnGapBlock>
+      </ThreadCardFooter>
     </Box>
   )
 }
 
+const ThreadCardFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row-reverse;
+
+  @media (max-width: 419px) {
+    align-items: start;
+    flex-direction: column-reverse;
+    row-gap: 16px;
+  }
+`
+
 const Box = styled(GhostRouterLink)<{ isArchived: boolean }>`
   ${({ isArchived }) => (isArchived ? `background-color: ${Colors.Black[50]}` : '')};
   display: grid;
@@ -114,8 +127,4 @@ const Box = styled(GhostRouterLink)<{ isArchived: boolean }>`
       color: ${Colors.Black[400]};
     }
   }
-
-  ${TextMedium} {
-    max-height: 55px;
-  }
 `
diff --git a/packages/ui/src/forum/components/category/ForumMain.tsx b/packages/ui/src/forum/components/category/ForumMain.tsx
index 8a0d1aafa9..21d6213188 100644
--- a/packages/ui/src/forum/components/category/ForumMain.tsx
+++ b/packages/ui/src/forum/components/category/ForumMain.tsx
@@ -64,12 +64,16 @@ export const ForumMain = () => {
 }
 export const CategoriesListWrapper = styled.div`
   display: grid;
-  grid-gap: 20px;
+  grid-gap: 16px;
   grid-template-columns: repeat(auto-fill, minmax(540px, 1fr));
 
   @media (max-width: 767px) {
     grid-template-columns: 1fr;
   }
+
+  @media (min-width: 1440px) {
+    grid-gap: 24px;
+  }
 `
 
 const StyledThreadCard = styled(ThreadCard)`
diff --git a/packages/ui/src/forum/components/threads/ThreadList.tsx b/packages/ui/src/forum/components/threads/ThreadList.tsx
index 78ab6c7606..1dd432fd65 100644
--- a/packages/ui/src/forum/components/threads/ThreadList.tsx
+++ b/packages/ui/src/forum/components/threads/ThreadList.tsx
@@ -83,11 +83,17 @@ export const ThreadList = ({
   )
 }
 
-const ThreadCardsStyles = styled.div`
+export const ThreadCardsStyles = styled.div`
   display: grid;
-  padding: 20px 0;
-  grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  grid-gap: 16px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 1440px) {
+    grid-gap: 24px;
+  }
 `
 
 const ThreadListStyles = styled(RowGapBlock)`
diff --git a/packages/ui/src/forum/components/threads/ThreadListItem.tsx b/packages/ui/src/forum/components/threads/ThreadListItem.tsx
index 5c54f610cd..c821214f42 100644
--- a/packages/ui/src/forum/components/threads/ThreadListItem.tsx
+++ b/packages/ui/src/forum/components/threads/ThreadListItem.tsx
@@ -58,10 +58,11 @@ const ThreadPinIcon = styled(PinIcon)`
 `
 
 const ThreadListItemStyles = styled(TableListItem).attrs({ $colLayout: ThreadsColLayout })<{ $isSticky?: boolean }>`
-  grid-column-gap: 12px;
-  height: 80px;
-  padding: 12px 24px;
+  grid-column-gap: 14px;
+  height: 86px;
+  padding: 14px 24px;
   position: relative;
+  min-width: 1024px;
 
   ${({ $isSticky }) =>
     $isSticky &&
diff --git a/packages/ui/src/forum/modals/CreateThreadModal/CreateThreadDetailsModal.tsx b/packages/ui/src/forum/modals/CreateThreadModal/CreateThreadDetailsModal.tsx
index 5616689e31..38996b0819 100644
--- a/packages/ui/src/forum/modals/CreateThreadModal/CreateThreadDetailsModal.tsx
+++ b/packages/ui/src/forum/modals/CreateThreadModal/CreateThreadDetailsModal.tsx
@@ -51,7 +51,7 @@ export const CreateThreadDetailsModal = ({ breadcrumbs, author, send }: Props) =
 
   return (
     <>
-      <ScrolledModal onClose={hideModal} modalSize="l">
+      <ScrolledModal onClose={hideModal} modalSize="m">
         <ModalHeader title="Create a thread" onClick={hideModal} />
         <ScrolledModalBody>
           <ScrolledModalContainer>
diff --git a/packages/ui/src/forum/modals/PostReplyModal/PostReplyModal.tsx b/packages/ui/src/forum/modals/PostReplyModal/PostReplyModal.tsx
index 5f079acd2c..7dfa9a5e6a 100644
--- a/packages/ui/src/forum/modals/PostReplyModal/PostReplyModal.tsx
+++ b/packages/ui/src/forum/modals/PostReplyModal/PostReplyModal.tsx
@@ -59,7 +59,7 @@ export const PostReplyModal = () => {
 
   if (state.matches(PostReplyStateName.prepare))
     return (
-      <ScrolledModal onClose={hideModal} modalSize="l">
+      <ScrolledModal onClose={hideModal} modalSize="m">
         <ModalHeader title="Reply" onClick={hideModal} />
         <ModalBody>
           <MainContainer>
diff --git a/packages/ui/src/proposals/components/RationalePreview/RationalePreview.tsx b/packages/ui/src/proposals/components/RationalePreview/RationalePreview.tsx
index af98fa12ef..4743605950 100644
--- a/packages/ui/src/proposals/components/RationalePreview/RationalePreview.tsx
+++ b/packages/ui/src/proposals/components/RationalePreview/RationalePreview.tsx
@@ -33,7 +33,6 @@ const RationaleSection = styled(RowGapBlock).attrs({ gap: 24 })`
   background: ${Colors.Black[50]};
   border: 1px solid ${Colors.Black[200]};
   border-radius: ${BorderRad.s};
-  word-break: break-word;
 `
 
 const RationaleToggle = styled.label`
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/FundingRequest.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/FundingRequest.tsx
index b631f8b41d..8cee121b0b 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/FundingRequest.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/FundingRequest.tsx
@@ -12,6 +12,7 @@ import {
   ToggleCheckbox,
   TokenInput,
   InputTextarea,
+  TokenInputComponent,
 } from '@/common/components/forms'
 import { Arrow } from '@/common/components/icons'
 import { Row } from '@/common/components/Modal'
@@ -25,7 +26,7 @@ import { ErrorPrompt, Prompt } from './Prompt'
 
 export const FundingRequest = () => {
   const { watch, setValue, getFieldState } = useFormContext()
-  const { isMobile } = useResponsive()
+  const { isMobile, size } = useResponsive()
   const [isPreviewModalShown, setIsPreviewModalShown] = useState(false)
   const [payMultiple] = watch(['fundingRequest.payMultiple'])
   const [hasPreviewedInput] = watch(['fundingRequest.hasPreviewedInput'], { 'fundingRequest.hasPreviewedInput': true })
@@ -110,7 +111,7 @@ export const FundingRequest = () => {
           </RowGapBlock>
         ) : (
           <RowGapBlock gap={20}>
-            <InputComponent
+            <TokenInputComponent
               label="Amount"
               tight
               units={CurrencyName.integerValue}
@@ -119,9 +120,9 @@ export const FundingRequest = () => {
               name="fundingRequest.amount"
             >
               <TokenInput id="amount-input" placeholder="0" name="fundingRequest.amount" />
-            </InputComponent>
+            </TokenInputComponent>
             <InputComponent label="Recipient account" required inputSize={isMobile ? 'xxl' : 'l'}>
-              <SelectAccount name="fundingRequest.account" isSmallVariant={isMobile} />
+              <SelectAccount name="fundingRequest.account" variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'} />
             </InputComponent>
           </RowGapBlock>
         )}
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilBudgetIncrement.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilBudgetIncrement.tsx
index 85f02ebe50..96a7ef3a0d 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilBudgetIncrement.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilBudgetIncrement.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CurrencyName } from '@/app/constants/currency'
-import { InputComponent, TokenInput } from '@/common/components/forms'
+import { TokenInput, TokenInputComponent } from '@/common/components/forms'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextMedium } from '@/common/components/typography'
@@ -17,7 +17,7 @@ export const SetCouncilBudgetIncrement = () => {
       </Row>
       <Row>
         <RowGapBlock gap={20}>
-          <InputComponent
+          <TokenInputComponent
             label="New Council Budget Increment Value"
             tight
             units={CurrencyName.integerValue}
@@ -26,7 +26,7 @@ export const SetCouncilBudgetIncrement = () => {
             message="Value must be greater than zero"
           >
             <TokenInput id="amount-input" name="setCouncilBudgetIncrement.amount" placeholder="0" />
-          </InputComponent>
+          </TokenInputComponent>
         </RowGapBlock>
       </Row>
     </RowGapBlock>
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilorReward.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilorReward.tsx
index a754b90277..e3d681ee75 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilorReward.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetCouncilorReward.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CurrencyName } from '@/app/constants/currency'
-import { InputComponent, TokenInput } from '@/common/components/forms'
+import { TokenInput, TokenInputComponent } from '@/common/components/forms'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextMedium } from '@/common/components/typography'
@@ -17,7 +17,7 @@ export const SetCouncilorReward = () => {
       </Row>
       <Row>
         <RowGapBlock gap={20}>
-          <InputComponent
+          <TokenInputComponent
             label="New Councilor Reward"
             tight
             units={CurrencyName.integerValue}
@@ -25,7 +25,7 @@ export const SetCouncilorReward = () => {
             name="setCouncilorReward.amount"
           >
             <TokenInput id="amount-input" name="setCouncilorReward.amount" placeholder="0" />
-          </InputComponent>
+          </TokenInputComponent>
         </RowGapBlock>
       </Row>
     </RowGapBlock>
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetInitialInvitationBalance.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetInitialInvitationBalance.tsx
index 83b01d1cc2..3287408377 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetInitialInvitationBalance.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetInitialInvitationBalance.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { useApi } from '@/api/hooks/useApi'
 import { CurrencyName } from '@/app/constants/currency'
-import { InputComponent, TokenInput } from '@/common/components/forms'
+import { TokenInput, TokenInputComponent } from '@/common/components/forms'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextMedium, TokenValue } from '@/common/components/typography'
@@ -25,7 +25,7 @@ export const SetInitialInvitationBalance = () => {
       </Row>
       <Row>
         <RowGapBlock gap={12}>
-          <InputComponent
+          <TokenInputComponent
             name="setInitialInvitationBalance.amount"
             label="Invitation Balance"
             tight
@@ -33,7 +33,7 @@ export const SetInitialInvitationBalance = () => {
             required
           >
             <TokenInput id="amount-input" name="setInitialInvitationBalance.amount" placeholder="0" />
-          </InputComponent>
+          </TokenInputComponent>
           <Row>
             <TextMedium lighter>
               The current balance is <TokenValue value={currentBalance ?? null} />.
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetMembershipPrice.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetMembershipPrice.tsx
index be19c4d8cd..f5ab322f26 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetMembershipPrice.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetMembershipPrice.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CurrencyName } from '@/app/constants/currency'
-import { InputComponent, TokenInput } from '@/common/components/forms'
+import { TokenInput, TokenInputComponent } from '@/common/components/forms'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextMedium } from '@/common/components/typography'
@@ -17,7 +17,7 @@ export const SetMembershipPrice = () => {
       </Row>
       <Row>
         <RowGapBlock gap={20}>
-          <InputComponent
+          <TokenInputComponent
             label="Membership price"
             tight
             units={CurrencyName.integerValue}
@@ -26,7 +26,7 @@ export const SetMembershipPrice = () => {
             name="setMembershipPrice.amount"
           >
             <TokenInput id="amount-input" name="setMembershipPrice.amount" placeholder="0" />
-          </InputComponent>
+          </TokenInputComponent>
         </RowGapBlock>
       </Row>
     </RowGapBlock>
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/UpdateChannelPayouts/UpdateChannelPayouts.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/UpdateChannelPayouts/UpdateChannelPayouts.tsx
index eb30c61dcc..86d90ee1f1 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/UpdateChannelPayouts/UpdateChannelPayouts.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/UpdateChannelPayouts/UpdateChannelPayouts.tsx
@@ -12,6 +12,7 @@ import {
   Label,
   ToggleCheckbox,
   TokenInput,
+  TokenInputComponent,
 } from '@/common/components/forms'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
@@ -163,25 +164,25 @@ export const UpdateChannelPayouts = () => {
       </Row>
 
       <Row>
-        <InputComponent
+        <TokenInputComponent
           label="Minimum Cashout Allowed"
           tight
           units={CurrencyName.integerValue}
           name="updateChannelPayouts.minimumCashoutAllowed"
         >
           <TokenInput id="amount-input" name="updateChannelPayouts.minimumCashoutAllowed" placeholder="0" />
-        </InputComponent>
+        </TokenInputComponent>
       </Row>
 
       <Row>
-        <InputComponent
+        <TokenInputComponent
           label="Maximum Cashout Allowed"
           tight
           units={CurrencyName.integerValue}
           name="updateChannelPayouts.maximumCashoutAllowed"
         >
           <TokenInput id="amount-input" name="updateChannelPayouts.maximumCashoutAllowed" placeholder="0" />
-        </InputComponent>
+        </TokenInputComponent>
       </Row>
 
       {/*<Row>*/}
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx
index 612316ce5a..a5b6382eb3 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx
@@ -13,7 +13,7 @@ interface StakingAccountStepProps {
 }
 
 export const StakingAccountStep = ({ requiredStake }: StakingAccountStepProps) => {
-  const { isMobile } = useResponsive()
+  const { isMobile, size } = useResponsive()
   return (
     <RowGapBlock gap={24}>
       <Row>
@@ -45,7 +45,7 @@ export const StakingAccountStep = ({ requiredStake }: StakingAccountStepProps) =
               name="stakingAccount.stakingAccount"
               minBalance={requiredStake}
               lockType="Proposals"
-              isSmallVariant={isMobile}
+              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
             />
           </InputComponent>
         </RowGapBlock>
diff --git a/packages/ui/src/working-groups/components/ApplicationsList.tsx b/packages/ui/src/working-groups/components/ApplicationsList.tsx
index 500a5ec297..36a68e6428 100644
--- a/packages/ui/src/working-groups/components/ApplicationsList.tsx
+++ b/packages/ui/src/working-groups/components/ApplicationsList.tsx
@@ -87,9 +87,9 @@ const ApplicationListItem = ({ application, past }: { application: WorkingGroupA
           <ToggleableSubscriptionWide>Reward per {rewardPeriod?.toString()} blocks.</ToggleableSubscriptionWide>
         </OpenItemSummaryColumn>
         <OpenItemSummaryColumn>
-          <TextInlineBig>
+          <TokenValueWrap>
             <TokenValue value={application.stake} />
-          </TextInlineBig>
+          </TokenValueWrap>
           <Subscription>Staked</Subscription>
         </OpenItemSummaryColumn>
         <OpenItemSummaryColumn>
@@ -113,4 +113,10 @@ const Title = styled(ToggleableItemTitle)`
 
 const ListWrapper = styled(List)`
   overflow: auto;
+  ${ListItem} {
+    min-width: 794px;
+  }
+`
+const TokenValueWrap = styled(TextInlineBig)`
+  width: 120px;
 `
diff --git a/packages/ui/src/working-groups/components/OpeningsList/OpeningsList.tsx b/packages/ui/src/working-groups/components/OpeningsList/OpeningsList.tsx
index 9054d541e0..74680eaafa 100644
--- a/packages/ui/src/working-groups/components/OpeningsList/OpeningsList.tsx
+++ b/packages/ui/src/working-groups/components/OpeningsList/OpeningsList.tsx
@@ -27,6 +27,6 @@ const ListWrapper = styled(List)`
   overflow: auto;
 
   > li {
-    min-width: 850px;
+    min-width: 750px;
   }
 `
diff --git a/packages/ui/src/working-groups/components/WorkingGroupsList.tsx b/packages/ui/src/working-groups/components/WorkingGroupsList.tsx
index 159fa0f1a6..18150ff1c9 100644
--- a/packages/ui/src/working-groups/components/WorkingGroupsList.tsx
+++ b/packages/ui/src/working-groups/components/WorkingGroupsList.tsx
@@ -69,7 +69,7 @@ const GroupList = styled.section`
   grid-template-columns: 1fr;
   grid-auto-rows: 108px;
   grid-row-gap: 8px;
-  width: 100%;
+  min-width: 1123px;
 `
 const WorkingGroupListStyles = styled(RowGapBlock)`
   overflow: auto;
diff --git a/packages/ui/src/working-groups/modals/ApplyForRoleModal/StakeStep.tsx b/packages/ui/src/working-groups/modals/ApplyForRoleModal/StakeStep.tsx
index 4919907fc8..20d0e3f0e6 100644
--- a/packages/ui/src/working-groups/modals/ApplyForRoleModal/StakeStep.tsx
+++ b/packages/ui/src/working-groups/modals/ApplyForRoleModal/StakeStep.tsx
@@ -8,6 +8,7 @@ import { InputComponent, TokenInput } from '@/common/components/forms'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextMedium, TokenValue } from '@/common/components/typography'
+import { useResponsive } from '@/common/hooks/useResponsive'
 import { formatJoyValue } from '@/common/model/formatters'
 import { ValidationHelpers } from '@/common/utils/validation'
 
@@ -25,6 +26,7 @@ export interface StakeStepFormFields {
 }
 
 export function StakeStep({ opening, errorChecker, errorMessageGetter }: StakeStepProps) {
+  const { isMobile, size } = useResponsive()
   const minStake = opening.stake
 
   return (
@@ -36,7 +38,7 @@ export function StakeStep({ opening, errorChecker, errorMessageGetter }: StakeSt
           <InputComponent
             label="Select account for Staking"
             required
-            inputSize="l"
+            inputSize={isMobile ? 'xxl' : 'l'}
             validation={errorChecker('account') ? 'invalid' : undefined}
             message={errorChecker('account') ? errorMessageGetter('account') : undefined}
             tooltipText="Staking account will bear the role-specific lock, meaning you will not be able to re-use this account for other purposes, while in the role if your application accepted"
@@ -45,6 +47,7 @@ export function StakeStep({ opening, errorChecker, errorMessageGetter }: StakeSt
               name="stake.account"
               minBalance={minStake}
               lockType={groupToLockId(opening.groupId)}
+              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
             />
           </InputComponent>
           <RowGapBlock gap={8}>
@@ -74,12 +77,16 @@ export function StakeStep({ opening, errorChecker, errorMessageGetter }: StakeSt
             label="Select Role Account"
             id="role-account"
             required
-            inputSize="l"
+            inputSize={isMobile ? 'xxl' : 'l'}
             validation={errorChecker('roleAccount') ? 'invalid' : undefined}
             message={errorChecker('roleAccount') ? errorMessageGetter('account') : undefined}
             tooltipText="We strongly advise you to use a separate role-dedicated account for this application. Role account is used to perform all role-specific actions. This should not be your Controller or Root account, even though this is technically possible."
           >
-            <SelectAccount id="role-account" name="stake.roleAccount" />
+            <SelectAccount
+              id="role-account"
+              name="stake.roleAccount"
+              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
+            />
           </InputComponent>
 
           <h4>4. Select Reward Account</h4>
@@ -90,12 +97,16 @@ export function StakeStep({ opening, errorChecker, errorMessageGetter }: StakeSt
             label="Select Reward Account"
             id="reward-account"
             required
-            inputSize="l"
+            inputSize={isMobile ? 'xxl' : 'l'}
             validation={errorChecker('rewardAccount') ? 'invalid' : undefined}
             message={errorChecker('rewardAccount') ? errorMessageGetter('rewardAccount') : undefined}
             tooltipText="Member controller or root accounts are often chosen for this purpose."
           >
-            <SelectAccount id="reward-account" name="stake.rewardAccount" />
+            <SelectAccount
+              id="reward-account"
+              name="stake.rewardAccount"
+              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
+            />
           </InputComponent>
         </RowGapBlock>
       </Row>

From 12305d2911ec94b8b6f1c2b278b843795f0130c3 Mon Sep 17 00:00:00 2001
From: eshark9312 <eshark9312@outlook.com>
Date: Tue, 21 Nov 2023 00:32:00 -0500
Subject: [PATCH 2/5] fix statitics

---
 .../src/accounts/components/AccountInfo.tsx   |  5 +++--
 .../SelectAccount/OptionAccount.tsx           |  5 +++--
 .../SelectAccount/OptionListAccount.tsx       |  2 +-
 packages/ui/src/app/pages/Council/Council.tsx | 13 ++++++++++--
 .../pages/WorkingGroups/MyRoles/MyRole.tsx    | 16 +++++++++++++--
 .../pages/WorkingGroups/MyRoles/MyRoles.tsx   | 17 ++++++++++++++--
 .../WorkingGroups/WorkingGroupsOpening.tsx    | 17 +++++++++++++---
 .../WorkingGroups/WorkingGroupsOpenings.tsx   | 13 ++++++++++--
 .../election/CandidateCard/CandidateCard.tsx  |  1 +
 .../CandidacyPreview/CandidacyDetails.tsx     |  3 +--
 .../modals/RestoreVotes/RestoreVotesModal.tsx |  2 +-
 .../components/ProposalList/ProposalList.tsx  |  2 +-
 .../VoteForProposalModalForm.tsx              | 20 +++++++++++++++++--
 .../OpeningsList/Opening/OpeningDetails.tsx   | 12 +++++++++--
 14 files changed, 104 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/accounts/components/AccountInfo.tsx b/packages/ui/src/accounts/components/AccountInfo.tsx
index c00d0963b8..4e5bc5569d 100644
--- a/packages/ui/src/accounts/components/AccountInfo.tsx
+++ b/packages/ui/src/accounts/components/AccountInfo.tsx
@@ -16,16 +16,17 @@ import { Account } from '../types'
 interface AccountInfoProps {
   account: Account
   locked?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
-export const AccountInfo = React.memo(({ account, locked }: AccountInfoProps) => {
+export const AccountInfo = React.memo(({ account, locked, variant }: AccountInfoProps) => {
   const { active } = useMyMemberships()
 
   return (
     <AccountInfoWrap>
       <PhotoWrapper>
         <AccountPhoto>
-          <Identicon size={40} theme={'beachball'} value={account.address} />
+          <Identicon size={variant === 's' || variant === 'm' ? 28 : 40} theme={'beachball'} value={account.address} />
         </AccountPhoto>
         {locked && (
           <LockIconWrapper>
diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx
index 6bd04dbbb7..ca68033611 100644
--- a/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx
@@ -12,9 +12,10 @@ import { Colors } from '@/common/constants'
 interface Props {
   option: AccountOption
   isForStaking?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
-export const OptionAccount = ({ option, isForStaking }: Props) => {
+export const OptionAccount = ({ option, isForStaking, variant }: Props) => {
   const balances = useBalance(option.address)
   const balance = isForStaking ? balances?.total : balances?.transferable
   const balanceType = isForStaking ? 'Total' : 'Transferable'
@@ -23,7 +24,7 @@ export const OptionAccount = ({ option, isForStaking }: Props) => {
 
   return (
     <>
-      <AccountInfo account={option} locked={isLocked} />
+      <AccountInfo account={option} locked={isLocked} variant={variant} />
       <BalanceInfoNarrow>
         <InfoTitle>{balanceType} balance</InfoTitle>
         <InfoValueWithLocks>
diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
index 6b94477c93..226acfa929 100644
--- a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
@@ -22,7 +22,7 @@ export const OptionListAccount = React.memo(({ options, onChange, className, isF
     <OptionsListComponent className={className}>
       {freeAccounts.map((option) => (
         <Option key={option.address} onClick={() => onChange && onChange(option)} variant={variant}>
-          <OptionAccount option={option} isForStaking={isForStaking} />
+          <OptionAccount option={option} isForStaking={isForStaking} variant={variant} />
         </Option>
       ))}
       {lockedAccounts.map((option) => (
diff --git a/packages/ui/src/app/pages/Council/Council.tsx b/packages/ui/src/app/pages/Council/Council.tsx
index 3f53eb6719..3bd7fa0d16 100644
--- a/packages/ui/src/app/pages/Council/Council.tsx
+++ b/packages/ui/src/app/pages/Council/Council.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react'
+import styled from 'styled-components'
 
 import { PageHeaderWithHint } from '@/app/components/PageHeaderWithHint'
 import { PageLayout } from '@/app/components/PageLayout'
@@ -43,7 +44,7 @@ export const Council = () => {
   const rewardPerDay = useMemo(() => reward?.period?.mul(reward?.amount ?? asBN(0)) ?? asBN(0), [reward])
   const main = (
     <MainPanel>
-      <Statistics>
+      <StatisticsStyle>
         {electionStage === 'inactive' ? (
           <BlockDurationStatistics title="Normal period remaining length" value={idlePeriodRemaining} />
         ) : (
@@ -64,7 +65,7 @@ export const Council = () => {
             { label: 'Per Week', value: rewardPerDay.mul(asBN(7)) },
           ]}
         />
-      </Statistics>
+      </StatisticsStyle>
 
       {!isCouncilorLoading && sortedCouncilors.length === 0 ? (
         <NotFoundText>There is no council member at the moment</NotFoundText>
@@ -92,3 +93,11 @@ const sortBy = ({ key, isDescending }: CouncilOrder): ((a: Councilor, b: Council
       return (a, b) => (asBN(a[key] ?? 0).gte(asBN(b[key] ?? 0)) ? 1 : -1) * direction
   }
 }
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`
diff --git a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
index 4ca1ab1f85..b8286e4f3c 100644
--- a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
+++ b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
@@ -151,12 +151,12 @@ export const MyRole = () => {
                 </BadgeStatus>
               )}
             </BadgesRow>
-            <Statistics>
+            <StatisticsStyle>
               <MyEarningsStat />
               <StakeStat value={worker.stake} minStake={worker.minStake} />
               <TokenValueStat title="Owed reward" value={worker.owedReward} />
               <NextPayoutStat workers={[worker]} />
-            </Statistics>
+            </StatisticsStyle>
           </RowGapBlock>
         </PageHeaderWrapper>
       }
@@ -256,3 +256,15 @@ export const PageHeaderWithButtons = styled(PageHeaderRow)`
     }
   }
 `
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`
diff --git a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRoles.tsx b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRoles.tsx
index 3f65d85ab5..d8570662d5 100644
--- a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRoles.tsx
+++ b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRoles.tsx
@@ -1,5 +1,6 @@
 import BN from 'bn.js'
 import React from 'react'
+import styled from 'styled-components'
 
 import { PageLayout, PageHeaderWrapper } from '@/app/components/PageLayout'
 import { Loading } from '@/common/components/Loading'
@@ -58,15 +59,27 @@ export const MyRoles = () => {
       }
       main={
         <MainPanel>
-          <Statistics>
+          <StatisticsStyle>
             <MyEarningsStat />
             <MyStakeStat />
             <TokenValueStat title="Total owed reward" value={owedReward} />
             <NextPayoutStat workers={workers} />
-          </Statistics>
+          </StatisticsStyle>
           {displayRoles()}
         </MainPanel>
       }
     />
   )
 }
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`
diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
index 3d21c827ae..57e32ec0b4 100644
--- a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
+++ b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
@@ -148,7 +148,7 @@ export const WorkingGroupOpening = () => {
               </BadgeStatus>
               <StatusBadge />
             </BadgesRow>
-            <Statistics>
+            <StatisticsStyle>
               <DurationStatistics title="Time Left" value={opening.expectedEnding} />
               <TokenValueStat
                 title={`Reward per ${rewardPeriod?.toString()} blocks`}
@@ -166,7 +166,7 @@ export const WorkingGroupOpening = () => {
                 hiring={opening.hiring}
                 status={opening.status}
               />
-            </Statistics>
+            </StatisticsStyle>
           </RowGapBlock>
         </PageHeaderWrapper>
       }
@@ -226,7 +226,6 @@ const ApplicationStatsStyles = styled(StatsBlock).attrs({ centered: true })`
   justify-content: start;
 `
 
-
 const ResponsiveStyle = css`
   aside {
     > div {
@@ -255,3 +254,15 @@ const ResponsiveStyle = css`
     }
   }
 `
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`
diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpenings.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpenings.tsx
index da1b447ffd..55b025c5c2 100644
--- a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpenings.tsx
+++ b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpenings.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import styled from 'styled-components'
 
 import { PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { ActivitiesBlock } from '@/common/components/Activities/ActivitiesBlock'
@@ -60,11 +61,11 @@ export const WorkingGroupsOpenings = () => {
       }
       main={
         <MainPanel>
-          <Statistics>
+          <StatisticsStyle>
             <MyRolesStat />
             <MyStakeStat />
             <MyEarningsStat />
-          </Statistics>
+          </StatisticsStyle>
           <ContentWithTabs>
             <Tabs tabsSize="xs" tabs={openingsTabs} />
             {activeTab === 'OPENINGS' && (
@@ -84,3 +85,11 @@ export const WorkingGroupsOpenings = () => {
     />
   )
 }
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`
diff --git a/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx b/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx
index fca27de8d4..8cfc22580d 100644
--- a/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx
+++ b/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx
@@ -210,6 +210,7 @@ const CandidateCardStakeAndControls = styled.div`
   width: fit-content;
   column-gap: 32px;
   margin-top: auto;
+  flex-wrap: wrap;
 `
 
 const CandidateCardStatistics = styled.div`
diff --git a/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx b/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
index cb1558e4e0..3d0e815bd3 100644
--- a/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
+++ b/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
@@ -51,5 +51,4 @@ const HeaderImage = styled(UserImage)`
   width: 100%;
 `
 
-const Title = styled.h4`
-`
+const Title = styled.h4``
diff --git a/packages/ui/src/council/modals/RestoreVotes/RestoreVotesModal.tsx b/packages/ui/src/council/modals/RestoreVotes/RestoreVotesModal.tsx
index 868fba08e8..ff2c1b7586 100644
--- a/packages/ui/src/council/modals/RestoreVotes/RestoreVotesModal.tsx
+++ b/packages/ui/src/council/modals/RestoreVotes/RestoreVotesModal.tsx
@@ -92,7 +92,7 @@ export const RestoreVotesModal = () => {
   }, [value, votingAttempts, setVotingAttempts])
 
   return (
-    <Modal modalSize="s" modalHeight="s" onClose={hideModal}>
+    <Modal modalSize="m" modalHeight="s" onClose={hideModal}>
       <ModalHeader title="Restore Votes" onClick={hideModal} />
 
       <ModalBody>
diff --git a/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx b/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx
index 024ac38192..01a976134f 100644
--- a/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx
+++ b/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx
@@ -58,7 +58,7 @@ export const ProposalList = ({ proposals, getSortProps, isPast, isLoading }: Pro
 }
 
 const ProposalListWarpper = styled(List)`
-  media (max-width: 1439px) {
+  @media (max-width: 1439px) {
     row-gap: 16px;
   }
 `
diff --git a/packages/ui/src/proposals/modals/VoteForProposal/VoteForProposalModalForm.tsx b/packages/ui/src/proposals/modals/VoteForProposal/VoteForProposalModalForm.tsx
index 804571c0b8..ba07281a37 100644
--- a/packages/ui/src/proposals/modals/VoteForProposal/VoteForProposalModalForm.tsx
+++ b/packages/ui/src/proposals/modals/VoteForProposal/VoteForProposalModalForm.tsx
@@ -62,7 +62,7 @@ export const VoteForProposalModalForm = ({ proposal, send, context }: Props) =>
               </RowGapBlock>
             </Row>
             <Row>
-              <ButtonsGroup>
+              <ResponsiveButtonsGroup>
                 <ButtonPrimary
                   size="medium"
                   onClick={() => send('SET_VOTE_STATUS', { status: 'Approve' })}
@@ -87,7 +87,7 @@ export const VoteForProposalModalForm = ({ proposal, send, context }: Props) =>
                   <CrossIcon />
                   Abstain
                 </ButtonPrimary>
-              </ButtonsGroup>
+              </ResponsiveButtonsGroup>
             </Row>
             {isRejected && (
               <InlineToggleWrap>
@@ -136,3 +136,19 @@ const ProposalPreviewColumn = styled(ScrollableModalColumn)`
   flex-direction: column;
   gap: 24px;
 `
+
+const ResponsiveButtonsGroup = styled(ButtonsGroup)`
+  @media(max-width: 1023px){
+    grid-auto-flow: row;
+    grid-row-gap: 8px;
+    width: 100%;
+
+    button, a {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center:
+      gap: 4px;
+    }
+  }
+`
diff --git a/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx b/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx
index 0894d6b5e4..89d239568f 100644
--- a/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx
+++ b/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx
@@ -39,7 +39,7 @@ export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps)
           <OpenedItemTitle>{opening.title}</OpenedItemTitle>
         </OpenedTop>
         <TextBig light>{opening.shortDescription}</TextBig>
-        <Statistics withMargin gapSize="s">
+        <StatisticsStyle withMargin>
           <StatsBlock size="m" centered>
             <TextBig>
               <TokenValue value={rewardPeriod?.mul(opening.rewardPerBlock)} />
@@ -79,7 +79,7 @@ export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps)
               </Tooltip>
             </MinStake>
           </StatsBlock>
-        </Statistics>
+        </StatisticsStyle>
         <ButtonsGroup align="right">
           <LinkButtonGhost to={openingRoute} size="medium">
             Learn more
@@ -104,3 +104,11 @@ const MinStake = styled(Subscription)`
   align-items: center;
   gap: 8px;
 `
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`

From 944a54b27e43102841b6a3396c2e1b9b19101751 Mon Sep 17 00:00:00 2001
From: eshark9312 <eshark9312@outlook.com>
Date: Tue, 21 Nov 2023 11:57:21 -0500
Subject: [PATCH 3/5] fix WorkingGroups page word-break

---
 .../ui/src/working-groups/components/WorkingGroupsList.tsx    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui/src/working-groups/components/WorkingGroupsList.tsx b/packages/ui/src/working-groups/components/WorkingGroupsList.tsx
index 18150ff1c9..a9ffbd5e94 100644
--- a/packages/ui/src/working-groups/components/WorkingGroupsList.tsx
+++ b/packages/ui/src/working-groups/components/WorkingGroupsList.tsx
@@ -85,4 +85,8 @@ const WorkingGroupListStyles = styled(RowGapBlock)`
   ${ListHeaders} {
     padding: 0 24px;
   }
+
+  * {
+    word-break: normal;
+  }
 `

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 4/5] 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`

From 8095d71ceb2870f791ed125288609a47772b1c94 Mon Sep 17 00:00:00 2001
From: eshark9312 <eshark9312@outlook.com>
Date: Wed, 22 Nov 2023 10:50:53 -0500
Subject: [PATCH 5/5] fix Tabs bottom line distance

---
 packages/ui/src/common/components/Tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/common/components/Tabs.tsx b/packages/ui/src/common/components/Tabs.tsx
index 51a07e3e6a..3adb118e19 100644
--- a/packages/ui/src/common/components/Tabs.tsx
+++ b/packages/ui/src/common/components/Tabs.tsx
@@ -64,7 +64,7 @@ const TabsStyles = styled.div<TabsSize>`
           content: '';
           position: absolute;
           left: 0;
-          bottom: -2px;
+          bottom: 0;
           width: calc(100%);
           height: 1px;
           background-color: ${Colors.Black[200]};