Merge pull request #1298 from scm-manager/bugfix/overflow_in_dangerzone

Fix text-overflow in danger zone

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+### Fixed
+- Fix text-overflow in danger zone ([#1298](https://github.com/scm-manager/scm-manager/pull/1298))
+
 ## [2.4.0] - 2020-08-14
 ### Added
 - Introduced merge detection for receive hooks ([#1278](https://github.com/scm-manager/scm-manager/pull/1278))

scm-ui/ui-webapp/src/repos/containers/DangerZone.tsx

@@ -36,9 +36,20 @@ type Props = {
 };
 
 const DangerZoneContainer = styled.div`
-  padding: 1rem;
+  padding: 1.5rem 1rem;
   border: 1px solid #ff6a88;
   border-radius: 5px;
+  > .level {
+    flex-flow: wrap;
+
+    .level-left {
+      max-width: 100%;
+    }
+
+    .level-right {
+      margin-top: 0.75rem;
+    }
+  }
   > *:not(:last-child) {
     padding-bottom: 1.5rem;
     border-bottom: solid 2px whitesmoke;

scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx

@@ -26,9 +26,8 @@ import { connect } from "react-redux";
 import { compose } from "redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
 import { Repository } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton, ErrorNotification, Level, ButtonGroup } from "@scm-manager/ui-components";
+import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
 import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
 
 type Props = RouteComponentProps &
@@ -89,10 +88,11 @@ class DeleteRepo extends React.Component<Props> {
         <ErrorNotification error={error} />
         <Level
           left={
-            <div>
+            <p>
               <strong>{t("deleteRepo.subtitle")}</strong>
-              <p>{t("deleteRepo.description")}</p>
-            </div>
+              <br />
+              {t("deleteRepo.description")}
+            </p>
           }
           right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />}
         />

scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx

@@ -38,7 +38,7 @@ type Props = {
 };
 
 const RenameRepository: FC<Props> = ({ repository, indexLinks }) => {
-  let history = useHistory();
+  const history = useHistory();
   const [t] = useTranslation("repos");
   const [error, setError] = useState<Error | undefined>(undefined);
   const [loading, setLoading] = useState(false);
@@ -156,10 +156,11 @@ const RenameRepository: FC<Props> = ({ repository, indexLinks }) => {
       />
       <Level
         left={
-          <div>
+          <p>
             <strong>{t("renameRepo.subtitle")}</strong>
-            <p>{t("renameRepo.description")}</p>
-          </div>
+            <br />
+            {t("renameRepo.description")}
+          </p>
         }
         right={
           <Button