From fcf1e5cb33b6792907f67293bf05f5f2e874cced Mon Sep 17 00:00:00 2001
From: bydawen <oleksandr.buhaienko@raccoongang.com>
Date: Sat, 14 Jun 2025 02:28:29 +0300
Subject: [PATCH] fix: Text truncate issue in the search modal (#2137)

---
 src/search-modal/SearchModal.scss | 9 +++++++++
 src/search-modal/SearchResult.tsx | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/search-modal/SearchModal.scss b/src/search-modal/SearchModal.scss
index d14fdac83..b58495c46 100644
--- a/src/search-modal/SearchModal.scss
+++ b/src/search-modal/SearchModal.scss
@@ -66,4 +66,13 @@
       background-color: unset;
     }
   }
+
+  // Fix a bug with search modal: very long text is not truncated with an ellipsis
+  // https://github.com/openedx/frontend-app-authoring/issues/1900
+  .hit-description {
+    display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
 }
diff --git a/src/search-modal/SearchResult.tsx b/src/search-modal/SearchResult.tsx
index 032d5cda1..d75db66c0 100644
--- a/src/search-modal/SearchResult.tsx
+++ b/src/search-modal/SearchResult.tsx
@@ -181,7 +181,7 @@ const SearchResult: React.FC<{ hit: ContentHit }> = ({ hit }) => {
         <div className="hit-name small">
           <Highlight text={hit.formatted.displayName} />
         </div>
-        <div className="hit-description x-small text-truncate">
+        <div className="hit-description x-small">
           <Highlight text={hit.formatted.content?.htmlContent ?? ''} />
           <Highlight text={hit.formatted.content?.capaContent ?? ''} />
         </div>
@@ -190,6 +190,7 @@ const SearchResult: React.FC<{ hit: ContentHit }> = ({ hit }) => {
         </div>
       </Stack>
       <IconButton
+        className="flex-shrink-0"
         src={OpenInNew}
         iconAs={Icon}
         onClick={openContextInNewWindow}