FE save imediately stations.yml after setting

ycast/static/script.js

@@ -131,7 +131,8 @@ function deleteElement(event, objElem){
     if(objElem) {
         objElem.remove();
         refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idCategory').value, true);
-        setBookmarkCategoryList()
+        setBookmarkCategoryList();
+        saveBookmarks();
     }
 }
 
@@ -155,6 +156,7 @@ function copyElementToBookmark(event, objElem){
         myList.appendChild(listItem);
         refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idCategory').value, true);
         setBookmarkCategoryList();
+        saveBookmarks();
     }
 }
 

ycast/static/style.css

@@ -4,15 +4,16 @@ body {
 
 .page {
     display: block;
-    padding-left: calc(100% / 2 - 20rem);
+    padding-left: calc(100% / 2 - 12.5rem);
 }
 
 .header {
     position: relative;
+    block-sizing: borderbox;
     height=30rem;
-    max-width: 19.0rem;
-    min-width: 19.0rem;
-    margin: 0rem;
+    max-width: 20.9rem;
+    min-width: 20.9rem;
+    margin: 0.3rem;
     background-color: blue;
     color: white;
     text-align: center;
@@ -23,16 +24,19 @@ body {
     position: relative;
     display: inline-block;
     box-sizing: border-box;
-    margin: 0rem;
+    margin: 0.2rem;
     max-height: 60rem;
-    max-width: 20rem;
-    min-width: 20rem;
+    max-width: 22rem;
+    min-width: 22rem;
 }
 
-@media (min-width: 42.5rem) {
+@media (min-width: 52rem) {
     .header {
-        max-width: 39.2rem;
-        min-width: 39.2rem;
+        max-width: 43.5rem;
+        min-width: 43.5rem;
+    }
+    .page {
+        padding-left: calc(100% / 2 - 23rem);
     }
 }
 

ycast/templates/index.html

@@ -13,7 +13,6 @@
     <div class="page">
         <div class="header">
             <h2>YCast advanced</h2>
-             <button onclick="saveBookmarks()">Save</button>
             <div>
                 <label for="id_category">station-source:</label>
                 <select tabindex="1" id="id_category" name="category" oninput="onInputSelect(event, this)">
@@ -49,7 +48,7 @@
                 <h3>Bookmarks</h3>
                 <label for="idCategory">category:</label>
                 <input tabindex="10000" list="categorylist" id="idCategory"
-                       onfocus="this.value=''" onclick="this.value=''" oninput="onInputSelect(event, this)">
+                       onfocus="this.value=''" onclick="setBookmarkCategoryList()" oninput="onInputSelect(event, this)">
                 <datalist id="categorylist">
                     <option value="Actual">
                     <option value="Pop">