Improve calendar header design

src/jsMain/resources/style/style.scss

@@ -303,8 +303,10 @@ a {
     position: absolute;
     z-index: 1;
     background: $background-primary-color;
-    width: 100%;
-    border: solid 1px $table-border-color;
+    width: 10rem;
+    border: solid 1px $input-border-color;
+    border-radius: $border-radius;
+    padding: 0.5rem 0;
 
     span {
       padding: 0 0.5rem;
@@ -507,6 +509,33 @@ form {
   }
 }
 
+.header {
+  height: 2.2rem;
+  line-height: 2.2rem;
+}
+
+.header-left {
+  float: left;
+
+  & > * {
+    display: block;
+    float: left;
+  }
+
+  i {
+    font-size: 1.5rem;
+    padding: 0 0.5rem;
+  }
+}
+
+.header-right {
+  float: right;
+
+  &::after {
+    clear: both;
+  }
+}
+
 .calendar {
   width: 100%;
   position: relative;
@@ -528,8 +557,7 @@ form {
   display: block;
   position: absolute;
   right: 0;
-  top: -3rem;
-  padding-top: 3rem;
+  top: 0;
 
   .calendar-edit-main {
     position: sticky;
@@ -538,19 +566,20 @@ form {
     transition: margin-left $transitionTime, opacity $transitionTime, visibility $transitionTime;
     top: 1rem;
     visibility: hidden;
+    height: 100vh;
   }
 }
 
-.calendar-edit-top {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .calendar-edit-search {
   padding: 0.5rem;
 }
 
+.calendar-edit-list {
+  height: calc(100% - 4.5rem);
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
 .calendar-work-group {
   position: relative;
   display: block;