CSS curves settings fix

client/components/curves_settings_popup/color_selector/color_selector.css

@@ -1,3 +1,3 @@
 .color-selector-select{
-    width:57px;
+    width:100%;
 }

client/components/curves_settings_popup/curves_settings_popup.css

@@ -11,7 +11,7 @@
 }
 
 #curves-settings-popup-container{
-    width: 380px;
+    width: 100%;
     height: 100%;
     border: 2px solid black;
     margin: auto;
@@ -44,6 +44,8 @@
 #curves-settings-popup-content{
     padding: 10px;
     height: calc(100% - 80px);
+    display: flex;
+    flex-direction: column;
 }
 
 .button-center-wrapper{
@@ -62,7 +64,7 @@
 }
 
 #curves-settings-popup-table{
-    width: 335px;
+    width: 100%;
 }
 #curves-settings-popup-table,
 #curves-settings-popup-table tr th,
@@ -77,9 +79,23 @@
     text-align: left;
 }
 
+#curves-settings-popup-table tbody tr td:not(.bin-cell){
+   position: relative; 
+}
+
+#curves-settings-popup-table tbody tr td:not(.bin-cell) div{
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+} 
+
 .text-input{
     padding: 0;
     border: 0;
+    width: 100%;
 }
 
 .bin-cell{
@@ -91,17 +107,6 @@ td img{
     height: 15px;
 }
 
-.variable-cell, .parameter-cell, .cat-cell{
-    width: 73px;
-}
-.color-cell{
-    width: 57px;
-}
-
-.unit-cell{
-    width: 37px;
-}
-
 #curves-settings-popup-footer{
     height: 40px;
     display: flex;

client/components/curves_settings_popup/curves_settings_popup.js

@@ -77,6 +77,8 @@ class CurvesSettingsPopup extends HTMLElement{
 
         for(let cell of row.children){
             let content = cell.children[0]; //there is only one child per cell
+            if(content.nodeName == "DIV"){ //we skip the first cell which is the bin
+                content = content.children[0];
                 if(content.nodeName == "INPUT" && content.value !== ""){
                     configuration[content.name] = content.value;
                 }
@@ -84,6 +86,7 @@ class CurvesSettingsPopup extends HTMLElement{
                     configuration["color"] = content.getValue();
                 }
             }
+        }
         return configuration;
     }
 
@@ -158,7 +161,6 @@ class CurvesSettingsPopup extends HTMLElement{
 
         let binImg = document.createElement("img");
         binImg.src = "res/bin.png";
-        binImg.classList.add("bin-cell");
         binImg.onclick = () => {
             binImg.parentNode.parentNode.remove();
             this.addNewRowIfEmpty();
@@ -173,9 +175,11 @@ class CurvesSettingsPopup extends HTMLElement{
         this.createTextInput(row, lineConfiguration, "cat")
 
         let colorCell = document.createElement("td");
+        let colorDiv = document.createElement("div");
         let seaColorSelector = new ColorSelector();
-        row.append(colorCell)
+        row.append(colorCell);
-        colorCell.appendChild(seaColorSelector); //need to first append it before calling setValue
+        colorCell.append(colorDiv);
+        colorDiv.appendChild(seaColorSelector); //need to first append it before calling setValue
         seaColorSelector.setValue("");
         if(lineConfiguration != null && lineConfiguration.hasOwnProperty('color')){
             seaColorSelector.setValue(lineConfiguration['color']);
@@ -188,17 +192,19 @@ class CurvesSettingsPopup extends HTMLElement{
 
     createTextInput(row, lineConfiguration, type){
         let cell = document.createElement("td");
+        let div = document.createElement("div");
         let input = document.createElement("input");
         input.type = "text";
         input.spellcheck = false
         input.autocorrect = "off"
         input.name = type;
-        input.classList.add(`${type}-cell`, "text-input");
+        input.classList.add("text-input");
         input.value = "";
         if(lineConfiguration != null && lineConfiguration.hasOwnProperty(type)){
             input.value = lineConfiguration[type];
         }
-        cell.appendChild(input);
+        div.appendChild(input)
+        cell.appendChild(div);
         row.append(cell)
     }