Fix service area map legend being too small on iPhone SE

www/assets/css/customstyles.css

@@ -51,6 +51,25 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     margin: 0;
 }
 
+/*
+
+    Service Area page
+
+*/
+
+.md, .aurora {
+    --service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));
+}
+
+.ios {
+    --service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + calc(var(--f7-toolbar-height) * 2)));
+}
+
+#mapbox-servicearea {
+    width: 100%;
+    height: var(--service-area-map-height);
+}
+
 
 /*
 

www/pages/servicearea.html

@@ -17,16 +17,20 @@
         </div>
     </div>
 
-    <div class="toolbar toolbar-top">
+    <div class="page-content noselect">
+        <div class="toolbar">
             <div class="toolbar-inner justify-content-start">
                 <span class="margin-horizontal-half">Legend:</span>
                 <span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,135,51,0.7)/*#008733*/;">Notary</span>
                 <span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,83,135,0.7)/*#005387*/;">Courier</span>
+                <a class="margin-horizontal-half link if-not-ios" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
+            </div>
+        </div>
+        <div class="toolbar if-ios">
+            <div class="toolbar-inner justify-content-start">
                 <a class="margin-horizontal-half link" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
             </div>
         </div>
-
+        <div id="mapbox-servicearea"></div>
-    <div class="page-content noselect">
-        <div id="mapbox-servicearea" style="width: 100%; height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));"></div>
     </div>
 </div>