[bug] fix dropdown being cut off the bottom of page

Author: zombieFox

src/css/form.css

@@ -1383,8 +1383,6 @@ input[type="range"]:disabled::-moz-range-progress{
 border-radius:var(--theme-radius);
 padding:0.5em0;
 position: absolute;
-top:calc(100%+calc(var(--layout-line-width) *2));
-left:0;
 width:100%;
 min-width:12em;
 box-shadow:var(--layout-shadow-large);
@@ -1393,6 +1391,22 @@ input[type="range"]:disabled::-moz-range-progress{
 display: none;
 }
 
+.form-dropdown-menu-left{
+right:0;
+}
+
+.form-dropdown-menu-right{
+left:0;
+}
+
+.form-dropdown-menu-top{
+bottom:calc(100%+calc(var(--layout-line-width) *2));
+}
+
+.form-dropdown-menu-bottom{
+top:calc(100%+calc(var(--layout-line-width) *2));
+}
+
 .form-dropdown-open .form-dropdown-menu{
 display: flex;
 flex-direction: column;

src/js/dropdown.js

@@ -78,39 +78,47 @@ var dropdown = (function(){
 
 render.offset=function(){
 varformDropdownMenu=_currentFormDropdown.querySelector(".form-dropdown-menu");
-varbox=formDropdownMenu.getBoundingClientRect();
-if(box.left+box.width>window.innerWidth){
-formDropdownMenu.style.right="0";
-formDropdownMenu.style.left="inherit";
+if(state.get().dropdown){
+varbox=formDropdownMenu.getBoundingClientRect();
+if(box.right>window.innerWidth){
+helper.addClass(formDropdownMenu,"form-dropdown-menu-left");
+}else{
+helper.addClass(formDropdownMenu,"form-dropdown-menu-right");
+};
+if(box.bottom>window.innerHeight){
+helper.addClass(formDropdownMenu,"form-dropdown-menu-top");
+}else{
+helper.addClass(formDropdownMenu,"form-dropdown-menu-bottom");
+};
 }else{
-formDropdownMenu.removeAttribute("style");
+helper.removeClass(formDropdownMenu,"form-dropdown-menu-left");
+helper.removeClass(formDropdownMenu,"form-dropdown-menu-right");
+helper.removeClass(formDropdownMenu,"form-dropdown-menu-top");
+helper.removeClass(formDropdownMenu,"form-dropdown-menu-bottom");
 };
 };
 
 render.toggle=function(){
-if(_currentFormDropdown.classList.contains("form-dropdown-open")){
-mod.close();
-helper.removeClass(_currentFormDropdown,"form-dropdown-open");
-documentEvent.remove();
-render.offset();
-_currentFormDropdown=null;
+if(state.get().dropdown){
+render.open();
 }else{
-mod.open();
-_currentFormDropdown=_currentFormDropdown;
-helper.addClass(_currentFormDropdown,"form-dropdown-open");
-documentEvent.add(_currentFormDropdown);
-render.offset();
+render.close();
 };
 };
 
 render.close=function(){
-mod.close();
 helper.removeClass(_currentFormDropdown,"form-dropdown-open");
-documentEvent.remove();
 render.offset();
+documentEvent.remove();
 _currentFormDropdown=null;
 };
 
+render.open=function(){
+helper.addClass(_currentFormDropdown,"form-dropdown-open");
+render.offset();
+documentEvent.add();
+};
+
 varclose=function(){
 mod.close();
 render.close();