Fix avatar ration

Author: aLLeXUs

frontend/src/components/common/TweetPreview.vue

@@ -7,7 +7,7 @@
                     class="image is-64x64 is-square"
                     :to="{ name: 'user-page', params: { id: tweet.author.id } }"
                 >
-                    <img class="is-rounded" :src="tweet.author.avatar" alt="Author avatar">
+                    <img class="is-rounded fit" :src="tweet.author.avatar" alt="Author avatar">
                 </router-link>
 
                 <router-link v-else :to="{ name: 'user-page', params: { id: tweet.author.id } }">

frontend/src/components/view/profile/EditProfileForm.vue

@@ -154,11 +154,4 @@ export default {
         }
     }
 }
-
-.fit {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: 50% 50%;
-}
 </style>

frontend/src/components/view/tweet/Comment.vue

@@ -6,7 +6,7 @@
                 class="image is-48x48 is-square"
                 :to="{ name: 'user-page', params: { id: comment.author.id } }"
             >
-                <img class="is-rounded" :src="comment.author.avatar">
+                <img class="is-rounded fit" :src="comment.author.avatar">
             </router-link>
 
             <router-link v-else :to="{ name: 'user-page', params: { id: comment.author.id } }">

frontend/src/components/view/tweet/NewCommentForm.vue

@@ -2,7 +2,7 @@
     <article class="media">
         <figure class="media-left">
             <p class="image is-48x48 is-square" v-if="user.avatar">
-                <img class="is-rounded" :src="user.avatar">
+                <img class="is-rounded fit" :src="user.avatar">
             </p>
             <DefaultAvatar v-else class="image is-48x48" :user="user" />
         </figure>

frontend/src/components/view/tweet/TweetContainer.vue

@@ -8,7 +8,7 @@
                     :to="{ name: 'user-page', params: { id: tweet.author.id } }"
                 >
                     <img
-                        class="is-rounded"
+                        class="is-rounded fit"
                         :src="tweet.author.avatar"
                         alt="Author avatar"
                     >

frontend/src/styles/common.scss

@@ -49,3 +49,10 @@ html, body {
 .auto-cursor {
     cursor: auto;
 }
+
+.image img.fit {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+}