Some minor UI improvements

shared/js/ui/frames/ImagePreview.scss

@@ -71,11 +71,11 @@
 .containerImage {
     max-width: 90%;
     max-height: 90%;
-    align-self: center;
 
-    display: flex;
+    align-self: center;
-    flex-direction: column;
+    text-align: center;
-    justify-content: stretch;
+
+    display: block;
 
     img {
         flex-shrink: 1;

shared/js/ui/modal/avatar-upload/Renderer.scss

@@ -96,6 +96,8 @@
             max-height: 100%;
             max-width: 100%;
 
+            /* We currently strech all avatars */
+            /*
             &.heightBound {
                 height: 100%;
             }
@@ -103,6 +105,10 @@
             &.widthBound {
                 width: 100%;
             }
+            */
+
+            width: 100%;
+            height: 100%;
         }
 
         &.sizeChatInfo {

shared/js/ui/modal/avatar-upload/Renderer.tsx

@@ -71,13 +71,13 @@ const MaxAvatarSize = React.memo(() => {
     const currentAvatar = useContext(CurrentAvatarContext);
     const maxSize = variables.useReadOnly("maxAvatarSize", undefined);
 
-    if(currentAvatar.status === "loading" || maxSize.status === "loading") {
+    if(maxSize.status === "loading") {
         return (
             <div className={cssStyle.containerLimit} key={"loading"}>
                 <Translatable>Maximal avatar size:</Translatable> <Translatable>loading</Translatable> <LoadingDots />
             </div>
         )
-    } else if(currentAvatar.status === "unset" || currentAvatar.status === "server") {
+    } else if(currentAvatar.status === "loading" ||currentAvatar.status === "unset" || currentAvatar.status === "server") {
         return (
             <div className={cssStyle.containerLimit} key={"unset"}>
                 <VariadicTranslatable text={"Maximal avatar size: {}"}>

shared/js/ui/react-elements/Avatar.tsx

@@ -20,6 +20,7 @@ const AvatarDefaultImage = React.memo((props: { className?: string, alt?: string
     <img
         draggable={false}
         src={kDefaultAvatarImage}
+        style={ImageStyle}
         alt={typeof props.alt === "string" ? props.alt : tr("default avatar")}
         color={props.className}
         onClick={event => {
@@ -28,7 +29,7 @@ const AvatarDefaultImage = React.memo((props: { className?: string, alt?: string
             }
 
             event.preventDefault();
-            showImagePreview(kDefaultAvatarImage, undefined);
+            showImagePreview(kDefaultAvatarImage, kDefaultAvatarImage);
         }}
     />
 ));