@zzish/math-rich-input 0.1.7 → 0.1.9

package/dist/index.js

@@ -19497,8 +19497,7 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
 }(React__default['default'].Component);
 
 var DEFAULT_TOP$1 = -1;
-var DEFAULT_LEFT$1 = -1;
-var TOP_MARGIN = 3;
+var DEFAULT_RIGHT$1 = -1;
 var ACCENTS_FOR_LETTER = {
   a: ["à", "á", "â", "ä", "æ", "ã", "å", "ā"],
   c: ["ç", "ć", "č"],
@@ -19698,6 +19697,11 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
       if (insert) _this.suppliedClickHandler(e, null, character);else _this.suppliedClickHandler(e, _this.letterForAccents, character);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isInViewport", function (element) {
+      var rect = element.getBoundingClientRect();
+      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleSelectTab", function (tab) {
       GLOBAL_last_selected_tab = tab;
 
@@ -19707,7 +19711,6 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-      // console.log("componentDidUpdate")
       var accentKey = _this.props.keyPressed;
 
       if (accentKey === "Backspace" || accentKey === "ArrowLeft" || accentKey === "ArrowRight") {
@@ -19727,7 +19730,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       selectedTab: GLOBAL_last_selected_tab,
       top: DEFAULT_TOP$1,
-      left: DEFAULT_LEFT$1
+      right: DEFAULT_RIGHT$1,
+      shouldHorizontiallyAlign: false
     };
     _this.suppliedClickHandler = null;
     _this.handleButtonClick = _this.handleButtonClick.bind(_assertThisInitialized(_this));
@@ -19759,23 +19763,32 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
           return;
         }
 
+        var toolBarBounds = thisBar.parentNode.getBoundingClientRect();
         var inputBounds = node.getBoundingClientRect();
         var thisBounds = thisBar.getBoundingClientRect();
         this.shouldUpdatePosition = false; // Vertically align below input field
 
-        var top = inputBounds.bottom + TOP_MARGIN; // Horizontally align to left or right of input field
-
-        var left = inputBounds.right - thisBounds.width; // right align
+        var top = inputBounds.bottom - toolBarBounds.height;
+        if (this.props.compactMode) top = inputBounds.height; // Horizontally align
 
-        if (this.props.compactMode) left = inputBounds.left; // left align
+        var right = 0; // right align
         // Make sure it is on screen horizontally
 
-        if (thisBounds.width > inputBounds.width) left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
-        if (left + thisBounds.width > window.innerWidth) left = window.innerWidth - thisBounds.width - 2;
-        if (left < 0) left = 0;
+        var shouldHorizontiallyAlign = false;
+
+        if (thisBounds.width > inputBounds.width) {
+          shouldHorizontiallyAlign = true;
+
+          if (this.isInViewport(thisBar)) {
+            right = right - (thisBounds.width - inputBounds.width) / 2;
+          } // else remain right aligned
+
+        }
+
         this.setState({
-          left: left,
-          top: top
+          right: right,
+          top: top,
+          shouldHorizontiallyAlign: shouldHorizontiallyAlign
         });
       } else {
         this.shouldUpdatePosition = true;
@@ -19804,8 +19817,11 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
 
       var style = _objectSpread2({}, this.props.style);
 
-      if (this.state.left !== DEFAULT_LEFT$1 || this.state.top !== DEFAULT_TOP$1) {
-        style.left = this.state.left + "px";
+      if (this.state.right !== DEFAULT_RIGHT$1 || this.state.top !== DEFAULT_TOP$1) {
+        if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+          style.right = this.state.right + "px";
+        }
+
         style.top = this.state.top + "px";
       }
 
@@ -19824,7 +19840,7 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(e) {
           return e.preventDefault();
         }
-      }, compactMode && /*#__PURE__*/React__default['default'].createElement("div", null, quickAccents.map(function (character, index) {
+      }, compactMode && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, quickAccents.map(function (character, index) {
         return /*#__PURE__*/React__default['default'].createElement("button", {
           className: "AccentBar-button AB-narrow AB-compact",
           key: "accent-button-" + index,
@@ -20242,7 +20258,7 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
 }(React__default['default'].Component);
 
 var DEFAULT_TOP = 0;
-var DEFAULT_LEFT = 0;
+var DEFAULT_RIGHT = 0;
 var BOTTOM_MARGIN = 5;
 var CTRL_OR_META = /(Mac)/i.test(window.navigator.platform) ? "\u2318" : "CTRL+";
 
@@ -20300,10 +20316,16 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
 
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isInViewport", function (element) {
+      var rect = element.getBoundingClientRect();
+      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    });
+
     _this.state = {
       showAccents: false,
       top: DEFAULT_TOP,
-      left: DEFAULT_LEFT
+      right: DEFAULT_RIGHT,
+      shouldHorizontiallyAlign: false
     };
     _this.handleButtonClick = _this.handleButtonClick.bind(_assertThisInitialized(_this));
     _this.suppliedClickHandler = null;
@@ -20336,16 +20358,25 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         var thisBounds = thisBar.getBoundingClientRect();
         this.shouldUpdatePosition = false; // Vertically align above input field
 
-        var top = inputBounds.top - thisBounds.height - BOTTOM_MARGIN; // Horizontally align to right of input field
+        var top = (thisBounds.height + BOTTOM_MARGIN) * -1; // Horizontally align
+
+        var right = 0; // right align
+
+        var shouldHorizontiallyAlign = false;
+
+        if (thisBounds.width > inputBounds.width) {
+          shouldHorizontiallyAlign = true;
 
-        var left = inputBounds.right - thisBounds.width; // Make sure it is on screen horizontally
+          if (this.isInViewport(thisBar)) {
+            right = right - (thisBounds.width - inputBounds.width) / 2;
+          } // else remain right aligned
+
+        }
 
-        if (thisBounds.width > inputBounds.width) left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
-        if (left + thisBounds.width > window.innerWidth) left = window.innerWidth - thisBounds.width - 2;
-        if (left < 0) left = 0;
         this.setState({
-          left: left,
-          top: top
+          right: right,
+          top: top,
+          shouldHorizontiallyAlign: shouldHorizontiallyAlign
         });
       } else {
         this.shouldUpdatePosition = true;
@@ -20376,8 +20407,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       // }
 
 
-      if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
-        style.left = this.state.left + "px";
+      if (this.state.right !== DEFAULT_RIGHT || this.state.top !== DEFAULT_TOP) {
+        if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+          style.right = this.state.right + "px";
+        }
+
         style.top = this.state.top + "px";
       }
 

package/dist/math-rich-input.css

@@ -18,10 +18,9 @@
 }
 
 .MathRichInput-scrollview {
+  position: relative;
   display: flex;
-  overflow: scroll;
   border-radius: 5px;
-  overflow: overlay;
 }
 
 .MathRichInput p {
@@ -35,6 +34,8 @@
   width: 100%;
   border-radius: 5px;
   background-color: #fff;
+  overflow-x: scroll;
+  overflow: overlay;
 }
 
 .MathRichInput:focus {
@@ -223,31 +224,160 @@
 .EquationEditorModal .slider.round:before {
   border-radius: 50%;
 }
+/* Note that the top left position of the toolbar is set programatically in componentDidMount */
+
+.Toolbar {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  height: 42px;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+  animation: 0.5s fadeIn1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.Toolbar-button {
+  font-family: sans-serif;
+  font-size: 16px;
+  width: 40px;
+  height: 36px;
+  background-color: white;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 2px;
+}
+
+.Toolbar-button:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+.Toolbar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.TB-narrow {
+  width: 30px;
+}
+
+.TB-wide {
+  width: 46px;
+}
+
+.TB-selected {
+  background: #d0d0d0;
+  color: black;
+  cursor: pointer;
+  animation: 0.2s TB-fadeIn;
+  animation-fill-mode: forwards;
+}
+
+.TB-selected:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+@keyframes TB-fadeIn {
+  00% {
+    background: white;
+  }
+  100% {
+    background: #d0d0d0;
+  }
+}
+
+/* Tooltip text */
+.Toolbar-button .tooltiptext {
+  font-weight: normal;
+  visibility: hidden;
+  width: 100px;
+  background-color: #222;
+  color: #fff;
+  /*font-weight: bold;*/
+  font-size: 12px;
+  text-align: center;
+  padding: 4px 10px;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 2;
+  top: -90%; /* Must leave a small gap between tooltip and button */
+  left: 50px;
+
+  /* transform: translate (50%,0%); */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.Toolbar-button:hover .tooltiptext {
+  animation: 0.8s fadeIn2;
+  animation-fill-mode: forwards;
+  visibility: visible;
+  /* width: 100px; */
+  /* top: -90%; */ /* Must leave a small gap between tooltip and button */
+  /* left: 20%; */
+  /* margin-left: -50px; */
+}
+
+@keyframes fadeIn2 {
+  00% {
+    opacity: 0;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    visibility: visible;
+    opacity: 0.9;
+  }
+}
+
+/* .tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
+} */
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {
-  position: fixed;
+  position: absolute;
   z-index: 1;
   width: 360px;
   background-color: #fff;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
-  padding: 5px;
+  padding: 8px;
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
 
 .AccentBar-compact {
-  position: fixed;
+  display: flex;
+  position: absolute;
   z-index: 1;
   background-color: white;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
   padding: 5px;
-  top: 0px;
-  left: 0px; /* Important to set this default so that accent bar renders to optimal width */
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
@@ -399,138 +529,6 @@
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
-/* Note that the top left position of the toolbar is set programatically in componentDidMount */
-
-.Toolbar {
-  position: fixed;
-  z-index: 1;
-  display: flex;
-  height: 42px;
-  background-color: white;
-  border: 1px solid #d0d0d0;
-  border-radius: 5px;
-  box-shadow: 1px 1px 5px #a0a0a0;
-  animation: 0.5s fadeIn1;
-  animation-fill-mode: forwards;
-  top: 0px;
-  left: 0px; /* important to set this so that toolbar initially renders full width */
-}
-
-@keyframes fadeIn1 {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.Toolbar-button {
-  font-family: sans-serif;
-  font-size: 16px;
-  width: 40px;
-  height: 36px;
-  background-color: white;
-  border-radius: 5px;
-  border: 0px;
-  padding: 1px;
-  margin: 2px;
-}
-
-.Toolbar-button:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-.Toolbar-button:active {
-  background: #808080;
-  color: white;
-  cursor: pointer;
-}
-
-.TB-narrow {
-  width: 30px;
-}
-
-.TB-wide {
-  width: 46px;
-}
-
-.TB-selected {
-  background: #d0d0d0;
-  color: black;
-  cursor: pointer;
-  animation: 0.2s TB-fadeIn;
-  animation-fill-mode: forwards;
-}
-
-.TB-selected:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-@keyframes TB-fadeIn {
-  00% {
-    background: white;
-  }
-  100% {
-    background: #d0d0d0;
-  }
-}
-
-/* Tooltip text */
-.Toolbar-button .tooltiptext {
-  font-weight: normal;
-  visibility: hidden;
-  width: 100px;
-  background-color: #222;
-  color: #fff;
-  /*font-weight: bold;*/
-  font-size: 12px;
-  text-align: center;
-  padding: 4px 10px;
-  border-radius: 6px;
-
-  /* Position the tooltip text - see examples below! */
-  position: absolute;
-  z-index: 2;
-  top: -90%; /* Must leave a small gap between tooltip and button */
-  left: 50px;
-
-  /* transform: translate (50%,0%); */
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.Toolbar-button:hover .tooltiptext {
-  animation: 0.8s fadeIn2;
-  animation-fill-mode: forwards;
-  visibility: visible;
-  /* width: 100px; */
-  /* top: -90%; */ /* Must leave a small gap between tooltip and button */
-  /* left: 20%; */
-  /* margin-left: -50px; */
-}
-
-@keyframes fadeIn2 {
-  00% {
-    opacity: 0;
-  }
-  70% {
-    opacity: 0;
-  }
-  100% {
-    visibility: visible;
-    opacity: 0.9;
-  }
-}
-
-/* .tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
-} */
 .EquationEditor {
   height: auto;
   text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/AccentBar.css

@@ -1,28 +1,27 @@
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {
-  position: fixed;
+  position: absolute;
   z-index: 1;
   width: 360px;
   background-color: #fff;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
-  padding: 5px;
+  padding: 8px;
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
 
 .AccentBar-compact {
-  position: fixed;
+  display: flex;
+  position: absolute;
   z-index: 1;
   background-color: white;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
   padding: 5px;
-  top: 0px;
-  left: 0px; /* Important to set this default so that accent bar renders to optimal width */
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }

package/src/AccentBar.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import "./AccentBar.css";
 
 const DEFAULT_TOP = -1;
-const DEFAULT_LEFT = -1;
+const DEFAULT_RIGHT = -1;
 const TOP_MARGIN = 3;
 
 const ACCENTS_FOR_LETTER = {
@@ -566,7 +566,8 @@ export default class AccentBar extends React.Component {
     this.state = {
       selectedTab: GLOBAL_last_selected_tab,
       top: DEFAULT_TOP,
-      left: DEFAULT_LEFT,
+      right: DEFAULT_RIGHT,
+      shouldHorizontiallyAlign: false,
     };
     this.suppliedClickHandler = null;
     this.handleButtonClick = this.handleButtonClick.bind(this);
@@ -586,6 +587,17 @@ export default class AccentBar extends React.Component {
     else this.suppliedClickHandler(e, this.letterForAccents, character);
   };
 
+  isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  };
+
   componentDidMount() {
     // We render once to find out the component's preferred size and then render again to update it
 
@@ -606,28 +618,30 @@ export default class AccentBar extends React.Component {
         return;
       }
 
-      let inputBounds = node.getBoundingClientRect();
-      let thisBounds = thisBar.getBoundingClientRect();
+      const toolBarBounds = thisBar.parentNode.getBoundingClientRect();
+      const inputBounds = node.getBoundingClientRect();
+      const thisBounds = thisBar.getBoundingClientRect();
 
       this.shouldUpdatePosition = false;
 
       // Vertically align below input field
-      let top = inputBounds.bottom + TOP_MARGIN;
+      let top = inputBounds.bottom - toolBarBounds.height;
+      if (this.props.compactMode) top = inputBounds.height;
 
-      // Horizontally align to left or right of input field
-      let left = inputBounds.right - thisBounds.width; // right align
-      if (this.props.compactMode) left = inputBounds.left; // left align
+      // Horizontally align
+      let right = 0; // right align
 
       // Make sure it is on screen horizontally
-      if (thisBounds.width > inputBounds.width)
-        left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
-
-      if (left + thisBounds.width > window.innerWidth)
-        left = window.innerWidth - thisBounds.width - 2;
+      let shouldHorizontiallyAlign = false;
+      if (thisBounds.width > inputBounds.width) {
+        shouldHorizontiallyAlign = true;
 
-      if (left < 0) left = 0;
+        if (this.isInViewport(thisBar)) {
+          right = right - (thisBounds.width - inputBounds.width) / 2;
+        } // else remain right aligned
+      }
 
-      this.setState({ left, top });
+      this.setState({ right, top, shouldHorizontiallyAlign });
     } else {
       this.shouldUpdatePosition = true;
     }
@@ -639,7 +653,6 @@ export default class AccentBar extends React.Component {
   };
 
   componentDidUpdate = (prevProps) => {
-    // console.log("componentDidUpdate")
     let accentKey = this.props.keyPressed;
     if (
       accentKey === "Backspace" ||
@@ -692,8 +705,10 @@ export default class AccentBar extends React.Component {
 
     // Set up the tranlation to place the accent bar where we want it
     let style = { ...this.props.style };
-    if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
-      style.left = this.state.left + "px";
+    if (this.state.right !== DEFAULT_RIGHT || this.state.top !== DEFAULT_TOP) {
+      if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+        style.right = this.state.right + "px";
+      }
       style.top = this.state.top + "px";
     }
 
@@ -708,7 +723,7 @@ export default class AccentBar extends React.Component {
       >
         {/* Compact mode */}
         {compactMode && (
-          <div>
+          <>
             {quickAccents.map((character, index) => {
               return (
                 <button
@@ -722,7 +737,7 @@ export default class AccentBar extends React.Component {
                 </button>
               );
             })}
-          </div>
+          </>
         )}
 
         {/* Normal mode */}

package/src/MathRichInput.css

@@ -7,7 +7,6 @@
 }
 
 .MathRichInput-Container {
-  margin: 10px;
   border-radius: 5px;
 }
 
@@ -18,10 +17,9 @@
 }
 
 .MathRichInput-scrollview {
+  position: relative;
   display: flex;
-  overflow: scroll;
   border-radius: 5px;
-  overflow: overlay;
 }
 
 .MathRichInput p {
@@ -35,6 +33,8 @@
   width: 100%;
   border-radius: 5px;
   background-color: #fff;
+  overflow-x: scroll;
+  overflow: overlay;
 }
 
 .MathRichInput:focus {

package/src/Toolbar.css

@@ -1,7 +1,7 @@
 /* Note that the top left position of the toolbar is set programatically in componentDidMount */
 
 .Toolbar {
-  position: fixed;
+  position: absolute;
   z-index: 1;
   display: flex;
   height: 42px;
@@ -11,8 +11,6 @@
   box-shadow: 1px 1px 5px #a0a0a0;
   animation: 0.5s fadeIn1;
   animation-fill-mode: forwards;
-  top: 0px;
-  left: 0px; /* important to set this so that toolbar initially renders full width */
 }
 
 @keyframes fadeIn1 {

package/src/Toolbar.jsx

@@ -5,9 +5,8 @@ import AccentBar from "./AccentBar";
 
 import "./Toolbar.css";
 
-// const DEFAULT_TRANSLATE = 0
 const DEFAULT_TOP = 0;
-const DEFAULT_LEFT = 0;
+const DEFAULT_RIGHT = 0;
 const BOTTOM_MARGIN = 5;
 
 const CTRL_OR_META = /(Mac)/i.test(window.navigator.platform)
@@ -21,7 +20,8 @@ export default class Toolbar extends React.Component {
     this.state = {
       showAccents: false,
       top: DEFAULT_TOP,
-      left: DEFAULT_LEFT,
+      right: DEFAULT_RIGHT,
+      shouldHorizontiallyAlign: false,
     };
 
     this.handleButtonClick = this.handleButtonClick.bind(this);
@@ -66,6 +66,17 @@ export default class Toolbar extends React.Component {
     // this.hideAccentBar(null)
   };
 
+  isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  };
+
   componentDidMount() {
     // We render once to find out the component's preferred size and then render again to update it
     if (this.shouldUpdatePosition) {
@@ -91,21 +102,21 @@ export default class Toolbar extends React.Component {
       this.shouldUpdatePosition = false;
 
       // Vertically align above input field
-      let top = inputBounds.top - thisBounds.height - BOTTOM_MARGIN;
+      let top = (thisBounds.height + BOTTOM_MARGIN) * -1;
 
-      // Horizontally align to right of input field
-      let left = inputBounds.right - thisBounds.width;
+      // Horizontally align
+      let right = 0; // right align
 
-      // Make sure it is on screen horizontally
-      if (thisBounds.width > inputBounds.width)
-        left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
+      let shouldHorizontiallyAlign = false;
+      if (thisBounds.width > inputBounds.width) {
+        shouldHorizontiallyAlign = true;
 
-      if (left + thisBounds.width > window.innerWidth)
-        left = window.innerWidth - thisBounds.width - 2;
-
-      if (left < 0) left = 0;
+        if (this.isInViewport(thisBar)) {
+          right = right - (thisBounds.width - inputBounds.width) / 2;
+        } // else remain right aligned
+      }
 
-      this.setState({ left, top });
+      this.setState({ right, top, shouldHorizontiallyAlign });
     } else {
       this.shouldUpdatePosition = true;
     }
@@ -133,8 +144,10 @@ export default class Toolbar extends React.Component {
     // if (this.state.translateX !== DEFAULT_TRANSLATE) {
     //   style.transform = "translate("+this.state.translateX+"px, "+this.state.translateY+"px)";
     // }
-    if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
-      style.left = this.state.left + "px";
+    if (this.state.right !== DEFAULT_RIGHT || this.state.top !== DEFAULT_TOP) {
+      if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+        style.right = this.state.right + "px";
+      }
       style.top = this.state.top + "px";
     }