From b08f7b0ed300f3d606d3cc49969ba96e36c0f701 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Wed, 5 Mar 2025 11:26:31 +1000
Subject: [PATCH] [frontend/components] Improve visibility of usernames on
 mobile and in notifications

---
 .../Components/Note/NoteMetadata.razor.css           | 12 +++++++++++-
 .../Components/Note/NoteUserInfo.razor.css           |  2 +-
 .../Components/NotificationComponent.razor.css       | 10 ++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css b/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css
index 1213f322..6f484752 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css
+++ b/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 {
@@ -33,4 +33,14 @@
         text-overflow: ellipsis;
         overflow: clip;
     }
+}
+
+@media (max-width: 1000px) {
+    .metadata {
+        flex-basis: 25%;
+        
+        .instance {
+            display: none;
+        }
+    }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css b/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css
index d74ea259..a0320b13 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css
@@ -14,7 +14,7 @@
 }
 
 .display-name {
-    white-space: wrap;
+    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: clip;
 }
diff --git a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css b/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
index 51e4217a..849e4f39 100644
--- a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
+++ b/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;
 }