From 3d2d667e3d7a56d577f590581a19b599ab332b7b Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 2 Oct 2024 18:28:53 +1000
Subject: [PATCH] [8.x] [ResponseOps][Cases] Design Review changes PR 1
 (#194560) (#194658)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Cases] Design Review changes PR 1
(#194560)](https://github.com/elastic/kibana/pull/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":"georgiana.onoleata@elastic.co"},"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
<42973632+kibanamachine@users.noreply.github.com>","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
<42973632+kibanamachine@users.noreply.github.com>","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
<42973632+kibanamachine@users.noreply.github.com>","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ță <georgiana.onoleata@elastic.co>
---
 .../components/custom_fields/custom_fields_list/index.tsx       | 2 +-
 x-pack/plugins/cases/public/components/custom_fields/index.tsx  | 1 +
 x-pack/plugins/cases/public/components/templates/index.tsx      | 1 +
 .../cases/public/components/templates/templates_list.tsx        | 2 +-
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx
index f8475a90b94ad..90f6687141eda 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx
+++ b/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>
diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.tsx
index afe3a4ad04b32..3c754d39a63fb 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/index.tsx
+++ b/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 ? (
diff --git a/x-pack/plugins/cases/public/components/templates/index.tsx b/x-pack/plugins/cases/public/components/templates/index.tsx
index 9671b9aee8556..3be2bf92411a9 100644
--- a/x-pack/plugins/cases/public/components/templates/index.tsx
+++ b/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 ? (
diff --git a/x-pack/plugins/cases/public/components/templates/templates_list.tsx b/x-pack/plugins/cases/public/components/templates/templates_list.tsx
index ceaac643ecab3..84009e34b5fdd 100644
--- a/x-pack/plugins/cases/public/components/templates/templates_list.tsx
+++ b/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>