1 files changed, 47 insertions, 19 deletions

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index fd7fbb333..b5a3c5d84 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -24,6 +24,27 @@ audiotag:hover {
     transform: scale(2);
     transform-origin: bottom center;
 }
+.formattedTextBox {
+    touch-action: none;
+    background: inherit;
+    padding: 0;
+    border-width: 0px;
+    border-radius: inherit;
+    border-color: $medium-gray;
+    box-sizing: border-box;
+    background-color: inherit;
+    border-style: solid;
+    overflow-y: auto;
+    overflow-x: hidden;
+    color: inherit;
+    display: flex;
+    flex-direction: row;
+    transition: opacity 1s;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
 
 .formattedTextBox-cont {
     touch-action: none;
@@ -51,6 +72,17 @@ audiotag:hover {
         position: absolute;
     }
 }
+.formattedTextBox-alternateButton {
+    align-items: center;
+    flex-direction: column;
+    position: absolute;
+    color: white;
+    background: black;
+    right: 0;
+    bottom: 0;
+    width: 11;
+    height: 11;
+}
 
 .formattedTextBox-outer-selected,
 .formattedTextBox-outer {
@@ -193,16 +225,15 @@ audiotag:hover {
 }
 
 footnote {
-    display: inline-block;
+    display: inline-flex;
+    top: -0.5em;
     position: relative;
     cursor: pointer;
-
-    div {
-        padding: 0 !important;
-    }
+    height: 1em;
+    width: 0.5em;
 }
 
-footnote::after {
+footnote::before {
     content: counter(prosemirror-footnote);
     vertical-align: super;
     font-size: 75%;
@@ -216,15 +247,14 @@ footnote::after {
 .footnote-tooltip {
     cursor: auto;
     font-size: 75%;
-    position: absolute;
-    left: -30px;
-    top: calc(100% + 10px);
+    position: relative;
     background: silver;
-    padding: 3px;
     border-radius: 2px;
-    max-width: 100px;
-    min-width: 50px;
-    width: max-content;
+    min-width: 100px;
+    top: 2em;
+    height: max-content;
+    left: -1em;
+    padding: 3px;
 }
 
 .prosemirror-attribution {
@@ -239,8 +269,7 @@ footnote::after {
     border-left-color: transparent;
     border-right-color: transparent;
     position: absolute;
-    top: -5px;
-    left: 27px;
+    top: -0.5em;
     content: ' ';
     height: 0;
     width: 0;
@@ -734,8 +763,8 @@ footnote::after {
         cursor: auto;
         font-size: 75%;
         position: absolute;
-        left: -30px;
-        top: calc(100% + 10px);
+        // left: -30px;
+        // top: calc(100% + 10px);
         background: silver;
         padding: 3px;
         border-radius: 2px;
@@ -756,8 +785,7 @@ footnote::after {
         border-left-color: transparent;
         border-right-color: transparent;
         position: absolute;
-        top: -5px;
-        left: 27px;
+        top: -0.5em;
         content: ' ';
         height: 0;
         width: 0;