fix: Text truncate issue in the search modal (#2137)

Author: bydawen

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;
+  }
 }

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}