Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-18 07:56:44 +01:00
Code Activity

Fix new date-range-picker rendering on small screens (#51257)

Browse Source
This commit is contained in:
Tom Carpenter
2026-03-30 10:10:06 +01:00
committed by GitHub
parent ed96657085
commit a6ab6e218f
1 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/date-picker/date-range-picker.ts
View File

@@ -309,17 +309,39 @@ export class DateRangePicker extends LitElement {
css` css`
.picker { .picker {
display: flex; display: flex;
flex-direction: row;
} }
.date-range-ranges { .date-range-ranges {
border-right: 1px solid var(--divider-color); border-right: 1px solid var(--divider-color);
min-width: 140px;
flex: 0 1 30%;
} }
.range { .range {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex: 1; flex: 1;
padding: var(--ha-space-3); padding: var(--ha-space-3);
overflow-x: hidden;
}
@media only screen and (max-width: 460px) {
.picker {
flex-direction: column;
}
.date-range-ranges {
flex-basis: 180px;
border-bottom: 1px solid var(--divider-color);
border-right: none;
overflow-y: scroll;
}
.range {
flex-basis: fit-content;
}
} }
.times { .times {
@@ -334,12 +356,6 @@ export class DateRangePicker extends LitElement {
padding: var(--ha-space-2); padding: var(--ha-space-2);
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
} }
@media only screen and (max-width: 500px) {
.date-range-ranges {
max-width: 30%;
}
}
`, `,
]; ];
} }