From f2cc9f67ac9f3a5ebcfadaf37a9b5a12c5a11564 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Mon, 26 Jul 2021 13:50:24 +0200
Subject: [PATCH] Fix overflow of quick search results with long repository
 names (#1739)

---
 gradle/changelog/quicksearch_overflow.yaml     |  2 ++
 scm-ui/ui-webapp/src/containers/OmniSearch.tsx | 15 +++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 gradle/changelog/quicksearch_overflow.yaml

diff --git a/gradle/changelog/quicksearch_overflow.yaml b/gradle/changelog/quicksearch_overflow.yaml
new file mode 100644
index 0000000000..4642b5f45a
--- /dev/null
+++ b/gradle/changelog/quicksearch_overflow.yaml
@@ -0,0 +1,2 @@
+- type: Fixed
+  description: Fix overflow of quick search results with long repository names ([#1739](https://github.com/scm-manager/scm-manager/pull/1739))
diff --git a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
index 01d6c37042..a88673c271 100644
--- a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
+++ b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
@@ -101,6 +101,10 @@ const ResultHeading = styled.div`
   padding: 0.375rem 0.5rem;
 `;
 
+const DropdownMenu = styled.div`
+  max-width: 20rem;
+`;
+
 const Hits: FC<HitsProps> = ({ hits, index, clear }) => {
   const id = useCallback(namespaceAndName, [hits]);
   const [t] = useTranslation("commons");
@@ -115,7 +119,10 @@ const Hits: FC<HitsProps> = ({ hits, index, clear }) => {
       {hits.map((hit, idx) => (
         <div key={id(hit)} onMouseDown={(e) => e.preventDefault()} onClick={clear}>
           <Link
-            className={classNames("dropdown-item", "has-text-weight-medium", { "is-active": idx === index })}
+            className={classNames("dropdown-item", "has-text-weight-medium", "is-ellipsis-overflow", {
+              "is-active": idx === index,
+            })}
+            title={id(hit)}
             to={`/repo/${id(hit)}`}
           >
             {id(hit)}
@@ -195,7 +202,7 @@ const useShowResultsOnFocus = () => {
     showResults,
     onClick: (e: MouseEvent<HTMLInputElement>) => e.stopPropagation(),
     onFocus: () => setShowResults(true),
-    onBlur: () => setShowResults(false)
+    onBlur: () => setShowResults(false),
   };
 };
 
@@ -234,10 +241,10 @@ const OmniSearch: FC = () => {
               </span>
             )}
           </div>
-          <div className="dropdown-menu">
+          <DropdownMenu className="dropdown-menu">
             {error ? <SearchErrorNotification error={error} /> : null}
             {!error && data ? <Hits clear={clearQuery} index={index} hits={data._embedded.hits} /> : null}
-          </div>
+          </DropdownMenu>
         </div>
       </div>
     </Field>