Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-17 15:45:43 +01:00
Code Activity

Show energy date picker previous/next on smaller screens (#30092)

Browse Source 
* Fix missed spacing token usage

* Reduce Date Picker Collapse Button Width

Remove unnecessary padding between date icon button and date text and allow next/prev to be shown for 20px narrower screens.

* Reduce calendar icon size for narrow screens

Allows use of screens down to 325px wide before the next/prev buttons are lost.

Given most android screens are >=360px this is a big improvement as before this change the hide limit was 370px.
This commit is contained in:
Tom Carpenter
2026-03-11 06:27:29 +00:00
committed by GitHub
parent 9e57dacb3c
commit 0f975acca1
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,7 +126,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
private _measure() {
this.narrow = this.offsetWidth < 425;
this._collapseButtons = this.offsetWidth < 320;
this._collapseButtons = this.offsetWidth < 275;
}
private async _attachObserver(): Promise<void> {
@@ -644,7 +644,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
}
.date-range {
flex: 1;
padding: 2px var(--ha-space-2);
padding: 2px var(--ha-space-2) 2px 0px;
display: flex;
flex-direction: column;
justify-content: center;
@@ -684,8 +684,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
align-items: center;
}
ha-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-left: var(--ha-space-2);
margin-inline-start: var(--ha-space-2);
margin-inline-end: initial;
flex-shrink: 0;
--ha-button-theme-color: currentColor;
@@ -693,6 +693,10 @@ 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 {
--ha-icon-button-size: 24px;
--mdc-icon-size: 16px;
}
.backdrop {
position: fixed;
top: 0;