Mobile view: iOS sizing/styling changes (#1756)

* Fix dark themed action-button text color on mobile safari

* Fix note view scrolling on ios safari

* Fix scroll issues on tree view on ios safari

* Fix mobile firefox/chrome sizing issues

* Fix scroll-to-active-note

src/public/app/layouts/mobile_layout.js

@@ -24,11 +24,19 @@ kbd {
     font-size: 1.5em;
     padding-left: 0.5em;
     padding-right: 0.5em;
+    color: var(--main-text-color);
 }
 </style>`;
 
 const FANCYTREE_CSS = `
 <style>
+.tree-wrapper {
+    max-height: 100%;
+    margin-top: 55px;
+    overflow-y: auto;
+    contain: content;
+}
+
 .fancytree-custom-icon {
     font-size: 2em;
 }
@@ -62,6 +70,14 @@ span.fancytree-expander {
     border-width: 2px;
     border-style: solid;
 }
+
+.tree-wrapper .collapse-tree-button, 
+.tree-wrapper .scroll-to-active-note-button, 
+.tree-wrapper .tree-settings-button {    
+    position: fixed;
+    margin-right: 16px;
+    display: none;
+}
 </style>`;
 
 export default class MobileLayout {
@@ -72,17 +88,27 @@ export default class MobileLayout {
             .css('height', '100vh')
             .child(new ScreenContainer("tree", 'column')
                 .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
+                .css("max-height", "100%")
+                .css('padding-left', 0)
+                .css('contain', 'content')
                 .child(new MobileGlobalButtonsWidget())
-                .child(new NoteTreeWidget("main").cssBlock(FANCYTREE_CSS)))
+                .child(new NoteTreeWidget("main")
+                    .cssBlock(FANCYTREE_CSS)))
             .child(new ScreenContainer("detail", "column")
                 .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
+                .css('max-height', '100%')
                 .child(new FlexContainer('row').overflowing()
                     .css('font-size', 'larger')
                     .css('align-items', 'center')
+                    .css('position', 'fixed')
+                    .css('top', 0)
                     .child(new MobileDetailMenuWidget())
                     .child(new NoteTitleWidget())
                     .child(new CloseDetailButtonWidget()))
                 .child(new NoteDetailWidget()
-                    .css('padding', '5px 20px 10px 0')));
+                    .css('padding', '5px 20px 10px 0')
+                    .css('margin-top', '55px')
+                    .css('overflow-y', 'auto')
+                    .css('contain', 'content')));
     }
 }

src/public/app/widgets/mobile_widgets/mobile_global_buttons.js

@@ -7,9 +7,11 @@ const WIDGET_TPL = `
         display: flex;
         flex-shrink: 0;
         justify-content: space-around;
-        padding: 3px 0 3px 0;
-        margin: 0 10px 0 16px;
+        padding: 0px 0 3px 0;
         font-size: larger;
+        position: absolute;
+        top: 8px;
+        width: 100%;
     }
     </style>