Let TypedInput width be calculated - but forced

[dceejay]

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Proposed changes

As per discussion here - https://discourse.nodered.org/t/resize-path-field-on-resizing-editor-panel/100088 - this PR lets the typeInput box in editpanels calc it's width and resize to 100%.

BUT - this does so by using the !important tag to force it... which may or may not be a good thing...
If used without !important quite a few nodes have hardcoded style attributes that override it . so until they can all be cleaned up then this is probably the way to go... but if we are going to clean them up then we ought to apply same calc logic/style to a lot of other input fields to make them all scale nicely (at least visually)

Checklist

• I have read the contribution guidelines
• For non-bugfix PRs, I have discussed this change on the forum/slack team.
• I have run npm run test to verify the unit tests pass
• I have added suitable unit tests to cover the new/changed functionality

[Steve-Mcl]

Dave, this will affect all existing typedinputs right? And likely not in the best where users have done something a little off-spec right (like add CSS or styles to slightly increase the label widths)?

Typically, where I want the typed input to be sizable, I simply add the calc to the width of the element - the typedinputs widget then inherits that (the typedinput widget code is designed to pick up width entered by user on the origin element)

e.g:

https://github.com/Steve-Mcl/node-red-contrib-cron-plus/blob/1a830273df4a2d4c13d062aa3ad633da513c34ca/cronplus.html#L2528C43-L2528C54

    <div class="form-row cron-plus-form-row">
        <label for="node-input-outputField"><i class="fa fa-sign-out"></i> Output property</label>
        <input type="text" id="node-input-outputField" style="width: calc(100% - 130px)" placeholder="payload">
    </div>

where the 130px is the width of the label field.

Ideally, the label field width (and other parts obv) would be a CSS variable so that users can do scoped adjustments e.g

    <div class="form-row cron-plus-form-row">
        <label for="node-input-outputField"><i class="fa fa-sign-out"></i> Output property</label>
        <input type="text" id="node-input-outputField" style="width: calc(100% - var(--red-ui-edit-form-label-width))" placeholder="payload">
    </div>

   <!-- scoped setting of --red-ui-edit-form-label-width here -->

There is a lot of legacy (in existing contrib nodes) and a BIG rethink/refresh on the edit form is definitely needed, but I dont think this is the right course of action here, today?

Happy to be told otherwise?

[dceejay]

@Steve-Mcl

yes - as per discussion on the thread I have now set this just to tweak the two file nodes for now.

[Steve-Mcl]

@Steve-Mcl

yes - as per discussion on the thread I have now set this just to tweak the two file nodes for now.

Ah sorry Dave, I haven't had time to frequent the forum today and missed the whole conversation.

[dceejay]

No probs - I expected the discussion to move over when I raised the PR as well... but it didn't 🤷

[knolleary]

Propose we don't introduce --typedInput-width-adjust as that isn't a existing thing in our code base and don't want to introduce it through the backdoor

[knolleary]

TBH - this can be targeted to master for the maintenance release

[knolleary]

I have rebased the changes for the master branch and opened #5425