Best solution for alert boxes positioning in SPA's (single page applications)

Question

I'm designing my first single page application which is for users to manage their USB dongle for a desktop application and also to create teams and request tech support.

This is the wireframe of the application which will be half SPA and half page based:

Support page with alert

Support page after alert is dismissed


Question: What is the best solution for positioning an alert in this case? considering headaches with responsive screens? in my example, I created the widget on top of the tech support widget with a permanent gap. But a better solution is to push the content down automatically when this alert box is summoned and after it's dismissed the widget returns to its original position. The context of this widget is to alert the user that his dongle license is expired which restricts him from requesting certain types of tech support.

Question2: should an alert box be inside the canvas as a widget that shows up and goes away or a modal box as an example of Asana? That would be a third approach for this situation which solves the spacing issue, but I don't know in terms of usability what is the best implementation of alert boxes.

Question3: How should I position my alert box considering different ways SPA layouts in terms of background spacing (encapsulation of widgets/screens) between widgets considering both design and front-end aspects? I've seen some with gaps such as Asana and others without such as Slack?

Answer 1

Question 1:
You've answered it yourself. Push content down automatically.

---

Question 2:
Alert box inside the canvas, when it is not a major/drastic event. Usually show as result of an action taken previously.

Use modal to prevent / notify user when they are about to take an action which could have serious implications.

---

Question 3:
This is more of a visual design decision. Let your app design (space / no spaces) decide the final look of your alerts.

Use a background encapsulation like Asana to show your alerts if your other widgets follow the same design.

Use a contrasting background to your alert if your design is more like Slack. Check out the New unread messages toast design in Slack.