"Add your expertise" popup is not (very well) responsive

Issue Summary
There seems to be an issue with responsiveness of the Ghost Native Comments.

It seems to impact ALL themes, including Ghost Official Themes.

Clicking the link “Add your expertise” in the Ghost Native Comments shows the popup window in a “desktop” layout (with the black column containing an image of authors) even if there is not enough space (from 480px upward).

One would expect that Ghost Native Comments (Iframe) inherits the parent’s width and chooses the appropriate layout for which there is a sufficient space (mobile vs. desktop).

Steps to Reproduce

  1. Make sure comments are enabled
  2. Open any theme, such as Source, on a device with screen width of 480px***
  3. Go to a comment section and click on your own avatar (in the message you are about to send)
  4. Choose “Add your expertise”
  5. The popup is too wide for the available screen

*** the issue does not happen below 480px because the popup window is always in a mobile-layout on such screens (vertical, without the black column with authors).

Setup information

Ghost Version

Node.js Version

How did you install Ghost?
Local install on the computer (but the issue also happens on a hosted site)

Provide details of your host & operating system
Mac OS X

Database type
sqlite3 (through local install)

Browser & OS version
Safari 17.4.1 (for example)

Relevant log / error output

I hope that helps, should you have more questions, please let me know.

1 Like

Thank for flagging this, @mirokosut. This looks like a regression, we’re digging into it.

Thank you very much for such a fast response @prschulz. Should you need any help, I am here! :slight_smile: