Apply content-box box-sizing to avatars images; add object-fit: cover to post thumbnail image on comment pages

resources/assets/sass/custom.scss

@@ -319,7 +319,7 @@ details summary::-webkit-details-marker {
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
   border-radius: 5px;
   padding: .5em 1em .5em .5em;
-} 
+}
 
 .input-elevated::placeholder {
   color: #838D99;
@@ -417,7 +417,7 @@ details summary::-webkit-details-marker {
     background: rgba(0,0,0,0.04);
 }
 
-.timeline-sidenav.nav-pills .nav-link.active, 
+.timeline-sidenav.nav-pills .nav-link.active,
 .timeline-sidenav.nav-pills .show > .nav-link {
     color: #08d;
     background: transparent;
@@ -434,4 +434,14 @@ details summary::-webkit-details-marker {
 
 .notification-tooltip .arrow::before {
   border-bottom-color:#dc3545 !important;
-}
+}
+
+.img-thumbnail {
+    box-sizing: content-box;
+}
+
+.reply-container {
+    .post-thumbnail {
+        object-fit: cover;
+    }
+}

resources/views/status/reply.blade.php

@@ -2,12 +2,12 @@
 
 @section('content')
 
-<div class="container">
+<div class="container reply-container">
   <div class="col-12 col-md-8 offset-md-2 mt-4">
       <div class="card">
         <div class="card-body p-0 m-0 bg-light">
           <div class="d-flex p-0 m-0 align-items-center">
-            <img src="{{$status->parent()->thumb()}}" width="150px" height="150px">
+            <img src="{{$status->parent()->thumb()}}" width="150px" height="150px" class="post-thumbnail">
             <div class="p-4">
               <div>
                 <img src="{{$status->parent()->profile->avatarUrl()}}" class="rounded-circle img-thumbnail mb-1 mr-1" width="30px">
@@ -54,6 +54,6 @@
     $('.reactions').hide();
     $('.more-comments').hide();
     $('.card-footer').hide();
-  }); 
+  });
 </script>
-@endpush
+@endpush