[8.x] [Console] Finishing design touches (#217887) (#218221)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Console] Finishing design touches
(#217887)](https://github.com/elastic/kibana/pull/217887)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Elena
Stoeva","email":"59341489+ElenaStoeva@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-15T09:08:32Z","message":"[Console]
Finishing design touches (#217887)\n\nFixes
https://github.com/elastic/kibana/issues/200195\n\n## Summary\n\nThis PR
adds the following small design improvements:\n\n### 1. Ensures that the
bottom border of the selection doesn't overlap\nwith the next line by
shifting the border up.\n\nBefore:\n<img width=\"1118\" alt=\"Screenshot
2025-04-10 at 17 50
35\"\nsrc=\"https://github.com/user-attachments/assets/085aa499-7842-4bcf-ba97-49706b58c9ad\"\n/>\n\n\nNow:\n<img
width=\"1124\" alt=\"Screenshot 2025-04-10 at 17 51
05\"\nsrc=\"https://github.com/user-attachments/assets/37f2a6ca-3c0b-4a00-b1cd-117334feb480\"\n/>\n\nWe
also increase the line height a little to ensure that the action\npanel
box fits inside a single-line request selection box:\n\n\n<img
width=\"1136\" alt=\"Screenshot 2025-04-10 at 18 00
07\"\nsrc=\"https://github.com/user-attachments/assets/3f618049-d5d0-46c4-8d1b-5098a00985f5\"\n/>\n\n\n\n\n###
2. Ensures that the left border of the selection doesn't overlap\nwith
the line numbers by shifting the border to the right.\n\nBefore:\n<img
width=\"740\" alt=\"Screenshot 2025-04-10 at 17 49
30\"\nsrc=\"https://github.com/user-attachments/assets/184599c3-d5e8-40b4-b8f4-a2f40caa2c92\"\n/>\n\n\nNow:\n<img
width=\"652\" alt=\"Screenshot 2025-04-10 at 17 50
01\"\nsrc=\"https://github.com/user-attachments/assets/edacd4aa-9478-4d1a-8217-d6d1181e452d\"\n/>\n\n\n###
3. Increases the contrast between the selected text and the\nselection
blue box by increasing the transparency of the blue
selection\nbox:\n\n\nBefore:\n<img width=\"735\" alt=\"Screenshot
2025-04-10 at 17 51
43\"\nsrc=\"https://github.com/user-attachments/assets/95ff61d9-f4ef-4db9-b3d5-4ed8a64cc792\"\n/>\n\nNow:\n<img
width=\"1124\" alt=\"Screenshot 2025-04-10 at 17 51
14\"\nsrc=\"https://github.com/user-attachments/assets/9b80c3a7-a053-49df-bfd2-f00b7765b545\"\n/>\n\n---------\n\nCo-authored-by:
Matthew Kime
<matt@mattki.me>","sha":"4cf7c3c5b8957e4daebe94bcb1c4233c6c236b4f","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Console","Team:Kibana
Management","release_note:skip","backport:prev-minor","v9.1.0","v8.19.0"],"title":"[Console]
Finishing design
touches","number":217887,"url":"https://github.com/elastic/kibana/pull/217887","mergeCommit":{"message":"[Console]
Finishing design touches (#217887)\n\nFixes
https://github.com/elastic/kibana/issues/200195\n\n## Summary\n\nThis PR
adds the following small design improvements:\n\n### 1. Ensures that the
bottom border of the selection doesn't overlap\nwith the next line by
shifting the border up.\n\nBefore:\n<img width=\"1118\" alt=\"Screenshot
2025-04-10 at 17 50
35\"\nsrc=\"https://github.com/user-attachments/assets/085aa499-7842-4bcf-ba97-49706b58c9ad\"\n/>\n\n\nNow:\n<img
width=\"1124\" alt=\"Screenshot 2025-04-10 at 17 51
05\"\nsrc=\"https://github.com/user-attachments/assets/37f2a6ca-3c0b-4a00-b1cd-117334feb480\"\n/>\n\nWe
also increase the line height a little to ensure that the action\npanel
box fits inside a single-line request selection box:\n\n\n<img
width=\"1136\" alt=\"Screenshot 2025-04-10 at 18 00
07\"\nsrc=\"https://github.com/user-attachments/assets/3f618049-d5d0-46c4-8d1b-5098a00985f5\"\n/>\n\n\n\n\n###
2. Ensures that the left border of the selection doesn't overlap\nwith
the line numbers by shifting the border to the right.\n\nBefore:\n<img
width=\"740\" alt=\"Screenshot 2025-04-10 at 17 49
30\"\nsrc=\"https://github.com/user-attachments/assets/184599c3-d5e8-40b4-b8f4-a2f40caa2c92\"\n/>\n\n\nNow:\n<img
width=\"652\" alt=\"Screenshot 2025-04-10 at 17 50
01\"\nsrc=\"https://github.com/user-attachments/assets/edacd4aa-9478-4d1a-8217-d6d1181e452d\"\n/>\n\n\n###
3. Increases the contrast between the selected text and the\nselection
blue box by increasing the transparency of the blue
selection\nbox:\n\n\nBefore:\n<img width=\"735\" alt=\"Screenshot
2025-04-10 at 17 51
43\"\nsrc=\"https://github.com/user-attachments/assets/95ff61d9-f4ef-4db9-b3d5-4ed8a64cc792\"\n/>\n\nNow:\n<img
width=\"1124\" alt=\"Screenshot 2025-04-10 at 17 51
14\"\nsrc=\"https://github.com/user-attachments/assets/9b80c3a7-a053-49df-bfd2-f00b7765b545\"\n/>\n\n---------\n\nCo-authored-by:
Matthew Kime
<matt@mattki.me>","sha":"4cf7c3c5b8957e4daebe94bcb1c4233c6c236b4f"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217887","number":217887,"mergeCommit":{"message":"[Console]
Finishing design touches (#217887)\n\nFixes
https://github.com/elastic/kibana/issues/200195\n\n## Summary\n\nThis PR
adds the following small design improvements:\n\n### 1. Ensures that the
bottom border of the selection doesn't overlap\nwith the next line by
shifting the border up.\n\nBefore:\n<img width=\"1118\" alt=\"Screenshot
2025-04-10 at 17 50
35\"\nsrc=\"https://github.com/user-attachments/assets/085aa499-7842-4bcf-ba97-49706b58c9ad\"\n/>\n\n\nNow:\n<img
width=\"1124\" alt=\"Screenshot 2025-04-10 at 17 51
05\"\nsrc=\"https://github.com/user-attachments/assets/37f2a6ca-3c0b-4a00-b1cd-117334feb480\"\n/>\n\nWe
also increase the line height a little to ensure that the action\npanel
box fits inside a single-line request selection box:\n\n\n<img
width=\"1136\" alt=\"Screenshot 2025-04-10 at 18 00
07\"\nsrc=\"https://github.com/user-attachments/assets/3f618049-d5d0-46c4-8d1b-5098a00985f5\"\n/>\n\n\n\n\n###
2. Ensures that the left border of the selection doesn't overlap\nwith
the line numbers by shifting the border to the right.\n\nBefore:\n<img
width=\"740\" alt=\"Screenshot 2025-04-10 at 17 49
30\"\nsrc=\"https://github.com/user-attachments/assets/184599c3-d5e8-40b4-b8f4-a2f40caa2c92\"\n/>\n\n\nNow:\n<img
width=\"652\" alt=\"Screenshot 2025-04-10 at 17 50
01\"\nsrc=\"https://github.com/user-attachments/assets/edacd4aa-9478-4d1a-8217-d6d1181e452d\"\n/>\n\n\n###
3. Increases the contrast between the selected text and the\nselection
blue box by increasing the transparency of the blue
selection\nbox:\n\n\nBefore:\n<img width=\"735\" alt=\"Screenshot
2025-04-10 at 17 51
43\"\nsrc=\"https://github.com/user-attachments/assets/95ff61d9-f4ef-4db9-b3d5-4ed8a64cc792\"\n/>\n\nNow:\n<img
width=\"1124\" alt=\"Screenshot 2025-04-10 at 17 51
14\"\nsrc=\"https://github.com/user-attachments/assets/9b80c3a7-a053-49df-bfd2-f00b7765b545\"\n/>\n\n---------\n\nCo-authored-by:
Matthew Kime
<matt@mattki.me>","sha":"4cf7c3c5b8957e4daebe94bcb1c4233c6c236b4f"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>

src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor.tsx

@@ -222,6 +222,7 @@ export const MonacoEditor = ({ localStorageValue, value, setValue }: EditorProps
           hover: {
             above: false,
           },
+          lineHeight: 24,
         }}
         suggestionProvider={suggestionProvider}
         enableFindAction={true}

src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor_output.tsx

@@ -193,6 +193,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
           wordWrap: readOnlySettings.wrapMode === true ? 'on' : 'off',
           theme: CONSOLE_THEME_ID,
           automaticLayout: true,
+          lineHeight: 24,
         }}
       />
     </div>

src/platform/plugins/shared/console/public/styles/_app.scss

@@ -121,10 +121,10 @@
   content: '';
   position: absolute;
   top: 0;
-  bottom: -$euiSize * .3;
-  left: -$euiSize * 3;
+  bottom: -$euiSize * .1;
+  left: -$euiSize * .5;
   right: 0;
-  background: transparentize($euiColorPrimary, .9);
+  background: transparentize($euiColorPrimary, .95);
   border: $euiBorderThin;
   border-color: $euiColorPrimary;
   pointer-events: none; /* Ensures the pseudo-element doesn't block interactions */

x-pack/test_serverless/functional/test_suites/common/console/console.ts

@@ -30,7 +30,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await retry.try(async () => {
         const actualRequest = await PageObjects.console.getEditorText();
         log.debug(actualRequest);
-        expect(actualRequest.replace(/\s/g, '')).to.eql(DEFAULT_INPUT_VALUE.replace(/\s/g, ''));
+        expect(DEFAULT_INPUT_VALUE.replace(/\s/g, '')).to.contain(actualRequest.replace(/\s/g, ''));
       });
     });