diff --git a/routes/_components/AccountProfile.html b/routes/_components/AccountProfile.html
index c4a0cf35..d6939054 100644
--- a/routes/_components/AccountProfile.html
+++ b/routes/_components/AccountProfile.html
@@ -8,6 +8,9 @@
{{profile.display_name}}
+
+ {{'@' + profile.acct}}
+
{{#if relationship && relationship.followed_by}}
@@ -55,10 +58,11 @@
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name followed-by follow"
- "avatar note note note";
+ "avatar username username follow"
+ "avatar note note follow";
grid-template-columns: min-content auto 1fr min-content;
grid-column-gap: 10px;
- grid-row-gap: 2px;
+ grid-row-gap: 5px;
padding: 10px;
justify-content: center;
z-index: 10;
@@ -79,10 +83,6 @@
}
}
- .account-profile-grid {
- z-index: 10;
- }
-
.account-profile-followed-by {
grid-area: followed-by;
align-self: center;
@@ -105,9 +105,18 @@
height: 100px;
}
+ .account-profile-username {
+ grid-area: username;
+ color: var(--deemphasized-text-color);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ align-self: center;
+ }
+
.account-profile-follow {
grid-area: follow;
- align-self: center;
+ align-self: flex-start;
}
.account-profile-name {
grid-area: name;
@@ -120,10 +129,39 @@
}
.account-profile-note {
grid-area: note;
+ padding: 10px 0;
}
:global(.account-profile-note p) {
font-size: 1em;
}
+
+ @media (max-width: 767px) {
+ .account-profile-avatar img {
+ width: 80px;
+ height: 80px;
+ }
+ .account-profile-name {
+ font-size: 1.2em;
+ }
+ .account-profile-grid {
+ display: grid;
+ grid-template-areas: "avatar name follow"
+ "avatar username follow"
+ "avatar followed-by follow"
+ "note note note";
+ grid-template-columns: min-content minmax(auto, 1fr) min-content;
+ grid-template-rows: min-content min-content 1fr min-content;
+ }
+ .account-profile-note {
+ padding: 5px 5px;
+ }
+ .account-profile-username {
+ font-size: 0.9em;
+ }
+ .account-profile-name, .account-profile-username {
+ align-self: flex-start;
+ }
+ }