Put error popup inside the basket

core/static/core/style.scss

@@ -344,24 +344,6 @@ body {
     text-align: center;
   }
 
-  .popup {
-    z-index: 10;
-    /* to get on top of tomselect */
-    display: inline-block;
-    text-align: center;
-    overflow: auto;
-    margin: auto;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 20vh;
-    width: 20vw;
-    align-content: center;
-  }
-
-
   .tabs {
     border-radius: 5px;
 
@@ -1283,6 +1265,18 @@ u,
     float: right;
   }
 
+  .basket-error-container {
+    position: relative;
+    display: block
+  }
+
+  .basket-error {
+    z-index: 10; // to get on top of tomselect
+    text-align: center;
+    position: absolute;
+  }
+
+
   #products {
     flex-basis: 100%;
     margin: 0.2em;
@@ -1292,6 +1286,7 @@ u,
   #click_form {
     flex: auto;
     margin: 0.2em;
+    width: 20%;
   }
 
   #user_info {

counter/templates/counter/counter_click.jinja

@@ -31,14 +31,6 @@
       <p class="important">Javascript is required for the counter UI.</p>
     </noscript>
 
-    <p
-      x-cloak
-      class="alert alert-red popup"
-      x-show="alertMessage.show"
-      x-transition.duration.500ms
-      x-text="alertMessage.content"
-    ></p>
-
     <div id="user_info">
       <h5>{% trans %}Customer{% endtrans %}</h5>
       {{ user_mini_profile(customer.user) }}
@@ -51,7 +43,7 @@
       </p>
     </div>
 
-    <div id="click_form" style="width: 20%;">
+    <div id="click_form">
       <h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5>
       <div>
         {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
@@ -86,6 +78,16 @@
 
         <form x-cloak method="post" action="" x-ref="basketForm">
 
+          <div class="basket-error-container">
+            <div
+              x-cloak
+              class="alert alert-red basket-error"
+              x-show="alertMessage.show"
+              x-transition.duration.500ms
+              x-text="alertMessage.content"
+            ></div>
+          </div>
+
           {% csrf_token %}
           <div x-ref="basketManagementForm">
             {{ form.management_form }}