Improve profile snippet on smaller sizes

Author: hojberg

src/css/ui/components/avatar.css

@@ -9,6 +9,7 @@
   height: var(--avatar_size);
   border-radius: calc(var(--avatar_size) / 2);
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   background-color: transparent; /* Don't use a color when we don't yet know if there's an image loading */

src/css/ui/components/profile-snippet.css

@@ -27,6 +27,9 @@
   align-items: center;
   gap: 0.5rem;
   transition: background 0.2s;
+
+  container-type: inline-size;
+  container-name: profile-snippet;
 }
 
 .profile-snippet .profile-snippet_text {
@@ -78,3 +81,15 @@
   overflow: hidden;
   white-space: nowrap;
 }
+
+@container profile-snippet (max-width: 300px) {
+  .profile-snippet_text {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0rem;
+
+    & .profile-snippet_handle {
+      --c-size_profile-snippet_handle: var(--font-size-extra-small);
+    }
+  }
+}