Can Modules Be Made Wider for Enhanced Code Viewing During Development?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

is there a way to make the modules wider? I want to see a wider view of my code as I develop.

2

I’m not sure if you’re referring to the Pipedream UI or a specific module. Could you please provide more information or clarify your question? This will help me better understand your needs and provide a more accurate answer.

3

Pipedream UI. I want every module to take up more width on my screen

4

Currently, there isn’t a built-in feature to adjust the width of modules in the Pipedream UI. However, I understand that having a wider view of your code can be helpful during development. I recommend providing feedback to the Pipedream team about this feature request. You can submit your feedback or feature requests here: https://forms.pipedream.com/feedback

5

The link returns 404

6

I apologize for the broken link. To provide feedback or feature requests to the Pipedream team, you can visit the Pipedream community forum at https://community.pipedream.com/ and create a new post with your suggestion. The Pipedream team actively monitors the forum and will consider your feedback for future improvements.

7

Hi , I think you can adjust the zoom percentage of your browser instead

8

Hi , appreciate the help but it does not seem to work as I want it to. I made a small tampermonkey script to increase the width so no stress :+1:

9

Here is the script if anyone is interested, feel free to change the px value or make it percentage based. Can’t take full credit though, thanks GPT :joy:

// ==UserScript==
// @name         Widen Pipedream Modules
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Increase width of all Pipedream Modules
// @author       You
// @match        https://pipedream.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to set the max-width style of a div
    function setMaxWidth(div) {
        div.style.maxWidth = '1500px';
    }

    // Function to check for and apply the style to the divs
    function checkDivs() {
        const divs = document.querySelectorAll('div.relative.rounded.border-2.group.mx-auto');

        divs.forEach((div) => {
            // Skip if the max-width style is already set
            if (div.style.maxWidth === '1500px') {
                return;
            }

            // Apply the style
            setMaxWidth(div);
        });
    }

    // Observe changes to the DOM and reapply the style if necessary
    const observer = new MutationObserver(checkDivs);
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['class', 'style']
    });

    // Apply the style to the existing divs
    checkDivs();
})();