[8.x] [ResponseOps][Cases] Design Review changes PR 1 (#194560) (#194658

)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Cases] Design Review changes PR 1
(#194560)](#194560)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Georgiana-Andreea
Onoleață","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-02T06:48:15Z","message":"[ResponseOps][Cases]
Design Review changes PR 1 (#194560)\n\nConnected to
https://github.com/elastic/kibana/issues/188187\r\n\r\n##
Summary\r\n\r\n- Field names have been aligned on top to ensure
consistency with the\r\nfields area on the right\r\n<img width=\"1495\"
alt=\"Screenshot 2024-10-01 at 14 30
38\"\r\nsrc=\"https://github.com/user-attachments/assets/51578be1-6cd8-43e0-a800-61e562aa5d77\">\r\n\r\n-
Custom field and template name text size has been reduced to
align\r\nwith the badge\r\n![Screenshot 2024-10-01 at 14
34\r\n15](https://github.com/user-attachments/assets/986f9426-640e-4158-8614-662672f4ca72)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"616c6e837fedeb5c15d62670c48072c1d6ea542b","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","Feature:Cases","backport:prev-minor","v8.16.0"],"title":"[ResponseOps][Cases]
Design Review changes PR
1","number":194560,"url":"https://github.com/elastic/kibana/pull/194560","mergeCommit":{"message":"[ResponseOps][Cases]
Design Review changes PR 1 (#194560)\n\nConnected to
https://github.com/elastic/kibana/issues/188187\r\n\r\n##
Summary\r\n\r\n- Field names have been aligned on top to ensure
consistency with the\r\nfields area on the right\r\n<img width=\"1495\"
alt=\"Screenshot 2024-10-01 at 14 30
38\"\r\nsrc=\"https://github.com/user-attachments/assets/51578be1-6cd8-43e0-a800-61e562aa5d77\">\r\n\r\n-
Custom field and template name text size has been reduced to
align\r\nwith the badge\r\n![Screenshot 2024-10-01 at 14
34\r\n15](https://github.com/user-attachments/assets/986f9426-640e-4158-8614-662672f4ca72)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"616c6e837fedeb5c15d62670c48072c1d6ea542b"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194560","number":194560,"mergeCommit":{"message":"[ResponseOps][Cases]
Design Review changes PR 1 (#194560)\n\nConnected to
https://github.com/elastic/kibana/issues/188187\r\n\r\n##
Summary\r\n\r\n- Field names have been aligned on top to ensure
consistency with the\r\nfields area on the right\r\n<img width=\"1495\"
alt=\"Screenshot 2024-10-01 at 14 30
38\"\r\nsrc=\"https://github.com/user-attachments/assets/51578be1-6cd8-43e0-a800-61e562aa5d77\">\r\n\r\n-
Custom field and template name text size has been reduced to
align\r\nwith the badge\r\n![Screenshot 2024-10-01 at 14
34\r\n15](https://github.com/user-attachments/assets/986f9426-640e-4158-8614-662672f4ca72)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"616c6e837fedeb5c15d62670c48072c1d6ea542b"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Georgiana-Andreea Onoleață <[email protected]>

x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx

@@ -69,7 +69,7 @@ const CustomFieldsListComponent: React.FC<Props> = (props) => {
                   <EuiFlexItem grow={true}>
                     <EuiFlexGroup alignItems="center" gutterSize="s">
                       <EuiFlexItem grow={false}>
-                        <EuiText>
+                        <EuiText size="s">
                           <h4>{customField.label}</h4>
                         </EuiText>
                       </EuiFlexItem>

x-pack/plugins/cases/public/components/custom_fields/index.tsx

@@ -70,6 +70,7 @@ const CustomFieldsComponent: React.FC<Props> = ({
       title={<h3>{i18n.TITLE}</h3>}
       description={<p>{i18n.DESCRIPTION}</p>}
       data-test-subj="custom-fields-form-group"
+      css={{ alignItems: 'flex-start' }}
     >
       <EuiPanel paddingSize="s" color="subdued" hasBorder={false} hasShadow={false}>
         {customFields.length ? (

x-pack/plugins/cases/public/components/templates/index.tsx

@@ -82,6 +82,7 @@ const TemplatesComponent: React.FC<Props> = ({
       }
       description={<p>{i18n.TEMPLATE_DESCRIPTION}</p>}
       data-test-subj="templates-form-group"
+      css={{ alignItems: 'flex-start' }}
     >
       <EuiPanel paddingSize="s" color="subdued" hasBorder={false} hasShadow={false}>
         {templates.length ? (

x-pack/plugins/cases/public/components/templates/templates_list.tsx

@@ -63,7 +63,7 @@ const TemplatesListComponent: React.FC<Props> = (props) => {
                   <EuiFlexItem grow={true}>
                     <EuiFlexGroup alignItems="center" gutterSize="s">
                       <EuiFlexItem grow={false}>
-                        <EuiText>
+                        <EuiText size="s">
                           <h4>
                             <TruncatedText text={template.name} />
                           </h4>