Add min height to pictures to avoid layout from jumping around

app/public/js/shared.js

@@ -0,0 +1,33 @@
+/**
+ * Fix image heights
+ */
+
+let imagesFixed = false;
+const fixImageHeights = () => {
+  if (imagesFixed) return;
+  imagesFixed = true;
+
+  const css = `
+    .profile-pic {
+      min-height: 0;
+    }
+    .post-profile-pic {
+      min-height: 0;
+    }
+    .link-profile-pic {
+      min-height: 0;
+    }
+  `;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+
+  head.appendChild(style);
+  style.appendChild(document.createTextNode(css));
+};
+
+document.addEventListener("readystatechange", (event) => {
+  if (event.target.readyState === "complete") {
+    fixImageHeights();
+  }
+});
+setTimeout(fixImageHeights, 2000);

app/public/shared.css

@@ -140,6 +140,7 @@ h2 {
   width: 48px;
   max-height: 200px;
   border: 1px solid #044;
+  min-height: 48px;
 }
 
 .post-content {
@@ -170,6 +171,7 @@ h2 {
 .profile-pic {
   width: 128px;
   border: 1px solid #044;
+  min-height: 128px;
 }
 
 .profile-actions form {
@@ -262,6 +264,7 @@ h2 {
   width: 32px;
   max-height: 100px;
   margin-right: 5px;
+  min-height: 32px;
 }
 
 .secret-button {

app/views/_footer.ejs

@@ -1,4 +1,5 @@
     </main>
+    <script src="/js/shared.js"></script>
     <script src="/js/desktop.js"></script>
   </body>
 </html>

app/views/mobile/_layout.ejs

@@ -50,6 +50,7 @@
 
     <%- body %>
 
+    <script src="/js/shared.js"></script>
     <script src="/js/mobile.js"></script>
   </body>
 </html>