Fix layout overflow on changesets with multiple tags

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - JWT token timeout is now handled properly ([#1297](https://github.com/scm-manager/scm-manager/pull/1297))
 - Fix text-overflow in danger zone ([#1298](https://github.com/scm-manager/scm-manager/pull/1298))
 - Fix plugin installation error if previously a plugin was installed with the same dependency which is still pending. ([#1300](https://github.com/scm-manager/scm-manager/pull/1300))
+- Fix layout overflow on changesets with multiple tags ([#1314](https://github.com/scm-manager/scm-manager/pull/1314))
 
 ## [2.4.0] - 2020-08-14
 ### Added

scm-ui/ui-components/src/Tooltip.tsx

@@ -22,12 +22,12 @@
  * SOFTWARE.
  */
 import React, { ReactNode } from "react";
-import classNames from "classnames";
 
 type Props = {
   message: string;
   className?: string;
   location: string;
+  multiline?: boolean;
   children: ReactNode;
 };
 
@@ -37,9 +37,17 @@ class Tooltip extends React.Component<Props> {
   };
 
   render() {
-    const { className, message, location, children } = this.props;
+    const { className, message, location, multiline, children } = this.props;
+    let classes = `tooltip has-tooltip-${location}`;
+    if (multiline) {
+      classes += " has-tooltip-multiline";
+    }
+    if (className) {
+      classes += " " + className;
+    }
+
     return (
-      <span className={classNames("tooltip", "has-tooltip-" + location, className)} data-tooltip={message}>
+      <span className={classes} data-tooltip={message}>
         {children}
       </span>
     );

scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx

@@ -36,7 +36,7 @@ class ChangesetTagsCollapsed extends React.Component<Props> {
     const { tags, t } = this.props;
     const message = tags.map(tag => tag.name).join(", ");
     return (
-      <Tooltip location="top" message={message}>
+      <Tooltip location="top" message={message} multiline={true}>
         <ChangesetTagBase icon="tags" label={tags.length + " " + t("changeset.tags")} />
       </Tooltip>
     );

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -26,7 +26,7 @@ import { Trans, useTranslation, WithTranslation, withTranslation } from "react-i
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { Changeset, ParentChangeset, Repository, Tag } from "@scm-manager/ui-types";
+import { Changeset, ParentChangeset, Repository } from "@scm-manager/ui-types";
 import {
   AvatarImage,
   AvatarWrapper,
@@ -36,14 +36,15 @@ import {
   ChangesetDiff,
   ChangesetId,
   changesets,
-  ChangesetTag,
+  ChangesetTags,
   DateFromNow,
+  FileControlFactory,
   Icon,
-  Level
+  Level,
+  SignatureIcon
 } from "@scm-manager/ui-components";
 import ContributorTable from "./ContributorTable";
 import { Link as ReactLink } from "react-router-dom";
-import { FileControlFactory, SignatureIcon } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   changeset: Changeset;
@@ -59,16 +60,6 @@ const RightMarginP = styled.p`
   margin-right: 1em;
 `;
 
-const TagsWrapper = styled.div`
-  & .tag {
-    margin-left: 0.25rem;
-  }
-`;
-
-const SignedIcon = styled(SignatureIcon)`
-  padding-left: 1rem;
-`;
-
 const BottomMarginLevel = styled(Level)`
   margin-bottom: 1rem !important;
 `;
@@ -224,7 +215,9 @@ class ChangesetDetails extends React.Component<Props, State> {
                 )}
               </ChangesetSummary>
             </div>
-            <div className="media-right">{this.renderTags()}</div>
+            <div className="media-right">
+              <ChangesetTags changeset={changeset} />
+            </div>
           </article>
           <p>
             {description.message.split("\n").map((item, key) => {
@@ -264,24 +257,6 @@ class ChangesetDetails extends React.Component<Props, State> {
     );
   }
 
-  getTags = () => {
-    return this.props.changeset._embedded.tags || [];
-  };
-
-  renderTags = () => {
-    const tags = this.getTags();
-    if (tags.length > 0) {
-      return (
-        <TagsWrapper className="level-item">
-          {tags.map((tag: Tag) => {
-            return <ChangesetTag key={tag.name} tag={tag} />;
-          })}
-        </TagsWrapper>
-      );
-    }
-    return null;
-  };
-
   collapseDiffs = () => {
     this.setState(state => ({
       collapsed: !state.collapsed