Expand ha-slider touch target for volume slider usability (#30109)

Add padding to the #slider element in ha-slider to expand its touch
target to 32px, making sliders easier to interact with on touch devices.

Remove the pointer-events: none workaround on the volume slider in the
media player more-info dialog. This workaround disabled touch interaction
entirely on coarse pointer devices, which is no longer needed now that
the slider has an adequately sized touch target.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/components/ha-slider.ts

@@ -61,6 +61,12 @@ export class HaSlider extends Slider {
           width: 200px;
         }
 
+        /* Expand slider touch target to 32px */
+        #slider {
+          padding-block: 14px;
+          margin-block: -14px;
+        }
+
         #thumb {
           border: none;
           background-color: var(--ha-slider-thumb-color, var(--primary-color));

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -586,12 +586,6 @@ class MoreInfoMediaPlayer extends LitElement {
       width: 100%;
     }
 
-    @media (pointer: coarse) {
-      .volume-slider {
-        pointer-events: none;
-      }
-    }
-
     .volume ha-svg-icon {
       padding: var(--ha-space-1);
       height: 16px;