ui improvements

files/global.css

@@ -157,14 +157,31 @@ figure {
   cursor: pointer;
 }
 
-.tooltip a object {
+.tooltip a {
   cursor: pointer;
 }
 
+.tagtoggle {
+  cursor: pointer;
+  float: right;
+  padding: 12px;
+
+}
+
+.tagflex {
+  display: flex;
+}
+
+.tag {
+  flex: 1;
+}
+
+input {
+  pointer-events: none;
+}
+
 .tooltiptext {
-  display: none;
   cursor: default;
-  width: max-content;
   position: absolute;
   z-index: 100;
   opacity: 0;
@@ -176,11 +193,24 @@ figure {
 
 .tooltip .infotext {
   padding: 12px;
+  width: max-content;
 }
 
-.tooltip .tagdropdown {
+.tooltiptext.tagdropdown {
+  width: max-content;
+  right: 0;
   padding: 0;
   margin: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  opacity: 0;
+}
+
+.tooltiptext.tagdropdown.show {
+  max-height: 286px;
+  overflow-y: scroll;
+  opacity: 1;
 }
 
 .tooltip:hover .infotext {
@@ -193,12 +223,27 @@ figure {
   opacity: 1;
 }
 
-.tooltip .tooltiptext .tagentry {
+.tagentryparent {
+  width: 100%;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  opacity: 0;
+}
+
+.tagentryparent.show {
+  max-height: 286px;
+  opacity: 1;
+  overflow-y: scroll;
+}
+
+.tagentry {
   list-style: none;
   width: 100%;
   cursor: pointer;
   margin: 0;
   padding: 0;
+  display: block;
 }
 
 .tooltip .tooltiptext ol {
@@ -208,7 +253,6 @@ figure {
 
 .tooltip .tooltiptext .tagentry label {
   cursor: pointer;
-  width: 100%;
   height: 100%;
   padding: 12px;
   display: block;