[Feat]: A solution to define properties of Form-Field depending on device

[mad99]

Related to a problem: Currently only with Custom CSS feasable.

It would be helpfull and a better UX for visitors, if Formfields could defined depending on the device.
So for example the Label Position, Alignment, the value of the Label, margins, paddings, font-sice, ... could defined different for Desktop, Tablet and Mobile.

Example

For Desktop & Tablet -> Position: «Left» + Alignment: «Right»
BUT
For Mobile -> Position «Top» + Aligment: «Left»

Currently this is only possible with custom CSS like this:

 .lowcoder-container {
/*define a container instead of @media (max-width: 576px) -> because it does not work in lowcoder preview and edit-mode*/
  container-type: inline-size;
}
@container (max-width: 576px) {
  /* Styles for mobile only */
  .ui-comp-input > div > div > div > div {
      flex-direction: column;
  }

  .ui-comp-input > div > div > div > div > div:nth-child(1){
    /*border: green 3px solid;*/
    width: 100% !important;
    max-width: 100% !important;
    justify-content: start;
  }
  .ui-comp-input > div > div > div > div > div:nth-child(2){
    /*border: olive 3px solid;*/ 
    width: 100% !important;
    max-width: 100% !important;
    justify-content: start;
  }
}

The solution I'd like:

• Some kind of switch/Tab on every property to fill in the needed value for different devices.
• Or maybe a field that would allow some kind of formula, combined with {{screenInfo.isMobile
  }} to set own values as granular as the situation needs it.
• Or maybe with some kind of defined global theme variables useable in this field (described here: https://discord.com/channels/1096896040159957084/1390667223688810598/1390667223688810598)
• Or with some kind of tripple tab on the top of the properties pannel.

To be honest, I do not know the best solution for. But Falk Wolsky | Lowcoder has asked to create this FEAT.
So I hope he has an idea or vision for this himself.

Alternatives I've considered:

Writing custom CSS in the Prelod CSS are for worspace-wide effect. Would be nice to get some kind of Theme-wide alternative for (See also in the link above)

Additional context:

Falk Wolsky asked for this FEAT. To be honest I guess it could open a never ending story in the current state of Lowcoder.