[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\n208514585-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\n208514585-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\n208514585-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>
This commit is contained in:
Kibana Machine 2023-01-09 14:35:23 -05:00 committed by GitHub
parent 47941219b4
commit 8debf8647b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -143,6 +143,7 @@ $kbnDefaultFontSize: 14px;
max-width: 100%;
box-sizing: content-box;
border-style: none;
pointer-events: auto;
}
// 4. Blockquotes