Styling of CloudFlare Ray block message

neqis
neqis
edited June 2 in Bug Reports

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:


  • Shrinking/removing/hiding elements (e.g. .cf-screenshot-container.cf-screenshot-full's ancestor .cf-section.cf-highlight could be removed or hidden; the font-size of h1 could be reduced) will shorten the dialog, making it easier to fit in the window.

  • The dialog element, .InformMessages, could be given a max-height and an overflow of "auto" so it can be scrolled.

  • The dialog could be fixed to the top of the window, rather than the bottom

  • The close button could be moved to the bottom of the dialog.

Continued in the next post for the 2nd issue.

Post edited by neqis on

Comments

  • neqis
    neqis
    Posts: 21

    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 .InformMessage is 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 .InformMessages

  • thaen
    thaen
    Posts: 943

    Thanks for posting this!

    I tried replicating the block message with just this code in a DST:


    let range = {
    concat​() {},
    };

    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

  • neqis
    neqis
    Posts: 21 edited June 5

    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.

    Post edited by neqis on
  • thaen
    thaen
    Posts: 943 edited June 6

    Oooh!  I missed that this was here in the forums.  Sorry about that.  I added CSS via JavaScript.

    It's not great/perfect, but it makes it scrollable enough to read and also possible to close the popup.

    Post edited by thaen on

    Obsidian Portal Developer

Sign In or Register to comment.

July 2022
Signs and Portends

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions