From 8debf8647be9d0fe176c6db97e1b2881fb21d88e Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 9 Jan 2023 14:35:23 -0500
Subject: [PATCH] [8.6] [Dashboard] Add styling to allow clickable TSVB
 markdown images (#147802) (#148586)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Dashboard] Add styling to allow clickable TSVB markdown images
(#147802)](https://github.com/elastic/kibana/pull/147802)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-01-09T18:27:56Z","message":"[Dashboard]
Add styling to allow clickable TSVB markdown images (#147802)\n\n##
Summary\r\n\r\nAfter upgrading to
[React\r\n17](https://github.com/elastic/kibana/pull/128239), the old
version of\r\n`react-grid-layout` was no longer compatible and required
an upgrade as\r\nwell. However, this upgrade included
a\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nthat
overcame a visual glitch with images, which made it so that
a\r\nclickable image in TSVB markdown was only clickable in a small
region at\r\nthe bottom of the image.\r\n\r\nThis PR fixes this by
undoing the changes made in the
aforementioned\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nspecifically
for TSVB markdown images.\r\n\r\n###
Videos\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eaa9423d51c043a9a6f4640cee26490b6d817dea","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Platform-Design","Feature:Dashboard","release_note:fix","Team:Presentation","loe:hours","Team:Visualizations","impact:low","backport:prev-minor","v8.7.0"],"number":147802,"url":"https://github.com/elastic/kibana/pull/147802","mergeCommit":{"message":"[Dashboard]
Add styling to allow clickable TSVB markdown images (#147802)\n\n##
Summary\r\n\r\nAfter upgrading to
[React\r\n17](https://github.com/elastic/kibana/pull/128239), the old
version of\r\n`react-grid-layout` was no longer compatible and required
an upgrade as\r\nwell. However, this upgrade included
a\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nthat
overcame a visual glitch with images, which made it so that
a\r\nclickable image in TSVB markdown was only clickable in a small
region at\r\nthe bottom of the image.\r\n\r\nThis PR fixes this by
undoing the changes made in the
aforementioned\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nspecifically
for TSVB markdown images.\r\n\r\n###
Videos\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eaa9423d51c043a9a6f4640cee26490b6d817dea"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/147802","number":147802,"mergeCommit":{"message":"[Dashboard]
Add styling to allow clickable TSVB markdown images (#147802)\n\n##
Summary\r\n\r\nAfter upgrading to
[React\r\n17](https://github.com/elastic/kibana/pull/128239), the old
version of\r\n`react-grid-layout` was no longer compatible and required
an upgrade as\r\nwell. However, this upgrade included
a\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nthat
overcame a visual glitch with images, which made it so that
a\r\nclickable image in TSVB markdown was only clickable in a small
region at\r\nthe bottom of the image.\r\n\r\nThis PR fixes this by
undoing the changes made in the
aforementioned\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nspecifically
for TSVB markdown images.\r\n\r\n###
Videos\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eaa9423d51c043a9a6f4640cee26490b6d817dea"}}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
---
 src/plugins/kibana_react/public/markdown/_markdown.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/plugins/kibana_react/public/markdown/_markdown.scss b/src/plugins/kibana_react/public/markdown/_markdown.scss
index 3c9b1cd165bab6..c11aefe1f4d97c 100644
--- a/src/plugins/kibana_react/public/markdown/_markdown.scss
+++ b/src/plugins/kibana_react/public/markdown/_markdown.scss
@@ -143,6 +143,7 @@ $kbnDefaultFontSize: 14px;
     max-width: 100%;
     box-sizing: content-box;
     border-style: none;
+    pointer-events: auto;
   }
 
   // 4. Blockquotes