From 0bf06d14131a18d51e2df9a5bba08ba2fda2d76e Mon Sep 17 00:00:00 2001
From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com>
Date: Wed, 25 Oct 2023 18:20:09 +0530
Subject: [PATCH] Fixed group info width (#805)

* fix: fixed width of group info modal

* fix: fixed width in group-info
---
 package.json                                                   | 2 +-
 .../src/lib/components/chat/ChatProfile/GroupInfoModal.tsx     | 2 +-
 .../src/lib/components/chat/ChatViewList/MessageEncryption.tsx | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index c6d4e222a..bedb24bd3 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "react-router-dom": "6.3.0",
     "regenerator-runtime": "0.13.7",
     "socket.io-client": "^4.5.2",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.0.8",
     "tiny-invariant": "^1.2.0",
     "ts-mocha": "^10.0.0",
     "tslib": "^2.3.0",
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
index a2893cc1f..5a7d9941b 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
@@ -488,7 +488,7 @@ const GroupInformation = ({
   };
 
   return (
-    <Section margin="auto" width={isMobile ? '100%' : '410px'} flexDirection="column">
+    <Section margin="auto" width='100%' flexDirection="column">
       <GroupDescription>
         <Span fontSize="18px" color={theme.textColor?.modalHeadingText}>
           Chat ID
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
index 74e307637..89a4cd2e2 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
@@ -42,7 +42,7 @@ const EncryptionMessageContent = {
         margin="10px 10px 0px"
         width={isMobile ? '80%' : 'fit-content'}
       >
-        <EncryptionMessageDiv textAlign="center">
+        <EncryptionMessageDiv textAlign="center" >
           {EncryptionMessageContent[id].IconComponent}
   
           <Span
@@ -61,6 +61,7 @@ const EncryptionMessageContent = {
 
   //styles
   const EncryptionMessageDiv = styled(Div)`
+  display:flex;
   text-align: center;
   svg {
     vertical-align: middle;