({
size: 'lg',
isMobile: false,
+ supportTransactions: true,
})
diff --git a/packages/ui/src/common/providers/responsive/provider.tsx b/packages/ui/src/common/providers/responsive/provider.tsx
index 58c3ac3332..9235d04275 100644
--- a/packages/ui/src/common/providers/responsive/provider.tsx
+++ b/packages/ui/src/common/providers/responsive/provider.tsx
@@ -32,6 +32,7 @@ export const ResponsiveProvider = (props: Props) => {
? 'xs'
: 'xxs',
isMobile: windowWidth < 1024,
+ supportTransactions: screen.width >= 768,
}),
[windowWidth]
)
diff --git a/packages/ui/src/memberships/components/MemberList/Members.tsx b/packages/ui/src/memberships/components/MemberList/Members.tsx
index e370cf3247..8dd2b8f672 100644
--- a/packages/ui/src/memberships/components/MemberList/Members.tsx
+++ b/packages/ui/src/memberships/components/MemberList/Members.tsx
@@ -1,4 +1,5 @@
import React from 'react'
+import styled from 'styled-components'
import { MembershipOrderByInput } from '@/common/api/queries'
import { List, ListItem } from '@/common/components/List'
@@ -30,7 +31,7 @@ export const MemberList = ({ isLoading, members, getSortProps, searchFilter }: M
}
return (
-
+
Memberships
Roles
@@ -48,6 +49,10 @@ export const MemberList = ({ isLoading, members, getSortProps, searchFilter }: M
))}
-
+
)
}
+
+const MemberListWrapper = styled.div`
+ overflow: auto;
+`
diff --git a/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx b/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx
index 4423a8abeb..0002736d7a 100644
--- a/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx
+++ b/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx
@@ -147,53 +147,54 @@ export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersPro
All members
-
- {
- dispatch({ type: 'change', field: 'roles', value })
- onApply({ ...filters, roles: value })
- }}
- onApply={applyFilters}
- onClear={() => {
- dispatch({ type: 'change', field: 'roles', value: [] })
- onApply({ ...filters, roles: [] })
- }}
- />
-
- Member Type
-
-
+ {
- dispatch({ type: 'change', field: 'onlyFounder', value })
- onApply({ ...filters, onlyFounder: value })
+ dispatch({ type: 'change', field: 'roles', value })
+ onApply({ ...filters, roles: value })
}}
- >
-
-
- {
- dispatch({ type: 'change', field: 'onlyCouncil', value })
- onApply({ ...filters, onlyCouncil: value })
- }}
- >
-
-
- {
- dispatch({ type: 'change', field: 'onlyVerified', value })
- onApply({ ...filters, onlyVerified: value })
+ onApply={applyFilters}
+ onClear={() => {
+ dispatch({ type: 'change', field: 'roles', value: [] })
+ onApply({ ...filters, roles: [] })
}}
- >
-
-
-
+ />
+
+ Member Type
+
+ {
+ dispatch({ type: 'change', field: 'onlyFounder', value })
+ onApply({ ...filters, onlyFounder: value })
+ }}
+ >
+
+
+ {
+ dispatch({ type: 'change', field: 'onlyCouncil', value })
+ onApply({ ...filters, onlyCouncil: value })
+ }}
+ >
+
+
+ {
+ dispatch({ type: 'change', field: 'onlyVerified', value })
+ onApply({ ...filters, onlyVerified: value })
+ }}
+ >
+
+
+
+
)
@@ -208,16 +209,20 @@ const Wrapper = styled.div`
width: 440px;
flex-direction: row-reverse;
+ @media (max-width: 768px) {
+ width: 100%;
+ flex-direction: column-reverse;
+ }
+
label {
> *:first-child {
- height: 100%;
+ height: 40px;
}
}
}
`
const MembersFilterBox = styled(FilterBox)`
- height: 72px;
margin-top: 8px;
${Fields} {
@@ -226,10 +231,10 @@ const MembersFilterBox = styled(FilterBox)`
gap: 16px;
padding: 8px 16px;
height: 100%;
- }
- ${SelectContainer} {
- flex-basis: 220px;
+ @media (max-width: 768px) {
+ flex-direction: column;
+ }
}
`
@@ -240,11 +245,30 @@ const FieldsHeader = styled.div`
margin-right: auto;
`
+const FilterContentWrapper = styled.div`
+ display: flex;
+ gap: 16px;
+ padding: 8px 8px 12px 8px;
+
+ ${SelectContainer} {
+ width: 220px;
+ }
+
+ @media (max-width: 425px) {
+ flex-direction: column;
+ }
+
+ @media (max-width: 768px) {
+ margin-right: auto;
+ }
+`
+
const ToggleContainer = styled.div`
display: grid;
gap: 4px 8px;
grid-template-columns: auto 1fr;
height: 48px;
+ width: fit-content;
& > :first-child {
grid-column: span 3;
diff --git a/packages/ui/src/memberships/components/MemberListItem/Fields.tsx b/packages/ui/src/memberships/components/MemberListItem/Fields.tsx
index 28f4b8342a..18b22e21f2 100644
--- a/packages/ui/src/memberships/components/MemberListItem/Fields.tsx
+++ b/packages/ui/src/memberships/components/MemberListItem/Fields.tsx
@@ -10,7 +10,7 @@ export const colLayoutByType = (kind: MemberItemKind) => {
const roles = kind !== 'MyMember' ? 136 : 164
const created = 90
const referrer = 50
- const count = kind !== 'MyMember' ? 20 : 76
+ const count = 76
const total = 120
switch (kind) {
diff --git a/packages/ui/src/memberships/components/MembersSection.tsx b/packages/ui/src/memberships/components/MembersSection.tsx
index 624bc03fe5..4177c10ba6 100644
--- a/packages/ui/src/memberships/components/MembersSection.tsx
+++ b/packages/ui/src/memberships/components/MembersSection.tsx
@@ -80,6 +80,7 @@ const MembershipsGroup = styled.div`
'accountslist';
grid-row-gap: 5px;
width: 100%;
+ overflow: auto;
`
const MembershipsHeaders = styled(ListHeaders)`
diff --git a/packages/ui/test/setup.ts b/packages/ui/test/setup.ts
index a4eb8f6239..29350fa48f 100644
--- a/packages/ui/test/setup.ts
+++ b/packages/ui/test/setup.ts
@@ -11,6 +11,12 @@ import { AddressToBalanceMap, Balances } from '@/accounts/types'
import { BN_ZERO } from '@/common/constants'
import { UseModal } from '@/common/providers/modal/types'
+Object.defineProperty(global, 'screen', {
+ value: {
+ width: 1024,
+ },
+})
+
configure({ testIdAttribute: 'id' })
jest.mock('injectweb3-connect', () => {