[Bug] AI Chatbot Desktop Container Margins Inconsistent Between Collapsed and Expanded Modes

[Petar_Dietrich]

Hi Elfsight Team,

On desktop, the AI Chatbot container margins (relative to the browser edges) are inconsistent between collapsed and expanded modes.

This appears to happen because the chatbot’s native code uses different positioning reference points depending on the mode.

As a temporary workaround, I’m using the following custom CSS rules:

/* Reposition Open Chatbox on Desktops for Equal Margins */
/* Ensure Smooth Transition Between Collapsed and Expanded State */
@media (min-width: 1024px) {

  /* Override widget transition for smooth expand/collapse */
  .es-window-container,
  [class*="floating-panel__Container-sc"],
  [class*="static-floating-panel__Container-sc"] {
    transition:
      max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      inset 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      margin 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: max-height, height, inset, margin;
  }

  /* Equal margins (right + bottom) in both states */
  /* Adjust the 20px / 20px values if you want tighter or looser spacing */
  .es-window-container {
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important; /* kill the previous margin hacks */
  }

  /* Collapsed State – normal chat height */
  /* Change 580px to match your preferred closed height */
  .es-window-container:not([data-expanded="true"]) {
    max-height: 580px !important;
  }

  /* Expanded State – taller chat height */
  /* Change 748px to match your preferred open height */
  .es-window-container[data-expanded="true"] {
    max-height: 748px !important;
  }
}

Could your team look into this and consider implementing a permanent fix in an upcoming AI Chatbot update?

Thank you!

---

[Max]

Hello Petar,

I’ve shared this issue with the devs and will report back once I have their response

[Petar_Dietrich]

Thank you, Max. Just now, I updated the above CSS rules. Give them a spin, you will definitely appreciate the improvement on your desktop. In my opinion, the chatbot container (collapsed and expanded mode) should behave as noted via the provided, updated CSS rules. Cheers!

[Max]

Hi Petar,

I checked this with our developers, and this behavior is intentional. When the widget is collapsed, the spacing follows the corresponding settings:

Once the widget is expanded, however, the spacing is fixed at 8px. Thus, this behavior is correct.

I also understand your point and it’s great that your code did the trick for you. We really appreciate you sharing this solution with us

[Petar_Dietrich]

Thanks for the update. I believe those settings are for the chatbot button, not the container. The container margins are controlled by native code. Only CSS rules can override them.

In any case, above CSS rules work for us. Just wanted to bring this up to your attention. Also, I should point out that the above CSS rules only work when the “Move & Resize Window” setting is disabled. See below.

Cheerio!

---

[Max]

The settings I’ve mentioned control both the Launcher button and the chat window.

Anyway, I am happy to know that your solution works for you and thanks for the update