Merge branch '20-make-notetext-nicer' into 'master'

Resolve "Make notetext nicer"

Closes #20

See merge request !11

scenarios/xslt/edxml2html/css/styles.css

@@ -295,28 +295,40 @@ hr.metamark-line.doubleLine {
 
 /*----- Kommentare als tooltip -----*/
 
+div:has(> .philology.section) {
+    overflow: hidden;
+}
+
 .note {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black;
+    display: block;
+    position: relative;
 }
 
 .note .notetext {
-  visibility: hidden;
-  width: 120px;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px 0;
-
-  /* Position the note */
-  position: absolute;
-  z-index: 1;
+    &::-webkit-scrollbar { 
+      display: none; /* Safari and Chrome */
+    }
+    -moz-border-radius: 3px;
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    -webkit-border-radius: 3px;
+    background-color: var(--sub-blue);
+    border-radius: 3px;
+    color: white;
+    font-size: small;
+    max-height: 33vh;
+    overflow: scroll;
+    padding: 5px 0;
+    position: absolute;
+    scrollbar-width: none; /* Firefox */
+    text-align: left;
+    visibility: hidden;
+    width: max(8vw, 80px);
+    word-wrap: break-word;
+    z-index: 1;
 }
 
 .note:hover .notetext {
-  visibility: visible;
+    visibility: visible;
 }
 
 /*----------------------------------{ ITEMS: WORDS }--------------------------------*/
@@ -329,9 +341,9 @@ hr.metamark-line.doubleLine {
 /*::::::::::::::::::::::::::::::::::{ TEI: Transcriptional }::::::::::::::::::::::::::::::::*/
 
 .g[data-cert="uncertain"]:after {
-  content: "?";  
-  font-size: small;
-  vertical-align: super;
+    content: "?";  
+    font-size: small;
+    vertical-align: super;
 }
 
 .surface .tei::before,