update 2024-06-28

src/web/css/notification.css

@@ -1,3 +1,13 @@
+.notificationsection {
+    width: max-content;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+    z-index: 1;
+}
+
 .notification {
     width: max-content;
     height: 0;
@@ -5,7 +15,7 @@
     pointer-events: none;
     z-index: 10;
     border-radius: 10px;
-    position: fixed;
+    /* position: fixed; */
     top: 0;
     right: 0;
     transition: 0.3s;

src/web/css/settings.css

@@ -92,18 +92,20 @@
 
 .settingrectbody {
   width: 100%;
-  height: 0;
+  max-height: 0;
   overflow: hidden;
   transition: 0.3s;
 }
 
 .settingrectbody.active {
-  height: max-content;
+  max-height: 500px;
+  overflow-y: auto;
 }
 
 .settingrectbody>table {
   width: 100%;
   text-align: left;
+  transition: 0.3s;
 }
 
 .settingrectfooter {
@@ -113,10 +115,27 @@
   gap: 10px;
 }
 
-.settingrectfooter>button {
+.settingrectfooter.onebutton {
+  gap: 0;
+}
+
+.settingrectfooterbutton {
   width: 100%;
 }
 
+.hiddenbutton {
+  width: 0;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+.hiddenbutton.active {
+  position: relative;
+  width: 100%;
+  padding: 10px;
+}
+
 table {
   width: 100%;
   border: 2px solid ;
@@ -133,6 +152,9 @@ tbody>tr>th {
   border: 2px solid;
   padding: 10px;
   border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 @media screen and (max-width: 1200px) {