Fix broken sas ui in webkit based browsers

core/static/core/components/ajax-select.scss

@@ -0,0 +1,44 @@
+/* This also requires ajax-select-index.css */
+.tomselected {
+  .select2-container--default {
+    color: black;
+  }
+}
+
+.ts-dropdown {
+
+  .select-item {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+
+    img {
+      height: 40px;
+      width: 40px;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+  }
+}
+
+.ts-control {
+
+  .item {
+    .fa-times {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+
+    cursor: pointer;
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    display: inline-block;
+    margin-left: 5px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    padding-right: 10px;
+  }
+
+}

core/static/core/style.scss

@@ -712,63 +712,6 @@ a:not(.button) {
   }
 }
 
-
-.tomselected {
-  margin: 10px 0 !important;
-  max-width: 100%;
-  min-width: 100%;
-
-  ul {
-    margin: 0;
-  }
-
-  textarea {
-    background-color: inherit;
-  }
-
-  .select2-container--default {
-    color: black;
-  }
-}
-
-.ts-dropdown {
-
-  .select-item {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-
-    img {
-      height: 40px;
-      width: 40px;
-      object-fit: cover;
-      border-radius: 50%;
-    }
-  }
-}
-
-.ts-control {
-
-  .item {
-    .fa-times {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-
-    cursor: pointer;
-    background-color: #e4e4e4;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-    display: inline-block;
-    margin-left: 5px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    padding-right: 10px;
-  }
-
-}
-
 #news_details {
   display: inline-block;
   margin-top: 20px;

sas/templates/sas/picture.jinja

@@ -1,12 +1,13 @@
 {% extends "core/base.jinja" %}
 
 {%- block additional_css -%}
-  <link rel="stylesheet" href="{{ static('webpack/ajax-select-index.css') }}">
+  <link defer rel="stylesheet" href="{{ static('webpack/core/components/ajax-select-index.css') }}">
-  <link rel="stylesheet" href="{{ static('sas/css/picture.scss') }}">
+  <link defer rel="stylesheet" href="{{ static('core/components/ajax-select.scss') }}">
+  <link defer rel="stylesheet" href="{{ static('sas/css/picture.scss') }}">
 {%- endblock -%}
 
 {%- block additional_js -%}
-  <script defer src="{{ static('webpack/ajax-select-index.ts') }}"></script>
+  <script defer src="{{ static('webpack/core/components/ajax-select-index.ts') }}"></script>
   <script defer src="{{ static("webpack/sas/viewer-index.ts") }}"></script>
 {%- endblock -%}
 

webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
     .sync("./!(static)/static/webpack/**/*?(-)index.[j|t]s?(x)")
     .reduce((obj, el) => {
       // We include the path inside the webpack folder in the name
-      const relativePath = [];
+      let relativePath = [];
       const fullPath = path.parse(el);
       for (const dir of fullPath.dir.split("/").reverse()) {
         if (dir === "webpack") {
@@ -18,6 +18,8 @@ module.exports = {
         }
         relativePath.push(dir);
       }
+      // We collected folders in reverse order, we put them back in the original order
+      relativePath = relativePath.reverse();
       relativePath.push(fullPath.name);
       obj[relativePath.join("/")] = `./${el}`;
       return obj;