fix: Fix mobile thumbnail being too small (#1814)

[lemmy-ui.git] / src / assets / css / main.css

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b917b3ec73317c4c86d4b57ab0288646f3c3da44..36566b9b969846d9e1f5405777aec87b0c10e5d3 100644 (file)
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -81,6 +81,7 @@
 }
 
 .vote-bar {
+  min-width: 5ch;
   margin-top: -6.5px;
 }
 
@@ -198,9 +199,14 @@ blockquote {
 
 .thumbnail {
   object-fit: cover;
-  min-height: 60px;
-  max-height: 80px;
+  aspect-ratio: 1/1;
+  width: 5rem;
+  height: 5rem;
+}
+
+.mobile-thumbnail-container .thumbnail {
   width: 100%;
+  height: auto;
 }
 
 .thumbnail svg {
@@ -253,10 +259,6 @@ hr {
   -ms-filter: blur(10px);
 }
 
-.img-cover {
-  object-fit: cover;
-}
-
 .img-expanded {
   max-height: 90vh;
 }
@@ -349,10 +351,12 @@ br.big {
 }
 
 .avatar-overlay {
-  width: 20%;
-  height: 20%;
+  width: 20vw;
+  height: 20vw;
   max-width: 120px;
   max-height: 120px;
+  min-width: 80px;
+  min-height: 80px;
 }
 
 .avatar-pushup {
@@ -360,8 +364,9 @@ br.big {
 }
 
 .img-icon {
-  width: 2rem;
-  height: 2rem;
+  width: calc(var(--bs-body-line-height) * 1em);
+  height: calc(var(--bs-body-line-height) * 1em);
+  border-radius: 0.25em;
 }
 
 .tribute-container ul {