🐛 Koenig: Unsplash modal display issues

[niranjan-uma-shankar]

Issue Summary

The Unsplash component in the Koenig repo has a few responsiveness issues which makes it practically unusable in small viewports:

• Poor layout on small screens:
  • 3-column image grid made thumbnails too small on tablets and mobile.
  • Search bar was cramped, with its input field mostly hidden. Clicking or typing appeared unresponsive because there wasn’t enough visible width to show typed text.

• Broken overlay behaviour:

  • Clicking images caused overlay elements to appear in the wrong positions.

• Touch device interaction bugs:

  • Hover-only buttons (like “Insert”) are hidden by default and become visible on tap. However, they remain clickable even when invisible, leading to unintuitive behaviour - for example, tapping part of an image may trigger an unexpected action.

• Missing Unsplash logo:

  • The header icon never rendered due to a bug.

Steps to Reproduce

1. Open a new post in the lexical editor
2. Type /unsplash in the editor to open the Unsplash modal
3. Resize browser window to various small viewport sizes (<1024px) and verify that the issues reported above exist. Also, use Chrome devtools to simulate mobile/tablet user agents to reproduce the bugs mentioned above.

Ghost Version

6.0.1

Node.js Version

22

How did you install Ghost?

From source

Database type

SQLite3

Code of Conduct

• I agree to be friendly and polite to people in this repository

[niranjan-uma-shankar]

Fixed in TryGhost/Koenig#1576.