DHFPROD-9611: hc-input fixes

Author: iveyMarklogic

marklogic-data-hub-central/ui/src/components/common/hc-input/hc-input.tsx

@@ -84,7 +84,7 @@ const HCInput = React.forwardRef<HTMLInputElement, Props>((props, ref?) => {
 
   return (
     <>
-      <Form.Group>
+      <Form.Group className="w-100">
         <InputGroup style={props?.style} className={[props.className, props?.disabled ? styles.inputGroupWrapperDisabled :
         props?.error && showIconClear && focusedInput ? styles.inputGroupWrapper :
           focusedInput && props?.error ? styles.inputGroupWrapperErrorFocus :

marklogic-data-hub-central/ui/src/components/modeling/entity-type-modal/entity-type-modal.tsx

@@ -366,7 +366,6 @@ const EntityTypeModal: React.FC<Props> = (props) => {
                   value={prefix}
                   onChange={handleChange}
                   onBlur={handleChange}
-                  style={{width: "170px"}}
                 />
                 <div className={"p-2 d-flex align-items-center"}>
                   <HCTooltip text={ModelingTooltips.namespace} id="prefix-tooltip" placement="top">

marklogic-data-hub-central/ui/src/components/modeling/graph-view/relationship-modal/add-edit-relationship.module.scss

@@ -30,9 +30,7 @@
 .optionalContainer, .foreignKeyContainer, .expressionContainer {
   display: flex;
   flex-direction: column;
-  height: 100px;
   margin-left: 30px;
-  margin-top: -22px;
   margin-bottom: 50px;
   border: 1px dashed lightgrey;
 }
@@ -215,7 +213,7 @@
   display: flex;
   flex-direction: row;
   margin-top: -20px;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 
 .optionalText, .optionalIcon:hover {
@@ -280,7 +278,9 @@
 .optionalExpressionContainer {
   margin: 1.5rem 0.25rem;
   display: flex;
-  justify-content: space-around;
+  gap: 10px;
+  align-items: center;
+  padding: 0 5px;
 }
 
 .propertyContainer {

marklogic-data-hub-central/ui/src/components/modeling/graph-view/relationship-modal/add-edit-relationship.tsx

@@ -983,7 +983,7 @@ const AddEditRelationship: React.FC<Props> = ({
 
   const functionDropdown = () => {
     return (
-      <Dropdown className="ms-1 me-2 mt-2" as={ButtonGroup} autoClose="outside"
+      <Dropdown as={ButtonGroup} autoClose="outside"
         onToggle={(show) => {
           show && handleFunctionsList();
         }}
@@ -1029,7 +1029,7 @@ const AddEditRelationship: React.FC<Props> = ({
   const sourceDropdown = () => {
     return (
 
-      <Dropdown className="mx-2 mt-2" as={ButtonGroup} autoClose="outside"
+      <Dropdown  as={ButtonGroup} autoClose="outside"
       >
         <Dropdown.Toggle id="sourcePropertyIcon" variant="outline-light" className={styles.sourceDrop}
           size="sm">
@@ -1060,11 +1060,10 @@ const AddEditRelationship: React.FC<Props> = ({
   };
 
   const optionalExpressionField = <div className={styles.optionalExpressionContainer}>
-    <FormLabel column lg={1} className={"pl-2 mt-1"}>{"Expression:"}</FormLabel>
+    <FormLabel column lg={1}>{"Expression:"}</FormLabel>
     <HCInput
       value={relationshipExpression}
       id="relationshipExpression"
-      className={`mx-2 my-1 w-100`}
       placeholder="Enter the expression to create a custom concept IRI"
       onChange={handleRelationshipExpression}
     />
@@ -1211,7 +1210,7 @@ const AddEditRelationship: React.FC<Props> = ({
         {!optionalCollapsed && visibleSettings === eVisibleSettings.EntityToConceptClass && <div data-testid={"optionalContent"} className={styles.expressionContainer}>{optionalExpressionField}</div>}
         {!optionalCollapsed && visibleSettings === eVisibleSettings.EntityToEntity && (<div data-testid={"optionalContent"} className={styles.foreignKeyContainer}>
           <span className={styles.foreignKeyText}>You can select the foreign key now or later:</span>
-          <div className={`mx-3 ${styles.foreignKeyDropdownContainer}`}>
+          <div className={`mx-3 mb-3 ${styles.foreignKeyDropdownContainer}`}>
             {foreignKeyDropdown}
             <HCTooltip id="foreign-key-tooltip" text={ModelingTooltips.foreignKeyInfo} placement={"right"}>
               <QuestionCircleFill color={themeColors.defaults.questionCircle} size={13} className={styles.questionCircle} data-testid={"foreign-key-tooltip"} />