Credential save banner has generic id `container` clashing with website css

[ieugen]

I've described the issue here syncthing/syncthing#9320 .
Cross linking in the hope that a solution is found faster.

Using Syncthing 1.27.2 with the login form.

Hi,

I am using keepassxc web extension to manage login information.
I noticed that the keepassxc dialog for saving login info is broken on syncthing app.
The buttons are not displayed and they cover the top bar of Syncthing.

We are running

• Syncthing 1.27.2
• Firefox 1.21.0
• keepassxc-browser extension 1.8.10

The following html is available in WebInspector.
Notice shadow root.

<div style="display: block">
  <link
    rel="stylesheet"
    href="moz-extension://524fda03-bd61-4e63-9d4d-c4860dbf890d/css/colors.css"
  />
  <link
    rel="stylesheet"
    href="moz-extension://524fda03-bd61-4e63-9d4d-c4860dbf890d/css/banner.css"
  />
  <link
    rel="stylesheet"
    href="moz-extension://524fda03-bd61-4e63-9d4d-c4860dbf890d/css/button.css"
  />
  <div
    class="kpxc-banner"
    id="container"
    data-bs-theme="light"
    style="z-index: 2147483646"
  >
    <div class="banner-info">
      <span class="kpxc-banner-icon-moz" alt="logo"></span
      ><span>Nume utilizator sau parola modificate! Salvați-l?</span
      ><span class="small">Utilizator: </span
      ><span class="small info information-username">libris</span>
    </div>
    <div class="banner-buttons">
      <button class="kpxc-button kpxc-green-button" id="kpxc-banner-btn-new">
        New</button
      ><button class="kpxc-button" id="kpxc-banner-btn-update" disabled="">
        Update
      </button>
      <div class="kpxc-separator"></div>
      <input
        class="kpxc-checkbox"
        type="checkbox"
        name="ignoreCheckbox"
        id="kpxc-banner-ignoreCheckbox"
      /><label class="kpxc-checkbox-label" for="kpxc-banner-ignoreCheckbox"
        >Don't ask for this website</label
      ><button class="kpxc-button kpxc-red-button" id="kpxc-banner-btn-dismiss">
        Reject
      </button>
    </div>
  </div>
</div>

[varjolintu]

Could you edit the issue and describe the situation here? It seems the issue might not be at Syncthing's end.

[ieugen]

The issue might be with the css
syncthing/syncthing#9320 (comment)

Sounds like a KeePassXC issue then? They definitely should be using more specific IDs, e.g. "keepassxc-container" and so on. Just container is a common name used on many websites.

[droidmonkey]

The issue is not our css, but the id of our banner div.