[UI] Fixed issue where certain form element would be on top the left panel

public/assets/css/base_mid.css

@@ -158,4 +158,13 @@ b {
       stroke: currentColor;
       fill: currentColor;
       align-self: center;
+}
+
+/* left panel z-index fix */
+.form {
+      position: relative;
+      z-index: 0;
+}
+#header {
+      z-index: 1;
 }

public/assets/css/base_small.css

@@ -153,4 +153,13 @@ b {
       stroke-width: 0;
       stroke: currentColor;
       fill: currentColor;
+}
+
+/* left panel z-index fix */
+.form {
+      position: relative;
+      z-index: 0;
+}
+#header {
+      z-index: 1;
 }

templates/base.html.twig

@@ -72,7 +72,7 @@
 
             {% block nav %}{% endblock %}
             {% block body %}{% endblock %}
-            {% block javascripts %}{% endblock %}
+            {% block javascripts %}{% endblock javascripts%}
       </div>
       </body>
 </html>

templates/settings/avatar.html.twig

@@ -23,4 +23,4 @@
 
 {% block javascripts %}
       <script type="text/javascript" src="{{ asset('assets/javascript/cropping.js') }}"></script>
-{% endblock %}
+{% endblock javascripts %}