From 540be6953354963dae9cfecce56fe6d5283e255e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 27 Mar 2024 16:01:30 +0100
Subject: [PATCH] fix iframe tag and style

---
 .../Sharing/Embeds/WorkflowEmbed.vue           | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
index 7e7ef39692b..538ca956c8e 100644
--- a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
+++ b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
@@ -27,6 +27,7 @@ const settings = reactive({
     initialX: -20,
     initialY: -20,
     zoom: 1,
+    applyStyle: true,
 });
 
 function onChangePosition(event: Event, xy: "x" | "y") {
@@ -55,7 +56,16 @@ const embedUrl = computed(() => {
     return url;
 });
 
-const embed = computed(() => `<iframe title="Galaxy Workflow Embed" src="${embedUrl.value}" />`);
+const embedStyle = computed(() => {
+    if (settings.applyStyle) {
+        return ' style="width: 100%; height: 700px; border: none;" ';
+    } else {
+        return " ";
+    }
+});
+const embed = computed(
+    () => `<iframe title="Galaxy Workflow Embed"${embedStyle.value}src="${embedUrl.value}"></iframe>`
+);
 
 // These Embed settings are not reactive, to we have to key them
 const embedKey = computed(() => `zoom: ${settings.zoom}, x: ${settings.initialX}, y: ${settings.initialY}`);
@@ -117,6 +127,12 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
                     class="zoom-control"
                     @onZoom="(level) => (settings.zoom = level)" />
             </label>
+
+            <BFormCheckbox
+                v-model="settings.applyStyle"
+                title="adds a width, height, and removes the border of the iframe">
+                Add basic styling
+            </BFormCheckbox>
         </div>
         <div class="preview">
             <label for="embed-code" class="w-100">