From 6cf8afac0153624f9a4be0f74d66c86c171a9814 Mon Sep 17 00:00:00 2001
From: Phil-Ah <philipp.ahrendt@cloudogu.com>
Date: Thu, 5 May 2022 21:51:20 +0200
Subject: [PATCH] Fix jumping and broken tool tips (#2026)

The way the tool tip implements passed class names is mistakable. The passed classes broke the tool tip and are removed. The same issue led to a broken tool tip for the code search and is fixed as well. Unnecessary code is removed from help.

Fixes #2025
---
 gradle/changelog/jumping_tooltips.yaml                   | 2 ++
 scm-ui/ui-components/src/Help.tsx                        | 9 ++-------
 scm-ui/ui-components/src/forms/TagGroup.tsx              | 8 ++++----
 .../src/repos/codeSection/containers/FileSearch.tsx      | 4 ++--
 4 files changed, 10 insertions(+), 13 deletions(-)
 create mode 100644 gradle/changelog/jumping_tooltips.yaml

diff --git a/gradle/changelog/jumping_tooltips.yaml b/gradle/changelog/jumping_tooltips.yaml
new file mode 100644
index 0000000000..b5dc59e4c6
--- /dev/null
+++ b/gradle/changelog/jumping_tooltips.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Fix jumping and broken tool tips ([#2026](https://github.com/scm-manager/scm-manager/pull/2026))
diff --git a/scm-ui/ui-components/src/Help.tsx b/scm-ui/ui-components/src/Help.tsx
index 061e233460..49705e53a8 100644
--- a/scm-ui/ui-components/src/Help.tsx
+++ b/scm-ui/ui-components/src/Help.tsx
@@ -23,7 +23,6 @@
  */
 import React, { FC } from "react";
 import classNames from "classnames";
-import styled from "styled-components";
 import Tooltip from "./Tooltip";
 import HelpIcon from "./HelpIcon";
 
@@ -34,19 +33,15 @@ type Props = {
   id?: string;
 };
 
-const AbsolutePositionTooltip = styled(Tooltip)`
-  position: absolute;
-`;
-
 const Help: FC<Props> = ({ message, multiline, className, id }) => (
-  <AbsolutePositionTooltip
+  <Tooltip
     className={classNames("is-inline-block", "pl-1", className)}
     message={message}
     id={id}
     multiline={multiline}
   >
     <HelpIcon />
-  </AbsolutePositionTooltip>
+  </Tooltip>
 );
 
 Help.defaultProps = {
diff --git a/scm-ui/ui-components/src/forms/TagGroup.tsx b/scm-ui/ui-components/src/forms/TagGroup.tsx
index 33ab0f84ec..8cc3c73fef 100644
--- a/scm-ui/ui-components/src/forms/TagGroup.tsx
+++ b/scm-ui/ui-components/src/forms/TagGroup.tsx
@@ -37,17 +37,17 @@ export default class TagGroup extends React.Component<Props> {
     const { items, label, helpText } = this.props;
     let help = null;
     if (helpText) {
-      help = <Help className="is-relative" message={helpText} />;
+      help = <Help message={helpText} />;
     }
     return (
       <div className="field is-grouped is-grouped-multiline">
         {label && items ? (
           <div className="control">
-            <strong>
-              {label}
+            <label className="label">
+              <span>{label} </span>
               {help}
               {items.length > 0 ? ":" : ""}
-            </strong>
+            </label>
           </div>
         ) : (
           ""
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
index e5c187cfe6..9a763357d4 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
@@ -117,7 +117,7 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
             <HomeIcon title={t("fileSearch.home")} name="home" color="inherit" />
           </HomeLink>
           <FilterInput
-            className="is-full-width"
+            className="is-full-width pr-2"
             placeholder={t("fileSearch.input.placeholder")}
             value={query}
             filter={search}
@@ -125,7 +125,7 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
             id={id}
             testId="file_search_filter_input"
           />
-          <Help className="ml-3" message={t("fileSearch.input.help")} id={id} />
+          <Help message={t("fileSearch.input.help")} id={id} />
         </div>
         <ErrorNotification error={error} />
         {isLoading ? <Loading /> : <FileSearchResults contentBaseUrl={contentBaseUrl} query={query} paths={result} />}