[frontend/components] Improve visibility of usernames on mobile and in notifications

Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css

@@ -7,7 +7,7 @@
     margin-left: auto;
     min-width: 0;
     overflow: clip;
-    flex-basis: 50%;
+    flex-basis: 30%;
     flex-shrink: 2;
 
     .info {
@@ -34,3 +34,13 @@
         overflow: clip;
     }
 }
+
+@media (max-width: 1000px) {
+    .metadata {
+        flex-basis: 25%;
+        
+        .instance {
+            display: none;
+        }
+    }
+}

Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css

@@ -14,7 +14,7 @@
 }
 
 .display-name {
-    white-space: wrap;
+    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: clip;
 }

Iceshrimp.Frontend/Components/NotificationComponent.razor.css

@@ -56,6 +56,16 @@
     margin-top: 1rem;
 }
 
+::deep .notification-note {
+    .metadata {
+        flex-basis: 20%;
+    }
+    
+    .instance {
+        display: none;
+    }
+}
+
 ::deep .notification-header .avatar {
     margin-right: 0.75em;
 }