From 827107365b3253fc42f7ce2ee3a7fa95b98b55e8 Mon Sep 17 00:00:00 2001
From: nasaownsky <someuser.ivn@gmail.com>
Date: Tue, 26 Nov 2024 16:33:25 +0400
Subject: [PATCH 1/2] Tweak team members card & modal sizes to fit cards better
 in smaller screens

---
 publisher/src/components/AdminPanel/AdminPanel.styles.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/publisher/src/components/AdminPanel/AdminPanel.styles.tsx b/publisher/src/components/AdminPanel/AdminPanel.styles.tsx
index 17608a21f..db08b9128 100644
--- a/publisher/src/components/AdminPanel/AdminPanel.styles.tsx
+++ b/publisher/src/components/AdminPanel/AdminPanel.styles.tsx
@@ -104,7 +104,7 @@ export const ModalWrapper = styled.div``;
 
 export const ModalContainer = styled.div<{ offScreen?: boolean }>`
   height: 90vh;
-  width: 50vw;
+  width: 60vw;
   background: ${palette.solid.white};
   border-radius: 4px;
   padding: 32px;
@@ -249,7 +249,7 @@ export const InputLabelWrapper = styled.div<{
   input,
   input[type="button"] {
     width: 100%;
-    min-width: 210px;
+    min-width: 190px;
     font-size: 0.8rem;
     font-weight: 400;
     line-height: 1rem;
@@ -346,7 +346,7 @@ export const TeamMemberCard = styled.div<{
   ${typography.sizeCSS.normal}
   display: flex;
   flex-direction: column;
-  width: 250px;
+  width: 230px;
   align-items: flex-start;
   justify-content: center;
   border: 1px solid ${palette.highlight.grey5};
@@ -358,7 +358,7 @@ export const TeamMemberCard = styled.div<{
   ${({ deleted }) => deleted && `background: ${palette.gradient.lightred};`}
 
   input[type="button"] {
-    width: 210px;
+    width: 190px;
   }
 `;
 

From f6fa85217a9838c55d18e6daa4363e8e7c8bb56a Mon Sep 17 00:00:00 2001
From: nasaownsky <someuser.ivn@gmail.com>
Date: Wed, 27 Nov 2024 15:54:57 +0400
Subject: [PATCH 2/2] Update fitting method of team member cards

---
 .../components/AdminPanel/AdminPanel.styles.tsx  | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/publisher/src/components/AdminPanel/AdminPanel.styles.tsx b/publisher/src/components/AdminPanel/AdminPanel.styles.tsx
index db08b9128..73984eee4 100644
--- a/publisher/src/components/AdminPanel/AdminPanel.styles.tsx
+++ b/publisher/src/components/AdminPanel/AdminPanel.styles.tsx
@@ -249,7 +249,7 @@ export const InputLabelWrapper = styled.div<{
   input,
   input[type="button"] {
     width: 100%;
-    min-width: 190px;
+    min-width: 200px;
     font-size: 0.8rem;
     font-weight: 400;
     line-height: 1rem;
@@ -334,8 +334,9 @@ export const ButtonWrapper = styled.div`
 `;
 
 export const TeamMembersContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 10px;
   margin-top: 12px;
 `;
 
@@ -346,20 +347,16 @@ export const TeamMemberCard = styled.div<{
   ${typography.sizeCSS.normal}
   display: flex;
   flex-direction: column;
-  width: 230px;
+  width: 100%;
+  min-width: 240px;
   align-items: flex-start;
   justify-content: center;
   border: 1px solid ${palette.highlight.grey5};
   border-radius: 4px;
   padding: 16px;
-  margin: 5px;
 
   ${({ added }) => added && `background: ${palette.gradient.lightgreen};`}
   ${({ deleted }) => deleted && `background: ${palette.gradient.lightred};`}
-
-  input[type="button"] {
-    width: 190px;
-  }
 `;
 
 /** Chips */
@@ -480,6 +477,7 @@ export const ChipContainerLabel = styled.label<{
 export const ChipName = styled.div``;
 
 export const ChipRole = styled.div`
+  width: 100%;
   color: ${palette.solid.green};
 `;