From 6b3012d21c0347966e165161ab21c9d70576971a Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Fri, 18 Oct 2024 23:50:04 +0200
Subject: [PATCH] Fix broken sas ui in webkit based browsers

---
 core/static/core/components/ajax-select.scss  | 44 ++++++++++++++
 core/static/core/style.scss                   | 57 -------------------
 .../components}/ajax-select-index.ts          |  0
 sas/templates/sas/picture.jinja               |  7 ++-
 webpack.config.js                             |  4 +-
 5 files changed, 51 insertions(+), 61 deletions(-)
 create mode 100644 core/static/core/components/ajax-select.scss
 rename core/static/webpack/{ => core/components}/ajax-select-index.ts (100%)

diff --git a/core/static/core/components/ajax-select.scss b/core/static/core/components/ajax-select.scss
new file mode 100644
index 00000000..8005b52d
--- /dev/null
+++ b/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;
+  }
+
+}
\ No newline at end of file
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index d658d957..21481454 100644
--- a/core/static/core/style.scss
+++ b/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;
diff --git a/core/static/webpack/ajax-select-index.ts b/core/static/webpack/core/components/ajax-select-index.ts
similarity index 100%
rename from core/static/webpack/ajax-select-index.ts
rename to core/static/webpack/core/components/ajax-select-index.ts
diff --git a/sas/templates/sas/picture.jinja b/sas/templates/sas/picture.jinja
index 965164fa..c14fe72b 100644
--- a/sas/templates/sas/picture.jinja
+++ b/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 rel="stylesheet" href="{{ static('sas/css/picture.scss') }}">
+  <link defer rel="stylesheet" href="{{ static('webpack/core/components/ajax-select-index.css') }}">
+  <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 -%}
 
diff --git a/webpack.config.js b/webpack.config.js
index ca2b7046..5ff49e1f 100644
--- a/webpack.config.js
+++ b/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;