Cannot exit image view in Fluent Messaging

While waiting for WPMN to fix this properly, here's a temporary CSS workaround for two issues with the image preview modal in the messaging area:

1. Images open full size inside the chat widget, making the close button unreachable
2. In dark mode, the close button is invisible (same dark color as the background)

Add this to your FluentCommunity custom CSS:

/* ===================================================
   Image preview modal - fix image size in chat widget
=================================================== */
.chat-widget-wrapper .image-preview-modal__content img {
    width: auto !important;
    height: auto !important;
    max-width: 400px !important;
    max-height: 500px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Dark mode - close button */
.dark .chat-widget-wrapper .image-preview-modal__close,
[data-theme="dark"] .chat-widget-wrapper .image-preview-modal__close {
    background-color: #ffffffcc;
    color: #000000;
}

/* Dark mode - close button hover */
.dark .chat-widget-wrapper .image-preview-modal__close:hover,
[data-theme="dark"] .chat-widget-wrapper .image-preview-modal__close:hover {
    background-color: #ffffffcc;
}

/* Dark mode - close button full page view */
.dark .fluent-messaging .image-preview-modal__close,
[data-theme="dark"] .fluent-messaging .image-preview-modal__close {
    background-color: #ffffffcc;
    color: #000000;
}

.dark .fluent-messaging .image-preview-modal__close:hover,
[data-theme="dark"] .fluent-messaging .image-preview-modal__close:hover {
    background-color: #ffffffcc;
}

Note: the max-width and max-height values on the image are sized for a standard 400×550px chat widget, adjust if yours differs.

This is a DIY workaround; I am not a developer, but it works on my end.