[Cool checkboxes] Calculate span width automatically

[n-srg]

Bug report

Tradeshift UI version affected

v10

Expected Behavior

<fieldset class="controls-switch">
   <label>
      <span class="title-checkbox">
         Inactive
      </span>
      <input type="checkbox">
   </label>
</fieldset>

span.title-checkbox should have width calculated automatically (maybe add padding between span and input)

Actual Behavior

span.title-checkbox have pretty weird width = width: calc(56%);

This checkbox to break the flex layout ie. if container have display: flex; justify-content: space-between, we can see checkbox goes next line

I wonder do we have any reason to calculate width that way?

[wiredearp]

Those checkboxes were not originally designed to exist outside of standard Forms (where of course this problem doesn't happen), so this will be fixed as part of the "standalone form elements" task if and when we get the time to work on UI components again some day; we will in that case refactor the (standard) Forms to work entirely with flex layout and then these weird CSS hacks should not be needed. I suggest you override this particular CSS in your app for now, since I am not sure we will ever perform this refactoring (which might break other apps) on the v10 branch that you are using just now.

[n-srg]

yeah, thanks for confirming. I will override that property :+1: