Touchpad height customization works visually but breaks gesture input

[Ev1l-Zer0]

I’m trying to make the touchpad element larger so it’s easier to use on a tablet. The default size is too small for comfortable swiping.

I’ve tried this:

type: custom:universal-remote-card
platform: Apple TV
remote_id: remote.great_room
media_player_id: media_player.great_room_3
styles: ""
custom_actions:
  - type: button
    tap_action:
      action: call-service
      service: script.great_room_tv_mute
    name: mute
    icon: mdi:volume-low
  - type: button
    tap_action:
      action: call-service
      service: script.volume_up_2
    name: volume up 10
    icon: mdi:volume-plus
  - type: button
    tap_action:
      action: call-service
      service: script.volume_down
    name: volume down 10
    icon: mdi:volume-minus
  - type: touchpad
    name: touchpad
    styles: |
      toucharea {
      height: 500px;
      }
rows:
  - - home
    - menu
    - keyboard
    - power
  - - volume down 10
    - volume_down
    - mute
    - volume_up
    - volume up 10
  - - touchpad
visibility:
  - condition: state
    entity: input_select.tv_select
    state: Great Room TV
config_entry_id: 01K1F7VVYW9K6QPD6SRE9XZCG0

The styling works — the touchpad visually renders at 500px tall, which is exactly what I wanted. However, once I apply the custom height, the touchpad stops responding to gesture input. Tapping and swiping no longer register as touchpad actions.

When I remove the styles block entirely, the touchpad returns to its default size and gestures work normally again.

Is it possible to resize the touchpad while preserving gesture input? If so, what’s the correct way to do it? Am I targeting the wrong CSS selector, missing a required property, or is there a different approach (e.g., a config option rather than custom CSS) I should be using?

[Nerwyn]

By creating a custom remote element, you overwrite the original one. When you do this through the UI, it copies the default config to the custom one when you name it. But it looks like your custom touchpad config does not have any actions defined so it is configured to do nothing when you interact with it. The styles are correct otherwise.

You can also style individual elements without creating custom remote elements for them using the part pseudo-element in general styles.

#touchpad::part(toucharea) {
  height: 600px;
}