@vtex/faststore-plugin-buyer-portal 1.1.81 → 1.1.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/package.json +42 -42
  3. package/src/features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss +10 -0
  4. package/src/features/org-units/components/OrgUnitsHierarchyTree/org-units-hierarchy-tree.scss +6 -0
  5. package/src/features/org-units/layouts/OrgUnitsLayout/org-units-layout.scss +6 -0
  6. package/src/features/payment-methods/components/SearchPaymentMethods/SearchPaymentMethods.tsx +1 -0
  7. package/src/features/payment-methods/components/SearchPaymentMethods/search-payment-methods.scss +21 -8
  8. package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx +8 -1
  9. package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss +89 -78
  10. package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx +6 -2
  11. package/src/features/users/layouts/UserDetailsLayout/UserDetailsLayout.tsx +4 -2
  12. package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss +47 -4
  13. package/src/features/users/layouts/UsersLayout/users-layout.scss +26 -4
package/CHANGELOG.md CHANGED
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
9
9
 
10
10
  ### Added
11
11
 
12
+ - Credit card page responsiveness
12
13
  - Change for the store title based on the SEO
13
14
 
14
15
  ### Added
package/package.json CHANGED
@@ -1,44 +1,44 @@
1
1
  {
2
- "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.1.81",
4
- "description": "A plugin for faststore with buyer portal",
5
- "main": "index.js",
6
- "scripts": {
7
- "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
8
- "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
9
- "prepare": "husky"
10
- },
11
- "lint-staged": {
12
- "*.{js,jsx,ts,tsx}": [
13
- "eslint --fix"
14
- ]
15
- },
16
- "dependencies": {
17
- "@types/react-dom": "^19.0.3",
18
- "react-dom": "^19.0.0"
19
- },
20
- "devDependencies": {
21
- "@eslint/js": "^9.29.0",
22
- "@faststore/core": "^3.41.5",
23
- "@faststore/ui": "^3.41.5",
24
- "@types/react": "^18.2.42",
25
- "cypress": "13",
26
- "eslint": "^9.29.0",
27
- "eslint-config-prettier": "^10.1.5",
28
- "eslint-plugin-import": "^2.32.0",
29
- "eslint-plugin-prettier": "^5.5.1",
30
- "eslint-plugin-react": "^7.37.5",
31
- "globals": "^16.2.0",
32
- "husky": "^9.1.7",
33
- "lint-staged": "^16.1.2",
34
- "next": "13.5.7",
35
- "typescript": "4.7.3",
36
- "typescript-eslint": "^8.35.0"
37
- },
38
- "peerDependencies": {
39
- "react": "^18.2.0",
40
- "react-dom": "^18.2.0"
41
- },
42
- "license": "MIT",
43
- "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
2
+ "name": "@vtex/faststore-plugin-buyer-portal",
3
+ "version": "1.1.82",
4
+ "description": "A plugin for faststore with buyer portal",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
8
+ "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
9
+ "prepare": "husky"
10
+ },
11
+ "lint-staged": {
12
+ "*.{js,jsx,ts,tsx}": [
13
+ "eslint --fix"
14
+ ]
15
+ },
16
+ "dependencies": {
17
+ "@types/react-dom": "^19.0.3",
18
+ "react-dom": "^19.0.0"
19
+ },
20
+ "devDependencies": {
21
+ "@eslint/js": "^9.29.0",
22
+ "@faststore/core": "^3.41.5",
23
+ "@faststore/ui": "^3.41.5",
24
+ "@types/react": "^18.2.42",
25
+ "cypress": "13",
26
+ "eslint": "^9.29.0",
27
+ "eslint-config-prettier": "^10.1.5",
28
+ "eslint-plugin-import": "^2.32.0",
29
+ "eslint-plugin-prettier": "^5.5.1",
30
+ "eslint-plugin-react": "^7.37.5",
31
+ "globals": "^16.2.0",
32
+ "husky": "^9.1.7",
33
+ "lint-staged": "^16.1.2",
34
+ "next": "13.5.7",
35
+ "typescript": "4.7.3",
36
+ "typescript-eslint": "^8.35.0"
37
+ },
38
+ "peerDependencies": {
39
+ "react": "^18.2.0",
40
+ "react-dom": "^18.2.0"
41
+ },
42
+ "license": "MIT",
43
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
44
44
  }
package/src/features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss CHANGED
@@ -10,6 +10,12 @@
10
10
  @import "../../../shared/components/HeaderInside/header-inside.scss";
11
11
  @import "../../../shared/components/EmptyState/empty-state.scss";
12
12
 
13
+ padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
14
+
15
+ @include media("<=notebook") {
16
+ padding: 0;
17
+ }
18
+
13
19
  [data-fs-topbar-actions-wrapper] {
14
20
  display: flex;
15
21
  flex-direction: row;
@@ -109,6 +115,10 @@
109
115
  text-decoration: none;
110
116
  flex: 1;
111
117
 
118
+ @include media("<=notebook") {
119
+ margin-left: 0;
120
+ }
121
+
112
122
  [data-fs-credit-card-row-icon-wrapper] {
113
123
  display: flex;
114
124
  align-items: center;
package/src/features/org-units/components/OrgUnitsHierarchyTree/org-units-hierarchy-tree.scss CHANGED
@@ -83,6 +83,7 @@
83
83
  display: flex;
84
84
  align-items: center;
85
85
  flex: 1;
86
+ min-width: 0;
86
87
 
87
88
  z-index: 2;
88
89
 
@@ -94,6 +95,11 @@
94
95
  }
95
96
 
96
97
  [data-fs-org-unit-item-name] {
98
+ display: inline-block;
99
+ text-overflow: ellipsis;
100
+ overflow: hidden;
101
+ white-space: nowrap;
102
+ max-width: 100%;
97
103
  }
98
104
  }
99
105
 
package/src/features/org-units/layouts/OrgUnitsLayout/org-units-layout.scss CHANGED
@@ -26,6 +26,12 @@
26
26
  display: flex;
27
27
  justify-content: space-between;
28
28
  padding: 0 0 var(--fs-spacing-4);
29
+
30
+ @include media("<tablet") {
31
+ [data-fs-buyer-portal-internal-search] {
32
+ width: 100%;
33
+ }
34
+ }
29
35
  }
30
36
 
31
37
  [data-fs-org-units-divider] {
package/src/features/payment-methods/components/SearchPaymentMethods/SearchPaymentMethods.tsx CHANGED
@@ -22,6 +22,7 @@ export const SearchPaymentMethods = ({
22
22
  return (
23
23
  <div data-fs-bp-payment-methods-search-container>
24
24
  <InternalSearch
25
+ data-fs-bp-payment-methods-search-input
25
26
  // TODO: Corrigir warning do componente InternalSearch ( A component contains an input of type undefined with both value and defaultValue props. Input elements must be either controlled or uncontrolled )
26
27
  textSearch={
27
28
  props.textSearch
package/src/features/payment-methods/components/SearchPaymentMethods/search-payment-methods.scss CHANGED
@@ -1,15 +1,28 @@
1
1
  @import "../../../shared/components/InternalSearch/internal-search.scss";
2
2
 
3
3
  [data-fs-bp-payment-methods-search-container] {
4
- display: flex;
5
- justify-content: space-between;
6
- align-items: center;
7
- gap: var(--fs-spacing-1);
8
- padding-bottom: var(--fs-spacing-5);
9
- width: 100%;
4
+ display: flex;
5
+ justify-content: space-between;
6
+ align-items: center;
7
+ gap: var(--fs-spacing-1);
8
+ padding-bottom: var(--fs-spacing-5);
9
+ width: 100%;
10
+
11
+ [data-fs-bp-payment-methods-search-container-counter] {
12
+ font-size: var(--fs-text-size-1);
13
+ color: #5c5c5c;
14
+ display: block;
15
+ }
16
+
17
+ @media (max-width: 768px) {
18
+ [data-fs-payment-methods-section] {
19
+ [data-fs-buyer-portal-internal-search] {
20
+ width: 100%;
21
+ }
22
+ }
10
23
 
11
24
  [data-fs-bp-payment-methods-search-container-counter] {
12
- font-size: var(--fs-text-size-1);
13
- color: #5c5c5c;
25
+ display: none;
14
26
  }
27
+ }
15
28
  }
package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx CHANGED
@@ -5,8 +5,8 @@ import ConditionalTooltip from "../../../shared/components/ConditionalTooltip/Co
5
5
  import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
6
6
  import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
7
7
  import {
8
- useDrawerProps,
9
8
  useBuyerPortal,
9
+ useDrawerProps,
10
10
  useQueryParams,
11
11
  } from "../../../shared/hooks";
12
12
  import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
@@ -181,6 +181,13 @@ export const PaymentMethodsLayout = ({
181
181
  </Table>
182
182
  )}
183
183
 
184
+ {!isLoadingPaymentMethods && (
185
+ <p data-fs-bp-payment-methods-search-container-counter-bottom>
186
+ {`${currentPaymentMethods?.length ?? 0} of ${
187
+ paymentMethodsData?.length ?? 0
188
+ }`}
189
+ </p>
190
+ )}
184
191
  {isAddPaymentMethodDrawerOpen && (
185
192
  <AddPaymentMethodsDrawer
186
193
  {...addDrawerProps}
package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss CHANGED
@@ -5,99 +5,110 @@
5
5
 
6
6
  [data-fs-payment-methods-section] [data-fs-payment-methods-list],
7
7
  [data-fs-payment-methods-drawer] [data-fs-payment-methods-list] {
8
- width: 100%;
8
+ width: 100%;
9
+ display: flex;
10
+ flex-direction: column;
11
+ padding-bottom: var(--fs-spacing-5);
12
+
13
+ [data-fs-bp-payment-methods-list-title] {
14
+ color: #5c5c5c;
15
+ margin-bottom: var(--fs-spacing-1);
9
16
  display: flex;
10
- flex-direction: column;
11
- padding-bottom: var(--fs-spacing-5);
17
+ justify-content: start;
18
+ align-items: center;
19
+ gap: var(--fs-spacing-3);
12
20
 
13
- [data-fs-bp-payment-methods-list-title] {
14
- color: #5c5c5c;
15
- margin-bottom: var(--fs-spacing-1);
16
- display: flex;
17
- justify-content: start;
18
- align-items: center;
19
- gap: var(--fs-spacing-3);
21
+ &[data-fs-bp-payment-methods-list-title-drawer="true"] {
22
+ padding-left: var(--fs-spacing-3);
23
+ padding-right: var(--fs-spacing-3);
24
+ }
25
+ }
26
+
27
+ [data-fs-payment-methods-line] {
28
+ border-top: var(--fs-border-width) solid #e5e5e5;
29
+ }
30
+
31
+ [data-fs-payment-methods-row] {
32
+ display: flex;
33
+ justify-content: space-between;
20
34
 
21
- &[data-fs-bp-payment-methods-list-title-drawer="true"] {
22
- padding-left: var(--fs-spacing-3);
23
- padding-right: var(--fs-spacing-3);
24
- }
35
+ &:hover {
36
+ background-color: #f5f5f5;
25
37
  }
26
38
 
27
- [data-fs-payment-methods-line] {
28
- border-top: var(--fs-border-width) solid #e5e5e5;
39
+ &:visited {
40
+ color: #1f1f1f;
29
41
  }
30
42
 
31
- [data-fs-payment-methods-row] {
43
+ &[data-fs-payment-methods-row-selected="true"] {
44
+ background-color: #f1f8fd;
45
+ }
46
+
47
+ [data-fs-payment-methods-row-information] {
48
+ display: flex;
49
+ gap: var(--fs-spacing-2);
50
+ align-items: center;
51
+ margin-left: var(--fs-spacing-3);
52
+ padding: var(--fs-spacing-2) 0;
53
+ size: var(--fs-text-size-1);
54
+ color: #0366dd;
55
+ text-decoration: none;
56
+ flex: 1;
57
+
58
+ [data-fs-payment-methods-row-icon-wrapper] {
59
+ color: #0366dd;
32
60
  display: flex;
33
- justify-content: space-between;
34
-
35
- &:hover {
36
- background-color: #f5f5f5;
37
- }
38
-
39
- &:visited {
40
- color: #1f1f1f;
41
- }
42
-
43
- &[data-fs-payment-methods-row-selected="true"] {
44
- background-color: #f1f8fd;
45
- }
46
-
47
- [data-fs-payment-methods-row-information] {
48
- display: flex;
49
- gap: var(--fs-spacing-2);
50
- align-items: center;
51
- margin-left: var(--fs-spacing-3);
52
- padding: var(--fs-spacing-2) 0;
53
- size: var(--fs-text-size-1);
54
- color: #0366dd;
55
- text-decoration: none;
56
- flex: 1;
57
-
58
- [data-fs-payment-methods-row-icon-wrapper] {
59
- color: #0366dd;
60
- display: flex;
61
- align-items: center;
62
- justify-content: center;
63
- width: var(--fs-spacing-6);
64
- height: var(--fs-spacing-6);
65
-
66
- margin-right: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
67
- }
68
-
69
- [data-fs-payment-methods-name] {
70
- width: var(--data-fs-users-table-width);
71
- font-weight: var(--fs-text-weight-medium);
72
- font-size: var(--fs-text-size-1);
73
- line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
74
- text-decoration: none;
75
- color: #000;
76
- }
77
- }
61
+ align-items: center;
62
+ justify-content: center;
63
+ width: var(--fs-spacing-6);
64
+ height: var(--fs-spacing-6);
65
+
66
+ margin-right: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
67
+ }
68
+
69
+ [data-fs-payment-methods-name] {
70
+ width: var(--data-fs-users-table-width);
71
+ font-weight: var(--fs-text-weight-medium);
72
+ font-size: var(--fs-text-size-1);
73
+ line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
74
+ text-decoration: none;
75
+ color: #000;
76
+ }
78
77
  }
78
+ }
79
79
  }
80
80
 
81
81
  [data-fs-payment-methods-section] {
82
- @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
82
+ @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
83
83
 
84
- @import "../../../shared/components/InternalSearch/internal-search.scss";
85
- @import "../../../shared/components/HeaderInside/header-inside.scss";
86
- @import "../../../shared/components/Table/table.scss";
87
- @import "../../../shared/components/EmptyState/empty-state.scss";
84
+ @import "../../../shared/components/InternalSearch/internal-search.scss";
85
+ @import "../../../shared/components/HeaderInside/header-inside.scss";
86
+ @import "../../../shared/components/Table/table.scss";
87
+ @import "../../../shared/components/EmptyState/empty-state.scss";
88
88
 
89
- [data-fs-payment-methods-divider] {
90
- border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
91
- }
89
+ @media (min-width: 1028px) {
90
+ padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
91
+ }
92
92
 
93
- [data-fs-payment-methods-tooltip] {
94
- --fs-tooltip-background: #1f1f1f;
95
- }
93
+ [data-fs-payment-methods-tooltip] {
94
+ --fs-tooltip-background: #1f1f1f;
95
+ }
96
96
 
97
- [data-fs-bp-payment-method-table-row] {
98
- td:nth-child(3) {
99
- vertical-align: middle;
100
- text-align: right;
101
- }
97
+ [data-fs-bp-payment-method-table-row] {
98
+ td:nth-child(3) {
99
+ vertical-align: middle;
100
+ text-align: right;
101
+ }
102
+ }
103
+
104
+ [data-fs-bp-payment-methods-search-container-counter-bottom] {
105
+ font-size: var(--fs-text-size-1);
106
+ color: #5c5c5c;
107
+ text-align: end;
108
+ display: none;
109
+ margin-top: var(--fs-spacing-3);
110
+ @media (max-width: 768px) {
111
+ display: block;
102
112
  }
113
+ }
103
114
  }
package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx CHANGED
@@ -100,15 +100,19 @@ export const CreateUserDrawer = ({
100
100
 
101
101
  const error = JSON.parse(err.message) as {
102
102
  message: string;
103
+ orgUnit: string;
104
+ code: string;
103
105
  user: {
104
106
  id: string;
105
107
  email: string;
106
108
  name: string;
107
- orgUnit: string;
108
109
  };
109
110
  };
110
111
 
111
- setUserAlreadyInUse(error.user);
112
+ setUserAlreadyInUse({
113
+ ...error.user,
114
+ orgUnit: error.orgUnit,
115
+ });
112
116
 
113
117
  pushToast({
114
118
  message: error.message,
package/src/features/users/layouts/UserDetailsLayout/UserDetailsLayout.tsx CHANGED
@@ -82,7 +82,9 @@ export const UserDetailsLayout = ({
82
82
 
83
83
  <div data-fs-user-details-row>
84
84
  <span data-fs-user-details-row-label>Email</span>
85
- <span data-fs-user-details-row-value>{user?.email}</span>
85
+ <a href={`mailto:${user?.email}`} data-fs-user-details-row-value>
86
+ {user?.email}
87
+ </a>
86
88
  </div>
87
89
 
88
90
  <hr data-fs-user-details-divider />
@@ -103,7 +105,7 @@ export const UserDetailsLayout = ({
103
105
 
104
106
  <hr data-fs-user-details-divider />
105
107
 
106
- <div data-fs-user-details-row>
108
+ <div data-fs-user-details-row data-fs-user-details-row-org-unit>
107
109
  <span data-fs-user-details-row-label>Organizational Unit</span>
108
110
  <span data-fs-user-details-row-value>{user?.orgUnit.name}</span>
109
111
  <button
package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss CHANGED
@@ -61,6 +61,7 @@
61
61
  @import "../../../shared/components/HeaderInside/header-inside.scss";
62
62
  @import "../../../shared/components/Tag/tag.scss";
63
63
 
64
+ color: #000;
64
65
  [data-fs-user-details-header-status] {
65
66
  display: flex;
66
67
  align-items: center;
@@ -81,10 +82,21 @@
81
82
  padding: 0 0 var(--fs-spacing-5) 0;
82
83
  align-items: center;
83
84
 
85
+ @include media("<tablet") {
86
+ padding: 0 0 var(--fs-spacing-2) 0;
87
+ }
88
+
84
89
  [data-fs-buyer-portal-user-details-title-label] {
85
90
  font-weight: 600;
86
91
  font-size: var(--fs-text-size-2);
87
92
  line-height: var(--fs-spacing-4);
93
+ color: #000;
94
+ }
95
+
96
+ [data-fs-user-details] hr:first-of-type {
97
+ @include media("<tablet") {
98
+ display: none;
99
+ }
88
100
  }
89
101
 
90
102
  [data-fs-buyer-portal-user-details-edit] {
@@ -112,6 +124,12 @@
112
124
  border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
113
125
  }
114
126
 
127
+ hr:first-of-type[data-fs-user-details-divider] {
128
+ @include media("<tablet") {
129
+ display: none;
130
+ }
131
+ }
132
+
115
133
  [data-fs-button][data-fs-button-variant="primary"] [data-fs-button-wrapper] {
116
134
  border-radius: var(--fs-border-radius-pill);
117
135
  }
@@ -123,18 +141,36 @@
123
141
  size: var(--fs-text-size-1);
124
142
  line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
125
143
 
144
+ @include media("<tablet") {
145
+ flex-direction: column;
146
+ padding: var(--fs-spacing-3) var(--fs-spacing-0);
147
+ gap: var(--fs-spacing-0);
148
+ }
149
+
126
150
  [data-fs-user-details-row-label] {
127
151
  width: 12.5rem;
128
- color: #707070;
152
+ color: var(--fs-color-neutral-7);
129
153
  font-size: var(--fs-text-size-1);
130
- font-weight: 500;
154
+ font-weight: var(--fs-text-weight-regular);
131
155
  min-width: 12.5rem;
156
+
157
+ @include media("<tablet") {
158
+ font-size: var(--fs-text-size-0);
159
+ }
132
160
  }
133
161
 
134
162
  [data-fs-user-details-row-value] {
135
- color: #000;
136
163
  font-size: var(--fs-text-size-1);
137
- font-weight: 500;
164
+ font-weight: var(--fs-text-weight-regular);
165
+ }
166
+
167
+ a[data-fs-user-details-row-value] {
168
+ color: #0366dd;
169
+ text-decoration: none;
170
+ }
171
+
172
+ span[data-fs-user-details-row-value] {
173
+ color: #000;
138
174
  }
139
175
 
140
176
  [data-fs-user-details-row-value-roles] {
@@ -153,4 +189,11 @@
153
189
  cursor: pointer;
154
190
  }
155
191
  }
192
+
193
+ [data-fs-user-details-row-org-unit] {
194
+ @include media("<tablet") {
195
+ flex-direction: row;
196
+ flex-wrap: wrap;
197
+ }
198
+ }
156
199
  }
package/src/features/users/layouts/UsersLayout/users-layout.scss CHANGED
@@ -2,13 +2,12 @@
2
2
  @import "../../components/CreateUserDrawer/create-user-drawer.scss";
3
3
  @import "../../components/UserDropdownMenu/user-dropdown-menu.scss";
4
4
  @import "../../../shared/layouts/OrgUnitTabsLayout/org-unit-tabs-layout.scss";
5
+ @import "../../../shared/components/HeaderInside/header-inside.scss";
5
6
 
6
7
  [data-fs-users-section] {
7
8
  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
8
9
  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
9
10
 
10
- @import "../../../shared/components/HeaderInside/header-inside.scss";
11
-
12
11
  @import "../../../shared/components/InternalSearch/internal-search.scss";
13
12
  @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
14
13
  @import "../../../shared/components/SortFilter/sort-filter.scss";
@@ -20,6 +19,11 @@
20
19
 
21
20
  --data-fs-users-table-width: 11.875rem;
22
21
 
22
+ [data-fs-bp-header-inside-title] {
23
+ @include media("<=phonemid") {
24
+ font-size: var(--fs-text-size-1);
25
+ }
26
+ }
23
27
  [data-fs-users-subtitle] {
24
28
  margin-left: var(--fs-spacing-2);
25
29
  font-size: var(--fs-text-size-4);
@@ -54,11 +58,24 @@
54
58
  justify-content: space-between;
55
59
  align-items: center;
56
60
  padding: 0 0 1.75rem;
61
+
62
+ @include media("<=tablet") {
63
+ [data-fs-bp-paginator-counter] {
64
+ display: none;
65
+ }
66
+ }
57
67
  }
58
68
 
59
69
  [data-fs-buyer-portal-users-filter-search-container] {
60
70
  display: flex;
61
71
  gap: var(--fs-spacing-3);
72
+
73
+ @include media("<=tablet") {
74
+ width: 100%;
75
+ [data-fs-buyer-portal-internal-search] {
76
+ width: 100%;
77
+ }
78
+ }
62
79
  }
63
80
 
64
81
  [data-fs-user-divider] {
@@ -169,14 +186,19 @@
169
186
  [data-fs-bp-table-user-roles] {
170
187
  display: flex;
171
188
  flex-wrap: wrap;
189
+
172
190
  gap: var(--fs-spacing-1);
173
191
  padding-right: var(--fs-spacing-1);
174
192
 
175
193
  [data-fs-tag] {
176
194
  z-index: 1;
177
195
  }
196
+
197
+ @include media("<=430px") {
198
+ display: none;
199
+ }
178
200
  }
179
-
201
+
180
202
  [data-fs-bp-table-row-icon-cell] {
181
203
  svg {
182
204
  margin: var(--fs-spacing-1);
@@ -189,7 +211,7 @@
189
211
  }
190
212
 
191
213
  [data-fs-tooltip] {
192
- --fs-tooltip-background: #1F1F1F;
214
+ --fs-tooltip-background: #1f1f1f;
193
215
  --fs-tooltip-border-radius: var(--fs-spacing-0);
194
216
  }
195
217
  }