refactor(form): use col-form-label in inline mode

[spike-rabbit]

Previously we overrode the .form-label when
the form-item was switched to the inline mode.
With this change, we just use the bootstrap standard class.

---

• I confirm that this MR follows the contribution guidelines.

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[github-actions]

Documentation.
Examples.
Playwright report.

[spike-rabbit]

@dr-itz what do you think here?

The benefits in my opinion are:

• way less generated CSS
• sticking to standard BS classes, no heavy component level overrides

Downsides:

• technically, one could have changed via a CSS class to the column mode
• now the form-container is required to do that, and we have a new signal read for every form-item.

[dr-itz]

The CSS Angular generates for all the :host-context is absolutely horrible. So that needs addressing. However we can simply invert the logic here, i.e. only treat the xs case as special. I did that in #1756.

Much smaller CSS and a pure CSS solution.

(At some point we might consider container queries instead and drop the resize observer from the forms 🤷 )

[dr-itz]

The CSS Angular generates for all the :host-context is absolutely horrible. So that needs addressing. However we can simply invert the logic here, i.e. only treat the xs case as special. I did that in #1756.

Much smaller CSS and a pure CSS solution.

(At some point we might consider container queries instead and drop the resize observer from the forms 🤷 )

so...that breaks because when using si-form-item w/o a si-form-container...

[dr-itz]

Using container queries: #1757