When a content block (see "`concat()` in JS blocked by Cloudflare.") is triggered on the forums, the displayed message has two layout issues: the close button is inaccessible on all but large screens and the content spills out of the dialog. Both issues should be visible in this screenshot: The close button is on the top right of the dialog, which is off the top of the page view.
The inaccessibility of the close button is a major issue, as it prevents the dialog from being closed and the page from being used. Even refreshing the page is problematic, as either data is lost or you can reload the saved post including the content that caused the block, causing the block message to pop up again.
The dialog box is around 1171px high, though it shrinks to 1081px if the window is < 49.2em wide. In either case, the dialog is tall enough that I can't make the window tall enough to contain it all on a 1920 x 1080 monitor. The only way I can get rid of the dialog is to delete elements using developer tools until it's short enough to be contained in the window.
There are a few parts to this issue. One is a large image element matching
.cf-screenshot-container.cf-screenshot-full (visible in the screenshot as the gray bar between "You are unable to access obsidianportal.com" and "Why have I been blocked?"). From the class names, this would be a screenshot related to the error message in some circumstances, but is blank for CloudFlare Ray blocks. When the screenshot is blank, it contains an element of class
cf-no-screenshot. The screenshot is contained in an
.cf-section.cf-highlight ancestor that adds a little to its height; any solution involving the screenshot would work best if it targeted this ancestor (there are other
.cf-section, making this tricky). Another part is that the dialog element,
.InformMessages, is fixed to the bottom of the window (done in "/applications/dashboard/design/style.css").
These parts suggest a few possible fixes, though some are potentially more complicated as the content comes from CloudFlare, and is not under the direct control of Obsidian Portal:
.cf-section.cf-highlightcould be removed or hidden; the font-size of
h1could be reduced) will shorten the dialog, making it easier to fit in the window.
.InformMessages, could be given a max-height and an overflow of "auto" so it can be scrolled.
Continued in the next post for the 2nd issue.
It looks like you're new here. If you want to get involved, click one of these buttons!