diff --git a/CHANGELOG.md b/CHANGELOG.md index c5dec347ce..5235d386f3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/scm-ui/ui-components/src/Tooltip.tsx b/scm-ui/ui-components/src/Tooltip.tsx index 98dce960d2..9277ad0d01 100644 --- a/scm-ui/ui-components/src/Tooltip.tsx +++ b/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 { }; 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 ( - + {children} ); diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx index 4fba6ec192..e2658618ac 100644 --- a/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx +++ b/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx @@ -36,7 +36,7 @@ class ChangesetTagsCollapsed extends React.Component { const { tags, t } = this.props; const message = tags.map(tag => tag.name).join(", "); return ( - + ); diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx index 8e01cf67e7..ab691be69c 100644 --- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx +++ b/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 { )} -
{this.renderTags()}
+
+ +

{description.message.split("\n").map((item, key) => { @@ -264,24 +257,6 @@ class ChangesetDetails extends React.Component { ); } - getTags = () => { - return this.props.changeset._embedded.tags || []; - }; - - renderTags = () => { - const tags = this.getTags(); - if (tags.length > 0) { - return ( - - {tags.map((tag: Tag) => { - return ; - })} - - ); - } - return null; - }; - collapseDiffs = () => { this.setState(state => ({ collapsed: !state.collapsed