add: show avatar image requirements in ui

crates/app/src/public/css/style.css

@@ -167,7 +167,7 @@ p {
 
 @media screen and (min-width: 901px) {
     .name.shorter {
-        max-width: 215px;
+        max-width: 200px;
     }
 
     .name.lg\:long {

crates/app/src/public/html/communities/settings.html

@@ -556,7 +556,7 @@
                 ],
                 [
                     ["description", "Description"],
-                    "{{ community.context.description }}",
+                    settings.description,
                     "textarea",
                 ],
                 [

crates/app/src/public/html/profile/settings.html

@@ -238,6 +238,7 @@
                     enctype="multipart/form-data"
                     onsubmit="upload_avatar(event)"
                 >
+                    <div class="flex gap-2 flex-row flex-wrap items-center">
                         <input
                             id="avatar_file"
                             name="file"
@@ -247,6 +248,13 @@
                         />
 
                         <button class="primary">{{ icon "check" }}</button>
+                    </div>
+
+                    <span class="fade"
+                        >Images must be less than 8 MB large. Animated images
+                        such as GIFs or APNGs will not work to do all images
+                        being formatted as AVIF.</span
+                    >
                 </form>
             </div>
 
@@ -655,7 +663,7 @@
                     ],
                     [
                         ["biography", "Biography"],
-                        "{{ profile.settings.biography }}",
+                        settings.biography,
                         "textarea",
                     ],
                 ],