improve responsivity stream action buttons

scipost_django/production/templates/production/_hx_productionstream_change_action_buttons.html

 {% comment %} Only show something if the option is about to change {% endcomment %}
 {% if not current_option == new_option %}
-    {% comment %} If selected option is None, it is being removed {% endcomment %}
-    {% if new_option == "None" %}
-    <button type="submit" class="btn btn-danger">
-        Remove
-    </button>
-    {% comment %} Otherwise differentiate between changing or adding based on current option {% endcomment %}
-    {% else %}
-    <button type="submit" class="btn btn-primary">
-        {% if current_option == "None" %}
-            Add
+    <div class="row m-0 d-none-empty">
+        {% comment %} If selected option is None, it is being removed {% endcomment %}
+        {% if new_option == "None" %}
+            <button type="submit" class="btn btn-danger">Remove</button>
+            {% comment %} Otherwise differentiate between changing or adding based on current option {% endcomment %}
         {% else %}
-            Change
+            <button type="submit" class="btn btn-primary">
+                {% if current_option == "None" %}
+                    Add
+                {% else %}
+                    Change
+                {% endif %}
+            </button>
         {% endif %}
-    </button>
-    {% endif %}
+    </div>
 {% endif %}

scipost_django/production/templates/production/_hx_productionstream_change_invofficer.html

 {% load bootstrap %}
 
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.invitations_officer.choices|length > 0 %}
-    <div id="productionstream-update-invitations_officer">
+{% if form.fields.invitations_officer.choices|length > 0 %}
+    <div id="productionstream-{{ stream.id }}-update-invitations_officer">
         <form hx-post="{% url 'production:update_invitations_officer' stream.id %}"
-              hx-target="#productionstream-update-invitations_officer"
+              hx-target="#productionstream-{{ stream.id }}-update-invitations_officer"
               hx-swap="outerHTML"
               class="row">
             {% csrf_token %}
             <div class="col">{{ form|bootstrap_purely_inline }}</div>
-            <div class="col-auto h-100"
+            <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
                  hx-post="{% url 'production:render_action_buttons' stream.id 'invitations_officer' %}"
                  hx-swap="innerHTML"
-                 class="col-auto"
                  hx-trigger="change from:select#productionstream_{{ stream.id }}_id_invitations_officer"
                  hx-target="this"></div>
             <div class="text-primary">{{ message }}</div>

scipost_django/production/templates/production/_hx_productionstream_change_prodofficer.html

 {% load bootstrap %}
 
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.officer.choices|length > 0 %}
-    <div id="productionstream-update-officer">
+{% if form.fields.officer.choices|length > 0 %}
+    <div id="productionstream-{{ stream.id }}-update-officer">
         <form hx-post="{% url 'production:update_officer' stream.id %}"
-              hx-target="#productionstream-update-officer"
+              hx-target="#productionstream-{{ stream.id }}-update-officer"
               hx-swap="outerHTML"
               class="row">
             {% csrf_token %}
             <div class="col">{{ form|bootstrap_purely_inline }}</div>
-            <div class="col-auto h-100"
+            <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
                  hx-post="{% url 'production:render_action_buttons' stream.id 'officer' %}"
                  hx-swap="innerHTML"
-                 class="col-auto"
                  hx-trigger="change from:select#productionstream_{{ stream.id }}_id_officer"
                  hx-target="this"></div>
             <div class="text-primary">{{ message }}</div>

scipost_django/production/templates/production/_hx_productionstream_change_status.html

 {% load bootstrap %}
 
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.status.choices|length > 0 %}
+{% if form.fields.status.choices|length > 0 %}
 
-    <form id="productionstream-update-status"
+    <form id="productionstream-{{ stream.id }}-update-status"
           hx-post="{% url 'production:update_status' stream.id %}"
           hx-target="this"
           hx-swap="outerHTML"
-          class="row">
+          hx-trigger="submit, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500">
         {% csrf_token %}
-        <div class="col">{{ form|bootstrap_purely_inline }}</div>
-        <div class="col-auto h-100"
-             hx-post="{% url 'production:render_action_buttons' stream.id 'status' %}"
-             hx-swap="innerHTML"
-             class="col-auto"
-             hx-trigger="load, change from:select#productionstream_{{ stream.id }}_id_status"
-             hx-target="this"></div>
-        <div class="text-primary">{{ message }}</div>
+        <div class="row">
+            <div class="col">{{ form|bootstrap_purely_inline }}</div>
+            <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
+                 hx-post="{% url 'production:render_action_buttons' stream.id 'status' %}"
+                 hx-swap="innerHTML"
+                 hx-trigger="load, change from:select#productionstream_{{ stream.id }}_id_status"
+                 hx-target="this"></div>
+            <div class="text-primary">{{ message }}</div>
+        </div>
     </form>
-
 {% endif %}

scipost_django/production/templates/production/_hx_productionstream_change_supervisor.html

 {% load bootstrap %}
 
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.supervisor.choices|length > 0 %}
-    <div id="productionstream-update-supervisor">
+{% if form.fields.supervisor.choices|length > 0 %}
+    <div id="productionstream-{{ stream.id }}-update-supervisor">
         <form hx-post="{% url 'production:update_supervisor' stream.id %}"
-              hx-target="#productionstream-update-supervisor"
+              hx-target="#productionstream-{{ stream.id }}-update-supervisor"
               hx-swap="outerHTML"
               class="row">
             {% csrf_token %}
             <div class="col">{{ form|bootstrap_purely_inline }}</div>
-            <div class="col-auto h-100"
+            <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
                  hx-post="{% url 'production:render_action_buttons' stream.id 'supervisor' %}"
                  hx-swap="innerHTML"
-                 class="col-auto"
                  hx-trigger="load, change from:select#productionstream_{{ stream.id }}_id_supervisor"
                  hx-target="this"></div>
             <div class="text-primary">{{ message }}</div>

scipost_django/scipost/static/scipost/assets/config/preconfig.scss

@@ -209,4 +209,10 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
   &::-webkit-details-marker {
     display: none;
   }
+}
+
+// Utilities for common display issues
+// Hide div
+.d-none-empty:empty {
+  display: none;
 }
\ No newline at end of file