v3: climate control slider is unusable

[sybrenstuvel]

The problem

With web interface v3, the Climate/PID UI is crammed into too small a space. Because of this, the setpoint slider has not enough space to actually slide. Whenever you drag the slider, it'll set to its lowest point because there is not a single pixel of space left to drag it to the right.

Related: the crammed-together layout makes it hard to read. In the above screenshot, it's not set to 405° but to 40° -- the other 5 is for the 5-20 slider.

Which version of ESPHome has the issue?

2024.7.2

What type of installation are you using?

pip

Which version of Home Assistant has the issue?

No response

What platform are you using?

ESP32

Board

Self-made PCB with an ESP-WROOM-32 module

Component causing the issue

web

Example YAML snippet

web_server:
  port: 80
  local: true
  log: false
  version: 3

Anything in the logs that might be useful for us?

My browser's JS console shows this error:


Uncaught (in promise) Error: invalid template strings array
    Ho http://koelbox.fritz.box/#:4
    na http://koelbox.fritz.box/#:4
    we http://koelbox.fritz.box/#:4
    _$AC http://koelbox.fritz.box/#:4
    g http://koelbox.fritz.box/#:4
    _$AI http://koelbox.fritz.box/#:4
    ha http://koelbox.fritz.box/#:4
    update http://koelbox.fritz.box/#:4
    performUpdate http://koelbox.fritz.box/#:2
    scheduleUpdate http://koelbox.fritz.box/#:2
    _$Ej http://koelbox.fritz.box/#:2
koelbox.fritz.box:4:339

Not sure if it's related, but if it is, here it is.

### Additional information

_No response_