jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 10:16:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix badge overlay in scrolling mode (#25352)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paul Bottein 2025-05-07 12:39:25 +02:00 committed by Bram Kragten
parent 80dddc9eef
commit 603663e0cc
2 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/panels/lovelace/badges/hui-view-badges.ts
View File

@ -206,12 +206,29 @@ export class HuiViewBadges extends LitElement {
margin: 0;
}
.badges > * {
min-width: fit-content;
/* Use before and after because padding doesn't work well with scrolling */
.badges::before,
.badges::after {
content: "";
position: relative;
display: block;
min-width: var(--badge-padding, 0px);
height: 16px;
background-color: transparent;
}
.badges::before {
margin-left: -8px;
margin-inline-start: -8px;
margin-inline-end: 0;
}
.badges::after {
margin-right: -8px;
margin-inline-end: -8px;
margin-inline-start: 0;
}
.badges > *:last-child:not(.add) {
padding-right: var(--badges-padding-right, 0);
.badges > * {
min-width: fit-content;
}
hui-badge-edit-mode {

15
src/panels/lovelace/views/hui-view-header.ts
View File

@ -202,6 +202,9 @@ export class HuiViewHeader extends LitElement {
this.config?.badges_position ?? DEFAULT_VIEW_HEADER_BADGES_POSITION;
const badgesWrap =
this.config?.badges_wrap ?? DEFAULT_VIEW_HEADER_BADGES_WRAP;
const badgeDragging = this._dragScrollController.scrolling
? "dragging"
: "";
const hasHeading = card !== undefined;
const hasBadges = this.badges.length > 0;
@ -264,10 +267,7 @@ export class HuiViewHeader extends LitElement {
${this.lovelace && (editMode || this.badges.length > 0)
? html`
<div
class="badges ${badgesPosition} ${badgesWrap} ${this
._dragScrollController.scrolling
? "dragging"
: ""}"
class="badges ${badgesPosition} ${badgesWrap} ${badgeDragging}"
>
<hui-view-badges
.badges=${this.badges}
@ -356,7 +356,7 @@ export class HuiViewHeader extends LitElement {
.container:not(.edit-mode) .badges.scroll {
overflow: auto;
max-width: calc(100% - 16px);
max-width: 100%;
scrollbar-color: var(--scrollbar-thumb-color) transparent;
scrollbar-width: none;
mask-image: linear-gradient(
@ -366,7 +366,6 @@ export class HuiViewHeader extends LitElement {
black calc(100% - 16px),
transparent 100%
);
padding-left: 16px;
}
hui-view-badges {
@ -404,7 +403,7 @@ export class HuiViewHeader extends LitElement {
.container:not(.edit-mode) .layout.badges-scroll hui-view-badges {
--badges-wrap: nowrap;
--badges-aligmnent: flex-start;
--badges-padding-right: 16px;
--badge-padding: 16px;
}
.container:not(.edit-mode) .layout.center.badges-scroll hui-view-badges {
@ -425,7 +424,7 @@ export class HuiViewHeader extends LitElement {
hui-view-badges {
--badges-wrap: wrap;
--badges-aligmnent: flex-end;
--badges-padding-right: 0;
--badge-padding: 0;
}
.layout.responsive.has-heading hui-view-badges {
--badges-aligmnent: flex-end;