Merge pull request #17852 from ElectronicBlueberry/embed-fix

[24.0] Embed fix

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">