Set default size for profile images to prevent layout shift

diff --git a/templates/index.html b/templates/index.html
index 987f9223050befb3e68d18fe126f117f574f6419..5b4df3afdaa8ed3b43e03a657f275c9520a50b24 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,7 +24,7 @@ better, I'm open to any thoughts or feedback you have!  Just send me
     <div class="user-list-entry-container">
         <a href="/users/{{ user['username'] }}" class="user-list-entry" style="--yellow:{{ user['bgcolor'] }};--black:{{ user['fgcolor'] }};--purple:{{ user['accolor'] }};">
             {% if user['has_pfp'] -%}
-            <img class="small-pfp" src="/pfp/{{ user['userid'] }}" />
+            <img class="small-pfp" src="/pfp/{{ user['userid'] }}" width="32" height="32" />
             {%- endif %}
             <span>{{ user['username'] }}</span>
         </a>

diff --git a/templates/song-list.html b/templates/song-list.html
index 0b5ac2eaed5608a696a2cae255e61d2b443a8188..775125c60102b189f233c2f40a7702f7c0723335 100644 (file)
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -7,7 +7,7 @@
             <div class="song-list-pfp-container">
                 {%- if song.user_has_pfp %}
                 <!-- Profile Picture -->
-                <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" />
+                <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" width="32" height="32" />
                 {%- endif %}
             </div>