From 2524e8af47db9453f25beca655565bbe269abf93 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 14 Apr 2020 15:08:37 -0400
Subject: [PATCH] Separate prompted modal section with divider and fix user
 word-wrap

---
 awx/ui_next/src/components/DetailList/UserDateDetail.jsx | 7 ++++++-
 awx/ui_next/src/components/PromptDetail/PromptDetail.jsx | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/components/DetailList/UserDateDetail.jsx b/awx/ui_next/src/components/DetailList/UserDateDetail.jsx
index b16e03c147..f65ab665ed 100644
--- a/awx/ui_next/src/components/DetailList/UserDateDetail.jsx
+++ b/awx/ui_next/src/components/DetailList/UserDateDetail.jsx
@@ -2,10 +2,15 @@ import React from 'react';
 import { node, string } from 'prop-types';
 import { Trans } from '@lingui/macro';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { formatDateString } from '@util/dates';
-import Detail from './Detail';
+import _Detail from './Detail';
 import { SummaryFieldUser } from '../../types';
 
+const Detail = styled(_Detail)`
+  word-break: break-word;
+`;
+
 function UserDateDetail({ label, date, user, dataCy = null }) {
   const dateStr = formatDateString(date);
   const username = user ? user.username : '';
diff --git a/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
index 26e47d2956..e2aa73ec6e 100644
--- a/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
+++ b/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { toTitleCase } from '@util/strings';
 
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup, Divider } from '@patternfly/react-core';
 import { VariablesDetail } from '@components/CodeMirrorInput';
 import CredentialChip from '@components/CredentialChip';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
@@ -200,6 +200,7 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) {
 
       {hasPromptData(launchConfig) && hasOverrides && (
         <>
+          <Divider css="margin-top: var(--pf-global--spacer--lg)" />
           <PromptHeader>{i18n._(t`Prompted Values`)}</PromptHeader>
           <DetailList aria-label="Prompt Overrides">
             {overrides?.job_type && (