diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap b/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
index 01a8337d2d313..782d5364de821 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
 "<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 720px; width: 1080px; }</style><div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 100px; width: 150px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 0 0-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 0 0-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 0 0 6.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 0 0-2.413-.815 3.978 3.978 0 0 0-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 0 0 2.4.822 3.977 3.977 0 0 0 3.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 0 0-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
@@ -18,7 +18,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
 "<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 350px; width: 525px; }</style><div class=\\"root\\" style=\\"height: 398px; width: 525px;\\"><div class=\\"container\\" style=\\"height: 350px; width: 525px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 100px; width: 150px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 0 0-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 0 0-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 0 0 6.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 0 0-2.413-.815 3.978 3.978 0 0 0-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 0 0 2.4.822 3.977 3.977 0 0 0 3.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 0 0-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
@@ -30,7 +30,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
 "<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 720px; width: 1080px; }</style><div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 100px; width: 150px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 0 0-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 0 0-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 0 0 6.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 0 0-2.413-.815 3.978 3.978 0 0 0-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 0 0 2.4.822 3.977 3.977 0 0 0 3.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 0 0-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
@@ -42,7 +42,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
 "<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 350px; width: 350px; }</style><div class=\\"root\\" style=\\"height: 398px; width: 350px;\\"><div class=\\"container\\" style=\\"height: 350px; width: 350px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 100px; width: 150px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 0 0-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 0 0-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 0 0 6.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 0 0-2.413-.815 3.978 3.978 0 0 0-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 0 0 2.4.822 3.977 3.977 0 0 0 3.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 0 0-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
@@ -54,7 +54,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
 "<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 267px; width: 400px; }</style><div class=\\"root\\" style=\\"height: 315px; width: 400px;\\"><div class=\\"container\\" style=\\"height: 267px; width: 400px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 100px; width: 150px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 0 0-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 0 0-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 0 0 6.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 0 0-2.413-.815 3.978 3.978 0 0 0-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 0 0 2.4.822 3.977 3.977 0 0 0 3.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 0 0-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot
index 1b351e9ac0f6a..c3352b52c591d 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot
@@ -88,9 +88,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -126,9 +126,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -165,9 +165,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -205,9 +205,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -249,9 +249,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -290,9 +290,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -332,9 +332,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -368,9 +368,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -418,9 +418,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -471,9 +471,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -509,9 +509,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -545,9 +545,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -582,9 +582,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -620,9 +620,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -658,9 +658,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -698,9 +698,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -735,9 +735,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -772,9 +772,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -811,9 +811,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -862,9 +862,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -905,9 +905,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -996,9 +996,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1065,9 +1065,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1105,9 +1105,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1146,9 +1146,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1188,9 +1188,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1228,9 +1228,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1268,9 +1268,9 @@ exports[`Storyshots shareables/Canvas component 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1312,6 +1312,11 @@ exports[`Storyshots shareables/Canvas component 1`] = `
             >
               <div
                 className="euiFlexItem euiFlexItem--flexGrowZero"
+                style={
+                  Object {
+                    "flexShrink": 0,
+                  }
+                }
               >
                 <a
                   className="euiLink euiLink--primary"
@@ -1582,9 +1587,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1620,9 +1625,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1659,9 +1664,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1699,9 +1704,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1743,9 +1748,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1784,9 +1789,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1826,9 +1831,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1862,9 +1867,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1912,9 +1917,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -1965,9 +1970,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2003,9 +2008,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2039,9 +2044,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2076,9 +2081,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2114,9 +2119,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2152,9 +2157,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2192,9 +2197,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2229,9 +2234,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2266,9 +2271,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2305,9 +2310,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2356,9 +2361,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2399,9 +2404,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2490,9 +2495,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2559,9 +2564,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2599,9 +2604,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2640,9 +2645,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2682,9 +2687,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2722,9 +2727,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2762,9 +2767,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 177.77777777777777,
+                  "width": 1280,
                 }
               }
             >
@@ -2806,6 +2811,11 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
             >
               <div
                 className="euiFlexItem euiFlexItem--flexGrowZero"
+                style={
+                  Object {
+                    "flexShrink": 0,
+                  }
+                }
               >
                 <a
                   className="euiLink euiLink--primary"
@@ -3074,9 +3084,9 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
               className="preview"
               style={
                 Object {
-                  "height": 100,
+                  "height": 720,
                   "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                  "width": 150,
+                  "width": 1080,
                 }
               }
             >
@@ -3116,6 +3126,11 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
             >
               <div
                 className="euiFlexItem euiFlexItem--flexGrowZero"
+                style={
+                  Object {
+                    "flexShrink": 0,
+                  }
+                }
               >
                 <a
                   className="euiLink euiLink--primary"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap b/x-pack/legacy/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
index c287fe96c0584..746e1ca4f057b 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<App /> App renders properly 1`] = `
 "<div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 100px; width: 150px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoading\\" focusable=\\"false\\"></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon\\" focusable=\\"false\\" aria-hidden=\\"true\\"></svg></button></div></div></div></div></div></div></div></div></div></div>"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot
index bad95ca4fb5b5..6570016336d9e 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot
@@ -41,9 +41,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -79,9 +79,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -118,9 +118,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -158,9 +158,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -202,9 +202,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -243,9 +243,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -285,9 +285,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -321,9 +321,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -371,9 +371,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -424,9 +424,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -462,9 +462,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -498,9 +498,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -535,9 +535,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -573,9 +573,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -611,9 +611,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -651,9 +651,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -688,9 +688,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -725,9 +725,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -764,9 +764,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -815,9 +815,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -858,9 +858,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -949,9 +949,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -1018,9 +1018,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -1058,9 +1058,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -1099,9 +1099,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -1141,9 +1141,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -1181,9 +1181,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -1221,9 +1221,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 177.77777777777777,
+                "width": 1280,
               }
             }
           >
@@ -1265,6 +1265,11 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
           >
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "flexShrink": 0,
+                }
+              }
             >
               <a
                 className="euiLink euiLink--primary"
@@ -1487,9 +1492,9 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
             className="preview"
             style={
               Object {
-                "height": 100,
+                "height": 720,
                 "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-                "width": 150,
+                "width": 1080,
               }
             }
           >
@@ -1529,6 +1534,11 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
           >
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "flexShrink": 0,
+                }
+              }
             >
               <a
                 className="euiLink euiLink--primary"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.examples.storyshot
index cc27e42e3fe65..5fa3890f7fedd 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.examples.storyshot
@@ -33,9 +33,9 @@ exports[`Storyshots shareables/Footer/Scrubber component 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 150,
+              "width": 1080,
             }
           }
         >
@@ -92,9 +92,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -130,9 +130,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -169,9 +169,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -209,9 +209,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -253,9 +253,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -294,9 +294,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -336,9 +336,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -372,9 +372,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -422,9 +422,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -475,9 +475,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -513,9 +513,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -549,9 +549,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -586,9 +586,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -624,9 +624,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -662,9 +662,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -702,9 +702,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -739,9 +739,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -776,9 +776,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -815,9 +815,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -866,9 +866,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -909,9 +909,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1000,9 +1000,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1069,9 +1069,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1109,9 +1109,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1150,9 +1150,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1192,9 +1192,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1232,9 +1232,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1272,9 +1272,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 177.77777777777777,
+              "width": 1280,
             }
           }
         >
@@ -1333,9 +1333,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: hello 1`] = `
           className="preview"
           style={
             Object {
-              "height": 100,
+              "height": 720,
               "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)",
-              "width": 150,
+              "width": 1080,
             }
           }
         >
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot
index 6bb60b8e574a2..8d0ced56d1474 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot
@@ -19,6 +19,11 @@ exports[`Storyshots shareables/Footer/Title component 1`] = `
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
+      style={
+        Object {
+          "flexShrink": 0,
+        }
+      }
     >
       <a
         className="euiLink euiLink--primary"
@@ -83,6 +88,11 @@ exports[`Storyshots shareables/Footer/Title contextual: austin 1`] = `
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
+      style={
+        Object {
+          "flexShrink": 0,
+        }
+      }
     >
       <a
         className="euiLink euiLink--primary"
@@ -147,6 +157,11 @@ exports[`Storyshots shareables/Footer/Title contextual: hello 1`] = `
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
+      style={
+        Object {
+          "flexShrink": 0,
+        }
+      }
     >
       <a
         className="euiLink euiLink--primary"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot
index 7c4395820776e..b159e6499ed9f 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot
@@ -128,18 +128,8 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            className="euiFormRow"
+            className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
           >
-            <div
-              className="euiFormRow__labelWrapper"
-            >
-              <label
-                className="euiFormLabel euiFormRow__label"
-                htmlFor="generated-id"
-              >
-                 
-              </label>
-            </div>
             <div
               className="euiFormRow__fieldWrapper"
             >
@@ -303,18 +293,8 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            className="euiFormRow"
+            className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
           >
-            <div
-              className="euiFormRow__labelWrapper"
-            >
-              <label
-                className="euiFormLabel euiFormRow__label"
-                htmlFor="generated-id"
-              >
-                 
-              </label>
-            </div>
             <div
               className="euiFormRow__fieldWrapper"
             >
@@ -478,18 +458,8 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            className="euiFormRow"
+            className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
           >
-            <div
-              className="euiFormRow__labelWrapper"
-            >
-              <label
-                className="euiFormLabel euiFormRow__label"
-                htmlFor="generated-id"
-              >
-                 
-              </label>
-            </div>
             <div
               className="euiFormRow__fieldWrapper"
             >
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
index 072cf01255a0d..8c14377374295 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
@@ -396,18 +396,8 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
                           >
-                            <div
-                              class="euiFormRow__labelWrapper"
-                            >
-                              <label
-                                class="euiFormLabel euiFormRow__label"
-                                for="generated-id"
-                              >
-                                 
-                              </label>
-                            </div>
                             <div
                               class="euiFormRow__fieldWrapper"
                             >