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!
Issue 2, content spilling out , is minor, as it makes it hard to read parts of the message, but doesn't prevent anything.
The main cause is that, in "/applications/dashboard/design/style.css",
.InformMessages .InformMessageis given a max-width, but overflow is left at the default ("visible").
Setting overflow to "auto" prevents the spill and allows the maximum width to be kept. If the 1st issue is solved by setting max-height & overflow, it will also partially fix this issue. However, both still suffer from secondary issues affecting readability caused by background color.
If overflow is set on
.InformMessages .InformMessage, the spilled content displays over a dark background, making it hard to read. This could be fixed by replacing the dark background with a border (as that's its actual purpose) and setting the background color to white. If overflow is set on
.InformMessages, the spilled content displays over a transparent background, so the rest of the page is visible behind it, making it slightly hard to read. This is easily fixed by setting a background color for
Thanks for posting this!
I tried replicating the block message with just this code in a DST:
But it just Saved successfully.
If you run into the block message again, let me know how to replicate it, and I'll work on these formatting issues.
Obsidian Portal Developer
The sample code has a zero-width space between the "concat" and the "()". As it turns out, just those two together (without any other characters between them) in a post body when previewing or posting should be enough to trigger the block (I can't type out the exact sample here without triggering the block). Note the error displays fine when saving a DST, as it's displayed on its own page. It's only in the forum, where it's displayed in-page in a dialog.
It's not great/perfect, but it makes it scrollable enough to read and also possible to close the popup.
Obsidian Portal Developer