Modified render styles to improve printability

client/src/components/shop-template-test-render/shop-template-test-render.component.jsx

@@ -19,7 +19,12 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef }) {
+export function ShopTemplateTestRender({
+  bodyshop,
+  query,
+  emailEditorRef,
+  style,
+}) {
   const [variables, setVariables] = useState({ id: "uuid" });
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
@@ -31,6 +36,7 @@ export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef }) {
       emailEditorRef.current.exportHtml(async (data) => {
         inlineCss(data.html, {
           url: `${window.location.protocol}://${window.location.host}/`,
+          removeLinkTags: false,
         }).then(async function (inlineHtml) {
           try {
             const { data: contextData } = await client.query({
@@ -59,13 +65,11 @@ export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef }) {
   };
 
   return (
-    <div>
-      <div style={{ width: "20rem" }}>
-        <Editor value={variables} onChange={(e) => setVariables(e)} />
-        <Button loading={loading} type="ghost" onClick={handleTestRender}>
-          {t("bodyshop.actions.testrender")}
-        </Button>
-      </div>
+    <div style={style}>
+      <Editor value={variables} onChange={(e) => setVariables(e)} />
+      <Button loading={loading} type="ghost" onClick={handleTestRender}>
+        {t("bodyshop.actions.testrender")}
+      </Button>
     </div>
   );
 }