Fix style rule of error message when enterprise does not have shipping or payment method activated

[RachL]

Description

When an enterprise has no shipping or payment methods activated, an error message is displayed on all pages. It is overlapping with the

• bottom saving banner, preventing the user to fix the error message easily. (e.g. at /admin/enterprises/*/edit)
• bottom of the new bulk edit products screen, preventing interaction (/admin/products with admin_style_v3 feature toggle)

The goal here is to fix the style rule so that you can at least click in the space underneath the error message

Steps to Reproduce

1. Remove shipping and payment methods from your enterprise
2. See the error message
3. try to re-create the methods, see it overlap with the bottom of the screen

Animated Gif/Screenshot

In bulk edit products, you cannot click anywhere in the purple area:

Loom video: https://www.loom.com/share/2fb04215bdcb424f923a52606ef7c088?sid=0d6e542f-08eb-4d50-ae11-ad755c208615

Severity

bug-s3: a feature is broken but there is a workaround

Your Environment

• Version used: v4.4.38
• Browser name and version: Firefox and chrome
• Operating System and version (desktop or mobile): both

[MrBowmanXD]

https://youtu.be/p9iBHp-C0Fc

It seems the error message is on top of the screen. Well stylized and permits interaction with the bottom panel.

[RachL]

@MrBowmanXD sorry I forgot an important information when writting the issue: you need to turn feature toggle "admin_style_v3" ON to see the problem.

You can fin toggles as superadmin on /admin/feature-toggle/features more info at https://github.com/openfoodfoundation/openfoodnetwork/wiki/Feature-toggles

[MrBowmanXD]

will try to replicate.

[MrBowmanXD]

The banner is stylized in a way that permits to see the update button (does not overlap) but you can't click on the update button without dismissing the error message, seems like a part of the design choice.

[RachL]

@tschumilas or @dacook can you still replicate? I can't on my end, but I never could, the screenshot in the issue is actually yours David :) maybe the issue is missing an important step.

[dacook]

Hi @MrBowmanXD , thanks for looking into this. I'm sorry, the issue was out of date. I've updated it now to show that there were two problems. The one you checked is solved already, but the remaining issue is at the:

bottom of the new bulk edit products screen, preventing interaction (/admin/products with admin_style_v3 feature toggle)

[MrBowmanXD]

Can you replicate in a video or image please? Did not understand the text:

| bottom of the new bulk edit products screen, preventing interaction (/admin/products with admin_style_v3 feature toggle)

[MrBowmanXD]

Wait, so should div called flash container be behind the content in order to let user click on things? (possibly by lowering z-index) I have to check this out in the code editor.

[dacook]

It sounds like you're on the right track, yes. I've added a Loom video to the description of this issue, I hope that helps.

[MrBowmanXD]

Thanks for the video, will get on this issue soon.

[dacook]

Hi @MrBowmanXD , just wondering if you'll be able to look into this soon?