Select better threshold for mobile detection

projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss

@@ -7,6 +7,7 @@
   opacity: 1;
   border-radius:1.75em;
   padding:0;
+  margin-top:0.5em;
 }
 
 #north {
@@ -50,8 +51,6 @@ div.compass:hover #north {
   fill:$white;
 }
 
-
-
 .compass-n {    
   transition: opacity 1s ease-out 2s,height 1s ease-out 3s,margin-top 1s ease-out 3s;
   opacity:0;

projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts

@@ -22,7 +22,7 @@ export class ZoomToExtentComponent implements OnChanges {
       var options = { padding: [0, 0, 0, 0],minResolution:1 };
       let size = this.map.instance.getSize();
       let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-      let threshold = 44 * rem;
+      let threshold = 40 * rem;
       var left = 1 * rem;
       var right = 1 * rem;
       var bottom = Math.round(size[1] / 2);

projects/common/src/fm/components/side-panel/side-panel.component.scss

@@ -83,7 +83,7 @@ div.resizegrip > span {
   top:-1rem;
 }
 
-@media screen and (min-width:44rem) {
+@media screen and (min-width:40rem) {
   .side-panel {
     top:0px;
     width: 22rem;
@@ -108,11 +108,11 @@ div.resizegrip > span {
 
 .side-panel.left.hidden {
   width: 80%;
-  left:-24rem;
+  left:-80%;
   height:100%;
 }  
 
-@media screen and (min-width:44rem) {
+@media screen and (min-width:40rem) {
   .side-panel.left {
     width:22rem;
   }

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -28,7 +28,7 @@ export class SidePanelComponent  implements OnChanges {
   checkMobile():boolean {
     let size = parseFloat(getComputedStyle(document.documentElement).width);
     let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    let threshold = 44 * rem;
+    let threshold = 40 * rem;
     return !(size>threshold);
   }