Merge pull request #198 from pneumaticapp/frontend/refactoring/8830__Layout_errors_on_the_template_creation_page

8830 refactoring(styles): Layout errors on the template creation page

Author: pneumatic-ilyacedrik

frontend/src/public/components/RichEditor/plugins/DebugListSelectionPlugin/DebugListSelectionPlugin.tsx

@@ -20,8 +20,7 @@
 }
 
 .kickoff-create-field-name-input {
-  padding: 0 4px 0 0;
-  max-width: calc(100% - 5px);
+  padding: 0;
   line-height: 20px;
   border: none;
 

frontend/src/public/components/RichEditor/plugins/DebugListSelectionPlugin/index.ts

@@ -96,6 +96,7 @@
 
 .kickoff-create-field-options {
   margin: 0;
+  margin-top: 0.8rem;
   padding: 0;
   list-style: none;
 }
@@ -166,10 +167,6 @@
   align-items: center;
 }
 
-.kickoff-dropdown-field {
-  margin-bottom: 8px;
-}
-
 .kickoff-create-field__error-text {
   margin-top: 4px;
   margin-bottom: 0;

frontend/src/public/components/TemplateEdit/ExtraFields/Checkbox/ExtraFieldCheckbox.css

@@ -170,7 +170,6 @@ export function ExtraFieldCreatable({
 
   const renderKickoffField = () => (
     <FieldWithName
-      inputClassName={inputStyles['kickoff-dropdown-field']}
       labelBackgroundColor={labelBackgroundColor}
       field={field}
       descriptionPlaceholder={descriptionPlaceholder}

frontend/src/public/components/TemplateEdit/ExtraFields/Creatable/ExtraFieldCreatable.css

@@ -95,10 +95,6 @@
   }
 }
 
-.kickoff-dropdown-field {
-  margin-bottom: 8px;
-}
-
 .kickoff-create-field__error-text {
   margin-top: 4px;
   margin-bottom: 0;

frontend/src/public/components/TemplateEdit/ExtraFields/Creatable/ExtraFieldCreatable.tsx

@@ -62,7 +62,6 @@ export function ExtraFieldUser({
 
   const renderKickoffField = () => (
     <FieldWithName
-      inputClassName={inputStyles['kickoff-dropdown-field']}
       labelBackgroundColor={labelBackgroundColor}
       field={field}
       descriptionPlaceholder={descriptionPlaceholder}

frontend/src/public/components/TemplateEdit/ExtraFields/User/ExtraFieldUser.css

@@ -130,9 +130,10 @@ export const FieldWithName = forwardRef<HTMLInputElement, IKickoffFormFieldWithN
         classnames(
           getInputNameBackground(labelBackgroundColor),
           styles['kick-off-input__name'],
+          isKickoffEditorMode && styles['kick-off-input__name_kickoff-edit'],
           fieldNameError && styles['kick-off-input__name_error'],
         ),
-      [labelBackgroundColor, fieldNameError],
+      [labelBackgroundColor, fieldNameError, isKickoffEditorMode],
     );
 
     const labelReplacementClassName = useMemo(

frontend/src/public/components/TemplateEdit/ExtraFields/User/ExtraFieldUser.tsx

@@ -96,7 +96,8 @@
   }
 
   svg {
-    margin-bottom: 0.2rem;
+    position: relative;
+    top: -0.2rem;
   }
 
   &:hover {
@@ -114,6 +115,7 @@
     position: relative;
     z-index: 1;
     margin: 0 1.2rem -1rem;
+    padding: 0 1.2rem;
     display: inline-flex;
     box-sizing: border-box;
     min-width: 0;
@@ -125,7 +127,6 @@
 
     input,
     .kick-off-input__name-textarea {
-      padding: 0 1.2rem;
       overflow: hidden;
       box-sizing: border-box;
       font-family: Nunito, sans-serif;
@@ -152,6 +153,7 @@
     }
 
     .kick-off-input__name-textarea {
+      padding: 0;
       box-sizing: border-box;
       flex: 1 1 auto;
       min-width: 0;
@@ -195,6 +197,18 @@
     }
   }
 
+  .kick-off-input__name_kickoff-edit {
+    width: fit-content;
+    max-width: calc(100% - 2.4rem);
+    align-self: flex-start;
+
+    .kick-off-input__name-textarea {
+      flex: 0 1 auto;
+      width: auto;
+      max-width: 100%;
+    }
+  }
+
   .kick-off-input__name_error {
     & input::placeholder,
     & .kick-off-input__name-textarea::placeholder {
@@ -421,11 +435,8 @@
   color: var(--pneumatic-color-warning);
 }
 
+.without-label,
 .with-label {
-  margin-top: 2.3rem;
-}
-
-.without-label {
   margin-top: 1.6rem;
 }
 
@@ -526,7 +537,7 @@
 .kick-off-edit-name {
   all: unset;
   flex-shrink: 0;
-  padding-right: 0.4rem;
+  margin-left: 0.4rem;
   color: var(--pneumatic-color-link);
   background-color: var(--pneumatic-color-white);
   transition: color 0.1s ease-in-out;
@@ -537,8 +548,6 @@
 }
 
 .kick-off-required-sign {
-  position: relative;
-  left: -0.3rem;
   flex-shrink: 0;
   display: inline-block;
   width: 0.68rem;
@@ -557,11 +566,6 @@
   }
 }
 
-.kick-off-required-sign + .kick-off-edit-name {
-  position: relative;
-  left: -0.3rem;
-}
-
 .workflow-name-field-container {
   margin-top: 3.2rem;
 }

frontend/src/public/components/TemplateEdit/ExtraFields/utils/FieldWithName.tsx

@@ -76,7 +76,6 @@ export function TaskDescriptionEditor({
   return (
     <RichEditor
       ref={editorRef}
-      title={formatMessage({ id: 'tasks.task-description-field' })}
       placeholder={formatMessage({ id: 'template.task-description-placeholder' })}
       defaultValue={value}
       handleChange={wrappedHandleChange}