(Really) fix firefox address bar height problem on mobiles

web/src/app/app.php

@@ -19,8 +19,8 @@ $actor = $database->getActorByUsername($user->username);
 <?php
 $width = '40em';
 ?>
-<div id="page-meet" class="flex overlay"
-	style="display:none">
+<div id="page-meet" style="display:none"
+	class="flex overlay height-mobile">
 	<div class="center size-max"
 		style="max-width: <?php echo $width ?>">
 		<div id="content" class="size-max"></div>

web/src/app/js/base.js

@@ -246,3 +246,10 @@ const http = {
 	},
 };
 
+function calcHeightMobile() {
+	document.querySelectorAll('.height-mobile').forEach(function(node) {
+		node.style.height = `${window.innerHeight}px`;
+	});
+}
+window.addEventListener('load', function(e) { calcHeightMobile() });
+window.addEventListener('resize', function(e) { calcHeightMobile() });

web/src/app/js/pages/meet.js

@@ -188,6 +188,7 @@ app.pages.meet = {
 			if (current !== null)
 				app.storage.set('status_meet_index', current._id);
 			app.pages.meet.carousel.setDragEvent(direction);
+			calcHeightMobile();
 		},
 		set: function(i) { return app.carousel.set(app.pages.meet.carousel, i) },
 		next: function() {

web/src/app/js/templates/meet/item.html

@@ -4,14 +4,14 @@
 		<div style="height: 100vh;width: 3em;background: black;position: relative;left: -3em;"></div>
 		<div style="height: 100vh;width: 3em;background: black;float: right;position: relative;left: 3em;"></div>
 	</div>
-	<div class="absolute-top size-max content" style="overflow: auto">
+	<div class="absolute-top size-max content height-mobile">
 		<div style="height: 60%" class="status-avatar flex">
 			<a class="center" href="javascript:app.media.view('{.account.avatar.url}')"/>
 				<img class="width-max" src="{.account.avatar.url}"/>
 			</a>
 		</div>
 		<div style="height: 40%">
-		<div class="status fixed-bottom width-max"
+		<div class="status absolute-bottom width-max"
 			style="margin-bottom: {actionsHeight}; max-width: 40em">
 			<div class="flex width-max">
 				<div class="absolute width-max">