Popups appear on the left side of the screen instead of the center in Kiosk mode in desktop browsers

[nomonkeynodeal]

Describe the bug
Popups appear on the left side of the screen instead of the center with Kiosk Mode in desktop browsers (Brave, Firefox). When Kiosk Mode is disabled, the popups appear centered.

To Reproduce kiosk mode:

title: Home
kiosk_mode:
  entity_settings:
    - entity:
        input_boolean.editmode: 'off'
      kiosk: true
    - entity:
        input_boolean.editmode: 'on'
      kiosk: false

bubble card:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    bg_opacity: 20
    shadow_opacity: 10
    bg_blur: '10'
    hash: '#second'
    name: Controls
    is_sidebar_hidden: true
    width_desktop: 1000px
    hide_backdrop: true
    scrolling_effect: false
    card_layout: large
    margin_top_desktop: '-50px'

Additional context
This started happening 2-3 versions ago I think. (I installed several updates in a short period.) There used to be a toggle in the GUI to fix it, but that option is now gone.

I thought I saw something that said Kiosk Mode shouldn't be used with Bubble Card, or that there are better options, but my searches have turned up nothing about this now.

[Clooos]

Hi, what toggle are you referencing too?

[nomonkeynodeal]

Oh, I don't remember the name of the toggle. I thought it was something like "Fix ..." and it fixed the menu alignment on desktop. Sorry I don't have more info.

[Clooos]

Do you have this issue if you create a new pop-up?

[nomonkeynodeal]

Do you have this issue if you create a new pop-up?

Yes, I just tried.

[NicholasChaplin]

Same issue here, with either Kiosk mode or hide sidebar set to true the popups appear far left, disabling both makes the popups centred,

kiosk_mode:
  user_settings:
    - users:
        - public
      hide_sidebar: true
    - users:
        - public
      kiosk: true

[Clooos]

Hi again, I've just released a new beta and I've found some issues related to the pop-ups, with some luck it will fix this issue 🤞 Keep me informed 🙂

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.12

[nomonkeynodeal]

Hi again, I've just released a new beta and I've found some issues related to the pop-ups, with some luck it will fix this issue 🤞 Keep me informed 🙂

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.12

No change. Are you able to replicate the issue?

[Clooos]

Can you send me a link to the Kiosk Mode you're using?

[nomonkeynodeal]

https://github.com/NemesisRE/kiosk-mode

[Clooos]

I've tested it, can you try to add this in a pop-up custom style?

@media only screen and (min-width: 600px) {
  .bubble-pop-up {
    left: calc(50% - (var(--desktop-width, 540px) / 2)) !important;
  }
}

[nomonkeynodeal]

I've tested it, can you try to add this in a pop-up custom style?

@media only screen and (min-width: 600px) {
  .bubble-pop-up {
    left: calc(50% - (var(--desktop-width, 540px) / 2)) !important;
  }
}

That works! Are you going to make this a part of Bubble card, or should I add it to all my cards manually?

[Clooos]

I'm looking for a way to makes this automatic when hide_sidebar: true is detected. If I don't find a way I will add an option in the editor.

This is probably the last issue I will fix before releasing the v2 final 🥳

[Clooos]

I've found the best way to fix that and this will be the official fix for the kiosk mode users.

First for your kiosk mode config, remove hide_sidebard: true or kiosk: true and just keep that under kiosk_mode:

kiosk_mode:
  hide_header: true

Then go to your HA profile configuration then toggle this:

This will now works as expected and you can remove the custom style I've sent previously.

[nomonkeynodeal]

That does seem to work for me.

[Clooos]

Someone on the HA forum has confirmed that it was working, are you sure that you have followed my instructions correctly?

[nomonkeynodeal]

You misread. It works!

[Clooos]

Hahaha indeed! It seems that I'm getting used to see negative comments 🤓

I'm glad that it's working for you too!

[nomonkeynodeal]

Yeah, I guess I snaked you there with the phrasing. I just could have sworn I had tried this already.