Mobile: Some extra height in mobile browsers (#1827)

src/cryptoadvance/specter/static/helpers.js

@@ -61,6 +61,9 @@ document.addEventListener("updateAddressLabel", function (e) {
 		});
 	}
 });
+
+document.documentElement.style.setProperty('--mobileDistanceElementBottomHeight', `${Math.max(0, window.outerHeight - window.innerHeight)}px`);
+
 function showError(msg, timeout=0) {
 	return showNotification(msg, timeout, "error");
 }

src/cryptoadvance/specter/static/styles.css

@@ -1019,6 +1019,18 @@ nav.collapse-on-mobile a.mobile-nav-icon {
     display: none;
 }
 
+
+/* The viewable height is often smaller than the height given by the browser. 
+See: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+This style is used for a div at the bottom in the <main> element to create a distance at the bottom of the pages
+*/
+.mobile-distance-element-bottom {
+    height: 0px;
+    flex-shrink: 0;
+    width: 100%;
+  }
+
+
 @media (max-width: 1100px){
   #side-content{
     position: absolute;
@@ -1192,6 +1204,9 @@ nav.collapse-on-mobile a.mobile-nav-icon {
     .main-page-container{
         background-image: none;
       }
+    .mobile-distance-element-bottom {
+        height: var(--mobileDistanceElementBottomHeight, 60px);
+    }
 }
 
 /************** Switch checkbox styles ********************************/
@@ -1249,6 +1264,8 @@ input:checked + .slider:before {
     -ms-transform: translateX(26px);
     transform: translateX(26px);
 }
+
+/************** Styles for recipient-box ********************************/
 .recipient_wrapper{
     width: 100%;
     border-radius: 3px;

src/cryptoadvance/specter/templates/base.jinja

@@ -265,6 +265,7 @@
 					</div>
 				{% endif %}
 			{% endblock %}
+	    <div id="mobile-distance-element-bottom" class="mobile-distance-element-bottom"></div>	
 		</main>
 	</div>
 

src/cryptoadvance/specter/templates/device/device.jinja

@@ -138,33 +138,34 @@
 		</div>
 	{% endif %}
 	<div class="hidden" id="new_device_popup">
-	<h1>{{ _("New device was added successfully!") }}</h1>
-	<div class="row overflow">
-		<a href="{{ url_for('devices_endpoint.new_device_type') }}" style="text-decoration: none;">
-			<div class="small-card radio">
-				<img src="{{ url_for('static', filename='img/plus.svg') }}" class="svg-white" style="transform: scale(1.5);">
-				{{ _("Add another device") }}
-			</div>
-		</a>
-		<form action="{{ url_for('wallets_endpoint.new_wallet', wallet_type='simple') }}" method="POST">
-			<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
-			<input type="hidden" name="device" value="{{ device.alias }}" />
-			<input type="hidden" name="action" value="preselected_device" />
-			<button type="submit" style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
-				<div class="small-card radio">
-					<img src="{{ url_for('static', filename='img/key.svg') }}" class="svg-white" style="width: 120px;">
-					{{ _("Create single key wallet") }}
-				</div>
-			</button>
-		</form>
-		{% if specter.device_manager.devices | length > 1 %}
-			<a href="{{ url_for('wallets_endpoint.new_wallet', wallet_type='multisig') }}" style="text-decoration: none;">
+		<h1>{{ _("New device was added successfully!") }}</h1>
+		<div class="row overflow">
+			<a href="{{ url_for('devices_endpoint.new_device_type') }}" style="text-decoration: none;">
 				<div class="small-card radio">
-					<img src="{{ url_for('static', filename='img/two-keys.svg') }}" class="svg-white" style="width: 120px;">
-					{{ _("Create multisignature wallet") }}
+					<img src="{{ url_for('static', filename='img/plus.svg') }}" class="svg-white" style="transform: scale(1.5);">
+					{{ _("Add another device") }}
 				</div>
 			</a>
-		{% endif %}
+			<form action="{{ url_for('wallets_endpoint.new_wallet', wallet_type='simple') }}" method="POST">
+				<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
+				<input type="hidden" name="device" value="{{ device.alias }}" />
+				<input type="hidden" name="action" value="preselected_device" />
+				<button type="submit" style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+					<div class="small-card radio">
+						<img src="{{ url_for('static', filename='img/key.svg') }}" class="svg-white" style="width: 120px;">
+						{{ _("Create single key wallet") }}
+					</div>
+				</button>
+			</form>
+			{% if specter.device_manager.devices | length > 1 %}
+				<a href="{{ url_for('wallets_endpoint.new_wallet', wallet_type='multisig') }}" style="text-decoration: none;">
+					<div class="small-card radio">
+						<img src="{{ url_for('static', filename='img/two-keys.svg') }}" class="svg-white" style="width: 120px;">
+						{{ _("Create multisignature wallet") }}
+					</div>
+				</a>
+			{% endif %}
+		</div>
 	</div>
 {% endblock %}