From 3738e44b3b8b05791d8b3eb6b7294dee69d21f52 Mon Sep 17 00:00:00 2001
From: "jue.hou" <hj940709@gmail.com>
Date: Mon, 7 Oct 2024 15:38:31 +0300
Subject: [PATCH] group sharing message as gray text in story title

---
 client/assets/custom.scss                      |  1 +
 client/components/LibraryView/StoryListItem.js | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/assets/custom.scss b/client/assets/custom.scss
index 6eaafcc8..1803f4da 100644
--- a/client/assets/custom.scss
+++ b/client/assets/custom.scss
@@ -1622,6 +1622,7 @@ label.file-upload-btn {
 
   @media (min-width: 640px) {
     margin-left: 1rem;
+    margin-right: 1rem;
 
     &:hover {
       cursor: pointer;
diff --git a/client/components/LibraryView/StoryListItem.js b/client/components/LibraryView/StoryListItem.js
index 75f17fe1..07907779 100644
--- a/client/components/LibraryView/StoryListItem.js
+++ b/client/components/LibraryView/StoryListItem.js
@@ -20,6 +20,7 @@ const StoryTitle = ({
   currentGroup,
   libraryShown,
   setConfirmationOpen,
+  storyGroupShareInfo,
   handleControlledStoryCancel,
 }) => {
   const learningLanguage = useSelector(learningLanguageSelector)
@@ -38,14 +39,25 @@ const StoryTitle = ({
   return (
     <StoryDetailsModal
       trigger={
-        <span className="space-between" style={{ overflow: 'hidden', width: '100%' }}>
+        <span className="flex" style={{ overflow: 'hidden', width: '100%' }}>
           <Icon color="grey" name="ellipsis vertical" className="story-item-dots" />
           <h5
             className="story-item-title"
-            style={{ marginBottom: '.5rem', ...getTextStyle(learningLanguage) }}
+            style={{ marginBottom: '.5rem', width: '65%', ...getTextStyle(learningLanguage) }}
           >
             {story.title}
           </h5>
+          {inGroupLibrary && storyGroupShareInfo && (
+            <span style={{
+              whiteSpace: 'nowrap', 
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              '-o-text-overflow': 'ellipsis',
+              width: '30%',
+            }}>
+              {storyGroupShareInfo.message}
+            </span>
+          )}
         </span>
       }
       story={story}
@@ -368,6 +380,7 @@ const StoryListItem = ({ story, libraryShown, selectedGroup }) => {
           inGroupLibrary={inGroupLibrary}
           currentGroup={currentGroup}
           libraryShown={libraryShown}
+          storyGroupShareInfo={storyGroupShareInfo}
           handleControlledStoryCancel={handleControlledStoryCancel}
         />
       </Card.Content>