From 76fb5e56a4c34aba18ec7684afa027d1ca48fd30 Mon Sep 17 00:00:00 2001
From: Mart-Dan-Rossi <94561321+Mart-Dan-Rossi@users.noreply.github.com>
Date: Tue, 9 Apr 2024 19:51:19 -0300
Subject: [PATCH] f-styles improve mobile view

---
 src/NDC/CommentView.jsx |  2 +-
 src/NDC/GeneralCard.jsx | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/NDC/CommentView.jsx b/src/NDC/CommentView.jsx
index 176c688..3c44ea3 100644
--- a/src/NDC/CommentView.jsx
+++ b/src/NDC/CommentView.jsx
@@ -34,7 +34,7 @@ const CallLibrary = styled.div`
 `;
 
 const CommentCard = styled.div`
-    margin-left: ${isReply ? "2rem" : "0"};
+    margin-left: ${isReply ? "1rem" : "0"};
     display: flex;
     padding: 14px 16px;
     flex-direction: column;
diff --git a/src/NDC/GeneralCard.jsx b/src/NDC/GeneralCard.jsx
index 5d89b58..10b85a7 100644
--- a/src/NDC/GeneralCard.jsx
+++ b/src/NDC/GeneralCard.jsx
@@ -303,6 +303,10 @@ const Element = styled.div`
 const CallLibrary = styled.div`
     display: none;
   `;
+
+const InnerContainer = styled.div`
+    max-width: 100%;
+  `;
 //============================================END STYLED COMPONENTS=================================================
 
 //=================================================MORE STYLES======================================================
@@ -314,12 +318,16 @@ const profileImageStyles = {
   overflow: "hidden",
 };
 
+const overlayStyle = {
+  "max-width": "80vw"
+}
+
 //===============================================END MORE STYLES====================================================
 
 //=================================================COMPONENTS=======================================================
 
 const inner = (
-  <div className="d-flex flex-row mx-1">
+  <InnerContainer className="d-flex flex-row mx-1">
     <Widget
       src={widgets.views.standardWidgets.newStyledComponents.Element.User}
       props={{
@@ -328,11 +336,11 @@ const inner = (
           showHumanBadge: true,
           showImage: true,
           showSocialName: true,
-          shortenLength: 20,
+          shortenLength: 13,
         },
       }}
     />
-  </div>
+  </InnerContainer>
 );
 
 const renderTags = () => {
@@ -431,11 +439,11 @@ return (
           }}
         />
       )}
-      <HeaderCard className="d-flex justify-content-between pb-1 border-bottom border-dark">
+      <HeaderCard className="d-flex flex-wrap justify-content-between pb-1 border-bottom border-dark">
         <div className="d-flex align-items-center gap-2">
           <Widget
             src={widgets.views.standardWidgets.profileOverlayTrigger}
-            props={{ accountId, children: inner }}
+            props={{ accountId, children: inner, overlayStyle }}
           />
         </div>
         <HeaderButtonsContainer>