Fix energy period selector icon resizing (#54372)

On narrow screens, the energy period selector resizes its date picker icon to ensure there is enough space to render the buttons. However the CSS used to target this icon is not specific enough meaning the resize leaks into elements within the date picker itself.

To fix this, add a part specifier to the date range inputs on the ha-date-range-picker, and target the CSS at that. This prevents targetted CSS from leaking into the picker itself.

src/components/date-picker/ha-date-range-picker.ts

@@ -188,7 +188,9 @@ export class HaDateRangePicker extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="container">
-        <div class="date-range-inputs">${this._renderField()}</div>
+        <div class="date-range-inputs" part="range-input">
+          ${this._renderField()}
+        </div>
         ${
           this._pickerWrapperOpen || this._opened
             ? this._openedNarrow

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -841,7 +841,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
     ha-ripple {
       border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
     }
-    :host([narrow]) ha-date-range-picker {
+    :host([narrow]) ha-date-range-picker::part(range-input) {
       --ha-icon-button-size: 24px;
       --mdc-icon-size: 16px;
     }