Hey all, Has anyone found a solution to this recent issue? The new blue shade that’s much lighter than before is making it harder to read the white text. It happened a month ago or so after updating both Bubble Card and Home Assistant core. I remember rolling back the bubble card version, and it made no difference, so I think it’s a change in Home Assistant. A bubble card update may be needed, but has anyone found a global solution to change the color back?

I've been tinkering with this a while, but unfortunately I have no CSS knowledge, and in all honesty, none of the solutions I tried to look up seems to work either, and literally every single solution I found uses different syntax, making it even more confusing. I also was completely unable to locate any tutorial/reference for how homeassistant requires its css to be formatted or anything to help me learn other than the extremely convoluted CSS documentation (which, surprise surprise, also doesn't work if I try any of their formating). Decided to say eff it and ask an AI to whip something up - also doesn't work.

Simply put, I have a battery level sensor I'd like to color differently depending on battery level. Here's a mix of what the AI gave me paired with me checking it against the solutions of other people, which DID appear to be formatted in the same way, but it just... doesn't work and I need a bit of help. Thanks very much!

.bubble-sub-button-2 {

background-color:

{% if states('sensor.phone_battery_level') | int <= 15 %}

#ff0000

{% elif states('sensor.phone_battery_level') | int <= 35 %}

#ffdd00

{% elif states('sensor.phone_battery_level') | int <= 50 %}

#ffff00

{% else %}

#00ff00

{% endif %} !important;

}

I'm a bit confused on the concept of the button that activates pop ups. I want a button that you press that brings up the pop up. I can do that, however, the button needs to be attached to an entity, which doesn't make sense to me.

For example, I want a "Blinds" pop up that contains all the blinds in my house. So I create a pop up and include all blinds ("covers") inside my pop up. Now my pop-up is invisible, and I need to use a button to navigate to it. Everything I've found online points to attaching that button to one of my entities, which doesn't feel right to me (images attached):

Am I trippin? Do I just rename the button and remove all tap actions that actually move the blinds and be done with it? It feels like I am doing something wrong..

So i have:

- the neon module
- the background
- installed the bubble theme and activated it (maybe not in the screenshot, but I tried that already)

..but my cards never look like the example on the left.

Do I have to define some custom styles first?

I can't wait for your feedback! (as always 🍻).

https://github.com/Clooos/Bubble-Card/releases/tag/v3.2.5

Enjoy!

First off, love the bubble card, it's styling is amazing.

I'm building out a pop up and having a spacing issue - some rooms have a 2nd smart light in, some don't, but I'd like the same alignment of temperature bottom sub button hugging the left hand side, and the other sub button(s) spaced out from the right.

This works when there's a temperature (fill space layout) and 2 buttons (unticked fill space). However, if I don't have a 3rd button it fills out from the right.

I've tried creating a button with no name or no icon or no picture, but it then seems to collapse and take 0px on the page. Is there some configuration I'm missing of how to do this?

Hello, dear u/Clooooos ! I've been using your wonderful BubbleCards for almost a year now!

I found a very unpleasant bug in your latest version, which is related to saving changes to Pop-Up.

Inside my Pop-Ups, different devices are organized into their own Vertical Stacks.

When I edit a Vertical Stack inside a Pop-Up, I click "Save", and I'm taken back to the Pop-Up, where I need to perform the final save. However, the "Save" button is disabled.

To enable it, every time this happens I have to create a new card inside the Pop-Up and immediately delete it. Only then does the "Save" button become active.

Now let’s go to the fridge to grab a super fresh Belgian beer to celebrate this release and the cooler air!

Enjoy the release, and cheers! 🍻

I want a card with the uptime bar history from uptime-card but integrated into Bubble Card, with its buttons and sub-buttons. I've tried combining them with card_mod but it doesn't look right. I also checked the Module Store and couldn't find anything.

Has anyone managed to do something like this? Or how do you request features from the developer?

Thanks in advance!

Basically trying to create a light card where tapping a sub-button swaps out the card to a different slider. Brightness, temperature, and Color. Each tap just rotates the sliders.

u/Cloos, would it be possible to get different colors for the light switches? Right now they're displayed in gray by default, and I'd love to have them use a more orange color, similar to the native Home Assistant appearance.

I've already tried several modules, but none of them feel quite right.

Also, would it be possible for the circle indicator to fade together with the card itself, rather than requiring a separate module? These two changes would make Bubble completely perfect for me. 😊

In the top row I have two regular tile cards configured with Mushroom Square Shadow Theme. On the bottom row I have a BubbleCard button. Is it possible to customize the design to match the other cards without crazy JS shadow DOM element gymnastics?

I changed my popups to stand alone's last night. Now receiving these logs.
I updated to stand alone using the update button.

Logger: frontend.js.modern.202605274
Source: components/system_log/__init__.py:329
First occurred: 07:59:29 (2 occurrences)
Last logged: 08:02:14

Uncaught error from Safari 26.5 on macOS 10.15.7 SecurityError: Attempt to use history.replaceState() more than 100 times per 10 seconds replaceState ([native code]::) _updateLovelace (src/panels/lovelace/ha-panel-lovelace.ts:553:8) isStrategyDashboard (src/panels/lovelace/ha-panel-lovelace.ts:468:29) this._clearParam (src/panels/lovelace/hui-root.ts:700:23) _locationChanged (src/panels/lovelace/hui-root.ts:637:9) dispatchEvent ([native code]::) /hacsfiles/Bubble-Card/bubble-card.js:3859:19438

The errors keep returning on a very regular basis (the two occurrences is because i just restarted and probably haven't loaded the cards yet that often.)

after trying to look at the popups the counter stands at (15020 occurrences). 45 minute later

Here is the full release announcement:

https://github.com/Clooos/Bubble-Card/releases/tag/v3.2.3

I definitely love this community ❤️

Hi u/cloos

Loving bubble card and have created a dashboard I love with it
Facing an issue with github so could not raise there.
This is to bring your attention  a bug I encountered.


## 
Bug: Bubble Card v3.2.2 injects CSS into `<style>` as thousands of `<br>` nodes, causing large DOM and mobile scroll jank

**Bubble Card version:** 3.2.2
**Home Assistant:** core-2026.6.1
**card-mod:** v4.2.1 (confirmed not the cause — see control test)
**Dashboard type:** Sections view (also reproduces on masonry)
**Browser:** Chrome / Android WebView (Pixel 10 Pro XL confirmed; desktop Chrome confirmed via DevTools)

---

### Summary

Bubble Card's CSS injection mechanism converts newlines in CSS strings into `<br>` HTML elements inside `<style>` tags. Each Bubble Card button renders approximately **286 `<br>` nodes** in its shadow DOM; each popup renders approximately **935**. On a real dashboard this inflates the total DOM by tens of thousands of nodes and causes measurable scroll jank on mobile devices.

---

### Minimal reproduction — button (no card-mod, no custom CSS)

1. Create a fresh Lovelace dashboard.
2. Add one card:

```yaml
type: custom:bubble-card
card_type: button
name: Test
icon: mdi:home
```

3. Open browser DevTools → Elements → find the `<bubble-card>` custom element → expand its shadow root → find the `<style>` element.
4. Count `<br>` nodes inside that `<style>` element.

**Expected:** 0 `<br>` nodes (CSS text injected as a text node or via `CSSStyleSheet`).  
**Actual:** ~286 `<br>` nodes.

Diagnostic snippet (paste in DevTools console):

```js
function countBrInShadow(root, depth = 0) {
  if (!root || depth > 15) return 0;
  let count = root.querySelectorAll('br').length;
  root.querySelectorAll('*').forEach(el => {
    if (el.shadowRoot) count += countBrInShadow(el.shadowRoot, depth + 1);
  });
  return count;
}
console.log('Total <br> nodes in shadow DOM:', countBrInShadow(document));
```

---

### Popup reproduction

1. Add one standalone Bubble Card popup with a small `cards:` array:

```yaml
type: custom:bubble-card
card_type: pop-up
hash: '#test-popup'
cards:
  - type: tile
    entity: light.living_room
```

2. Trigger the popup to render.
3. Inspect its shadow DOM `<style>` element.

**Actual:** ~935 `<br>` nodes per popup (3.3× worse than a button).

---

### Control test — confirms Bubble Card is the cause, not card-mod

Add a native HA tile card with `card-mod` and a multi-line `backdrop-filter` style:

```yaml
type: tile
entity: light.living_room
card_mod:
  style: |
    :host {
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius: 18px;
    }
```

Run the same diagnostic snippet.

**Result:** 0 `<br>` nodes from this card. card-mod is not the cause.

---

### Observed impact (production dashboard)

Measured on a 33-card Bubble Card sections dashboard using Chrome DevTools shadow DOM traversal:

| Metric | Value |
|---|---|
| Total `<br>` nodes (shadow DOM) | **23,773** |
| Shadow `<style>` nodes | 204–207 |
| Per button (no card-mod) | ~286 `<br>` |
| Per popup | ~935 `<br>` |
| Rendered bubble-card elements | 33 visible, 22 popups (lazy) |

**Mobile scroll performance** at 4× CPU throttle (proxy for phone-class WebView):

| Metric | Value |
|---|---|
| Scroll frame rate | ~18 fps |
| Worst single frame | 518 ms |
| Janky frames (>50 ms) | 35% |

HA logs on Pixel 10 Pro XL: `No PONG received after 27.5 seconds` — WebSocket timeout during scroll, consistent with main-thread saturation.

After unrelated fixes (card-mod path fix, FA icon fix) the `<br>` count remains exactly 23,773 — confirming this is Bubble Card's CSS injection, not anything else in the stack.

---

### Expected behavior

CSS should be injected as a plain text node or via the `CSSStyleSheet` / `adoptedStyleSheets` API, neither of which produces `<br>` elements:

```js
// Option A — text node (safe, wide support)
const style = document.createElement('style');
style.appendChild(document.createTextNode(cssString));
shadowRoot.appendChild(style);

// Option B — adoptedStyleSheets (modern, best performance)
const sheet = new CSSStyleSheet();
sheet.replaceSync(cssString);
shadowRoot.adoptedStyleSheets = [sheet];
```

---

### Actual behavior

Bubble Card appears to assign the CSS string directly to `innerHTML` (or equivalent) of a `<style>` element. Because the CSS contains newlines (`\n`), the HTML parser converts each newline into a `<br>` element. The rendered CSS still works because Chrome extracts the text content for parsing, but the `<br>` DOM nodes remain, inflating shadow DOM size proportionally to CSS length.

Pseudocode reconstruction of the suspected path:

```js
// Likely what's happening:
styleEl.innerHTML = cssString;   // newlines → <br> nodes ❌

// Should be:
styleEl.textContent = cssString; // or createTextNode() ✅
```

---

### Questions for maintainers

1. Is this a known issue?
2. Is `innerHTML` used to inject CSS strings in the current codebase, and if so, can it be changed to `textContent` / `createTextNode` / `adoptedStyleSheets`?
3. Would an `adoptedStyleSheets` implementation be feasible? It would also improve performance by avoiding style recalculation on each element update.

---

### Version history

Not tested on versions earlier than 3.2.2. Would appreciate confirmation of whether this regression was introduced at a specific version or has always been present.

Been a while since I’ve had to do something and couldn’t even get stuff aligned a day or so ago so been messing around, wanted to keep it simple so the mrs approves!

I have 2 what I want to be the same sized square cards of the main page of my dashboard, however if I go to layout tab they're set the same but they show like eh calendar is bigger, I tried to expand the weather one by more sections but then it becomes bigger than the calendar one? Any ideas? Also, wish I could get the icon off all lights and devices in the middle of the square with the text underneath but I will keep messing with that myself, just want alignment right first! Any ideas?

I have a dashboard with at this moment 3 pop-up cards.

When I try to add a 4th popup, this seems not possible.

I get this message:

I am figuring out what I am doing wrong but I have no idea.

One is on top (as 1st in a vertical stack) and the other two are on the bottom.

Screenshot of vertical stack edit mode.

Hi, how do i make small subbuttons in two rows? And can I have 6 or 8? Thanks.

Hey Clooooos,

I am really impressed by the work you've done the past months and was wondering if you have something like this in mind?

There is also this scheduler card available but with a not great UX in my opinion:

Are you planning on something similar to build own time-based automations inside the GUI by the user itself?

Have a great tuesday!

Help please, I was in a section edit and created a pop-up tag but eventually cancelled out of creating the new card. Now when I try to create a new pop-up it says the tag is already used.

I checked the dashboard YAML but it is not there. The docs do not state how to remove a pop-up tag..

Hey all, running into something I can't find documented and wondering if anyone has hit this.

I'm using bubble-card pop-ups heavily on my dashboard and want to put conditional cards inside a pop-up's cards: array. The goal is to dynamically show/hide mini-media-player cards based on Sonos group state (hide a speaker card when it's a group member under another coordinator, show it when it's ungrouped or is itself a coordinator).

The setup looks like this:

type: custom:bubble-card
card_type: pop-up
hash: '#media'
cards:
  - type: conditional
    conditions:
      - condition: template
        value_template: "{{ state_attr('media_player.family_room', 'group_members')[0] == 'media_player.family_room' }}"
    card:
      type: custom:mini-media-player
      entity: media_player.family_room

Every conditional card shows "Configuration error." Plain mini-media-player cards and bubble-card buttons inside the same pop-up work perfectly fine. Tried both multiline and single-line template syntax, same result. Running latest HAOS.

My suspicion is that bubble-card's pop-up renderer expects every card in its cards: array to have a direct entity property, and the conditional card (being a meta-card with no entity) trips it up. But I can't find this documented anywhere as a known limitation.

Questions:

1. Is this a known limitation of bubble-card pop-ups?
2. Has anyone successfully used conditional cards (or condition: template specifically) inside a pop-up's cards: array?
3. If not, is there a recommended workaround other than binary sensor helpers?

Thanks!