Fix: Fix admin widget previews [n/a]

elementor · Feb 13, 2025 · f562ddb · f562ddb
1 parent 3b1e238
commit f562ddb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 32 deletions.
diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
@@ -45,29 +45,3 @@ html[dir='rtl'] #ea11y-app {
 		max-width: 100% !important;
 	}
 }
-
-/* Widget style for statement section */
-
-.ea11y-statement--widget-preview {
-	height: 250px;
-	position: relative;
-	padding: 25px;
-	overflow: hidden;
-}
-
-.ea11y-statement--widget-preview .ea11y-widget-container--preview {
-	position: absolute;
-}
-
-.ea11y-statement--widget-preview .ea11y-widget-content::after {
-	content: '';
-
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 40px;
-
-	background-color: #FCFDFF;
-	opacity: 0.6;
-}
diff --git a/modules/settings/assets/js/layouts/statement-link.js b/modules/settings/assets/js/layouts/statement-link.js
@@ -25,13 +25,46 @@ import { mixpanelService } from '@ea11y/services';
 import { useEntityRecords } from '@wordpress/core-data';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { WIDGET_PREVIEW_ID } from '../constants';
 
 const StyledPreviewContainer = styled(Box)`
-	padding: 0;
 	margin-top: ${({ theme }) => theme.spacing(2)};
 
 	border-radius: 4px;
 	border: 1px solid ${({ theme }) => theme.palette.divider};
+
+	height: 250px;
+	position: relative;
+	padding: 25px;
+	overflow: hidden;
+
+	& .ea11y-widget-container {
+		transform: translateY(0);
+	}
+
+	& .ea11y-widget-container--preview {
+		position: absolute;
+	}
+
+	& .ea11y-widget-content::after {
+		content: '';
+
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 40px;
+
+		background-color: #fcfdff;
+		opacity: 0.6;
+	}
+
+	@media screen and (min-width: 480px) {
+		& .ea11y-widget-container--preview {
+			bottom: 0;
+			right: 0;
+		}
+	}
 `;
 
 const StatementLink = () => {
@@ -224,11 +257,14 @@ const StatementLink = () => {
 							{__('Preview link in widget', 'pojo-accessibility')}
 						</Typography>
 
-						<StyledPreviewContainer
-							id="ea11y-widget-preview--container"
-							className="ea11y-statement--widget-preview"
-						>
-							<WidgetLoader />
+						<StyledPreviewContainer id="ea11y-widget-preview--container">
+							<WidgetLoader
+								onLoad={() => {
+									if (document.getElementById(WIDGET_PREVIEW_ID)) {
+										window?.ea11yWidget?.widget?.open();
+									}
+								}}
+							/>
 						</StyledPreviewContainer>
 					</Box>
 				</Box>

diff --git a/modules/settings/assets/js/layouts/widget-preview.js b/modules/settings/assets/js/layouts/widget-preview.js
@@ -23,6 +23,11 @@ const StyledPreview = styled(CardContent)`
 
 		transform: scale(70%);
 	}
+
+	& #ea11y-root #ea11y-widget-container {
+		position: initial;
+		transform: translateY(0);
+	}
 `;
 
 const WidgetPreview = () => {