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

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Fix jumping and broken tool tips ([#2026](https://github.com/scm-manager/scm-manager/pull/2026))

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 = {

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 className="label">
-              {label}
+              <span>{label} </span>
               {help}
               {items.length > 0 ? ":" : ""}
-            </strong>
+            </label>
           </div>
         ) : (
           ""

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} />}