Fixed popup and header table

Frontend/assets/css/tools/mock/r11popup.css

@@ -18,7 +18,6 @@
     min-width: 33%;
     max-width: 60%;
     max-height: 70%;
-    overflow: scroll;
     background-color: white;
     box-shadow: 10px 10px 5px lightblue;
     min-height: 45%;
@@ -27,6 +26,9 @@
     padding: 10px 15px 15px 15px;
     color: black;
     border: 1px #2A93B0 solid;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
 }
 
 .popup-button-close-container{
@@ -35,6 +37,14 @@
     margin-top: 1%;
     font-size: xx-large;
     font-weight: bold;
+    position: sticky;
+    top:0
+}
+
+.hiddable-popup-option{
+    flex-grow: 1;
+    overflow: auto;
+    padding: 1.5%;
 }
 
 .popup-button-close{

Frontend/assets/css/tools/mock/r11tables.css

@@ -86,6 +86,10 @@
     height: 100%;
 }
 
+.history-header-name{
+    min-width: 10vw;
+}
+
 #historyTable, td{
     padding: 1%;
     overflow-x: scroll;

Frontend/assets/scripts/tools/mock/uianimation.js

@@ -67,8 +67,8 @@ function showHeadersHistory(element){
     (value,key) => {
         historyTable +=
         '<tr>' +
-        '<td>'+ key + '</td>' +
+        '<td class="history-header-name">'+ key + '</td>' +
-        '<td>'+ value + '</td>' +
+        '<td class="history-header-value">'+ value + '</td>' +
         '</tr>'
     }
    );