Reduce top position

src/data/lovelace/config/view.ts

@@ -35,6 +35,7 @@ export interface LovelaceViewHeaderConfig {
   layout?: "start" | "center" | "responsive";
   badges_position?: "bottom" | "top";
   badges_wrap?: "wrap" | "scroll";
+  badges_floating?: boolean;
 }
 
 export const DEFAULT_FOOTER_MAX_WIDTH_PX = 600;

src/panels/lovelace/editor/view-header/hui-view-header-settings-editor.ts

@@ -9,11 +9,8 @@ import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
-import type {
-  LovelaceViewConfig,
-  LovelaceViewHeaderConfig,
-} from "../../../../data/lovelace/config/view";
-import type { HomeAssistant } from "../../../../types";
+import type { LovelaceViewHeaderConfig } from "../../../../data/lovelace/config/view";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
 import {
   DEFAULT_VIEW_HEADER_BADGES_POSITION,
   DEFAULT_VIEW_HEADER_BADGES_WRAP,
@@ -117,6 +114,10 @@ export class HuiViewHeaderSettingsEditor extends LitElement {
             },
           },
         },
+        {
+          name: "badges_floating",
+          selector: { boolean: {} },
+        },
       ] as const satisfies HaFormSchema[]
   );
 
@@ -130,6 +131,7 @@ export class HuiViewHeaderSettingsEditor extends LitElement {
       badges_position:
         this.config?.badges_position || DEFAULT_VIEW_HEADER_BADGES_POSITION,
       badges_wrap: this.config?.badges_wrap || DEFAULT_VIEW_HEADER_BADGES_WRAP,
+      badges_floating: this.config?.badges_floating ?? false,
     };
 
     const narrow = this.narrow;
@@ -147,13 +149,12 @@ export class HuiViewHeaderSettingsEditor extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: ValueChangedEvent<LovelaceViewHeaderConfig>): void {
     ev.stopPropagation();
-    const newData = ev.detail.value as LovelaceViewConfig;
 
     const config: LovelaceViewHeaderConfig = {
       ...this.config,
-      ...newData,
+      ...ev.detail.value,
     };
 
     fireEvent(this, "config-changed", { config });
@@ -166,6 +167,7 @@ export class HuiViewHeaderSettingsEditor extends LitElement {
       case "layout":
       case "badges_position":
       case "badges_wrap":
+      case "badges_floating":
         return this.hass.localize(
           `ui.panel.lovelace.editor.edit_view_header.settings.${schema.name}`
         );

src/panels/lovelace/views/hui-view-header.ts

@@ -25,6 +25,7 @@ import type { Lovelace } from "../types";
 export const DEFAULT_VIEW_HEADER_LAYOUT = "center";
 export const DEFAULT_VIEW_HEADER_BADGES_POSITION = "bottom";
 export const DEFAULT_VIEW_HEADER_BADGES_WRAP = "wrap";
+export const DEFAULT_VIEW_HEADER_BADGES_FLOATING = false;
 
 @customElement("hui-view-header")
 export class HuiViewHeader extends LitElement {
@@ -85,6 +86,12 @@ export class HuiViewHeader extends LitElement {
     if (changedProperties.has("config") || changedProperties.has("lovelace")) {
       this._dragScrollController.enabled =
         !this.lovelace.editMode && this.config?.badges_wrap === "scroll";
+
+      this.toggleAttribute(
+        "floating-badges",
+        !this.lovelace.editMode &&
+          (this.config?.badges_floating ?? DEFAULT_VIEW_HEADER_BADGES_FLOATING)
+      );
     }
 
     if (changedProperties.has("config")) {
@@ -202,9 +209,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 badgeDragging = this._dragScrollController.scrolling;
+    const badgesFloating =
+      this.config?.badges_floating ?? DEFAULT_VIEW_HEADER_BADGES_FLOATING;
 
     const hasHeading = card !== undefined;
     const hasBadges = this.badges.length > 0;
@@ -267,7 +274,13 @@ export class HuiViewHeader extends LitElement {
           ${this.lovelace && (editMode || this.badges.length > 0)
             ? html`
                 <div
-                  class="badges ${badgesPosition} ${badgesWrap} ${badgeDragging}"
+                  class=${classMap({
+                    badges: true,
+                    [badgesPosition]: true,
+                    [badgesWrap]: true,
+                    floating: badgesFloating,
+                    dragging: badgeDragging,
+                  })}
                 >
                   <hui-view-badges
                     .badges=${this.badges}
@@ -289,6 +302,16 @@ export class HuiViewHeader extends LitElement {
       display: none !important;
     }
 
+    :host([floating-badges]) {
+      position: sticky;
+      top: calc(
+        var(--header-height, 56px) +
+          var(--safe-area-inset-top, 0px) - var(--row-gap, 0px) +
+          var(--ha-space-1)
+      );
+      z-index: 4;
+    }
+
     .container {
       position: relative;
     }

src/translations/en.json

@@ -8707,7 +8707,8 @@
                 "wrap": "Wrap",
                 "scroll": "Scroll",
                 "scroll_description": "Touchscreen-friendly"
-              }
+              },
+              "badges_floating": "Floating badges"
             }
           },
           "edit_view_footer": {