ATLAS-5042: [React UI] Entity detail page - UI alignment, styling, and scroll issues (#359)

Author: Brijesh619

dashboard/src/components/Forms/FormTextArea.tsx

@@ -50,15 +50,6 @@ const FormTextArea = ({ data, control }: any) => {
             </LightTooltip>
           </div>
           <div className="w-100">
-            {/* <TextArea
-              maxRows={4}
-              aria-label="maximum height"
-              placeholder={name}
-              onChange={onChange}
-              minRows={2}
-              className="form-textfield form-textarea-field"
-              value={value}
-            /> */}
             <textarea
               placeholder={name}
               onChange={onChange}

dashboard/src/components/commonComponents.tsx

@@ -199,7 +199,7 @@ export const ExtractObject = (props: any) => {
                 }}
                 style={{
                   width: "unset !important",
-                  whiteSpace: "nowrap",
+                  whiteSpace: "normal",
                   color: deleteIcon ? "#bb5838" : "#4a90e2"
                 }}
               >

dashboard/src/index.scss

@@ -230,3 +230,7 @@ textarea {
 .hide {
   display: none !important;
 }
+
+textarea::placeholder {
+  opacity: 0.7;
+}

dashboard/src/styles/formFields.scss

@@ -46,6 +46,13 @@
   width: 100%;
   flex: 1;
   margin-bottom: 0.5rem !important;
+  height: 34px;
+  border-radius: 3px;
+  outline: none;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 6px 12px;
+  min-height: 34px;
+  width: 100%;
 }
 
 .form-textfield-label {

dashboard/src/styles/propertiesTab.scss

@@ -57,4 +57,5 @@
 
 .attribute-value-text > a {
   width: 100% !important;
+  word-break: break-all;
 }

dashboard/src/styles/relationshipLineage.scss

@@ -45,5 +45,6 @@
 .value-text {
   a {
     width: 100% !important;
+    word-break: break-all;
   }
 }

dashboard/src/views/Classification/ClassificationForm.tsx

@@ -328,6 +328,7 @@ const ClassificationForm = ({
                       ) : (
                         <textarea
                           {...field}
+                          className="form-textarea-field"
                           placeholder={"Long Description"}
                           value={sanitizeHtmlContent(descriptionValue)}
                           onChange={(e) => {

dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/UserDefinedProperties.tsx

@@ -353,17 +353,6 @@ const UserDefinedProperties = ({ loading, customAttributes, entity }: any) => {
                           <>
                             <div style={{ flex: "1" }}>
                               <textarea
-                                style={{
-                                  height: "34px",
-                                  borderRadius: "3px",
-                                  outline: "none",
-                                  border: "1px solid rgba(0,0,0,0.12)",
-                                  padding: "6px 12px",
-                                  minHeight: "34px",
-                                  width: "100%",
-                                  marginTop: "8px !important",
-                                  marginBottom: "8px !important"
-                                }}
                                 maxRows={3}
                                 rows={1}
                                 aria-label="maximum height"

dashboard/src/views/Glossary/GlossaryForm.tsx

@@ -153,20 +153,9 @@ const GlossaryForm = (props: {
                       />
                     </div>
                   ) : (
-                    // <TextArea
-                    //   {...field}
-                    //   minRows={4}
-                    //   placeholder={"Long Description"}
-                    //   onChange={(e) => {
-                    //     e.stopPropagation();
-                    //     const value = e.target.value;
-                    //     field.onChange(value);
-                    //     setValue("description", value);
-                    //   }}
-                    //   style={{ width: "100%" }}
-                    //   />
                     <textarea
                       {...field}
+                      className="form-textarea-field"
                       placeholder={"Long Description"}
                       onChange={(e) => {
                         e.stopPropagation();