history-graph: do not set "max-width" for a single legend item (#24683)

* do not set "max-width" for a single legend item

* prettier
This commit is contained in:
ildar170975 2025-03-19 09:46:14 +03:00 committed by GitHub
parent 4076e5655a
commit 27379c98df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -226,7 +226,12 @@ export class HaChartBase extends LitElement {
const overflowLimit = isMobile
? LEGEND_OVERFLOW_LIMIT_MOBILE
: LEGEND_OVERFLOW_LIMIT;
return html`<div class="chart-legend">
return html`<div
class=${classMap({
"chart-legend": true,
"multiple-items": items.length > 1,
})}
>
<ul>
${items.map((item: string, index: number) => {
if (!this.expandLegend && index >= overflowLimit) {
@ -262,7 +267,9 @@ export class HaChartBase extends LitElement {
? this.hass.localize(
"ui.components.history_charts.collapse_legend"
)
: `${this.hass.localize("ui.components.history_charts.expand_legend")} (${items.length - overflowLimit})`}
: `${this.hass.localize(
"ui.components.history_charts.expand_legend"
)} (${items.length - overflowLimit})`}
>
<ha-svg-icon
slot="trailing-icon"
@ -727,10 +734,10 @@ export class HaChartBase extends LitElement {
align-items: center;
padding: 0 2px;
box-sizing: border-box;
max-width: 220px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chart-legend.multiple-items li {
max-width: 220px;
}
.chart-legend .hidden {
color: var(--secondary-text-color);