tweak design

routes/_components/AccountProfile.html

@@ -8,6 +8,9 @@
       <div class="account-profile-name">
         {{profile.display_name}}
       </div>
+      <div class="account-profile-username">
+        {{'@' + profile.acct}}
+      </div>
       <div class="account-profile-followed-by">
         {{#if relationship && relationship.followed_by}}
         <span>
@@ -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;
+    }
+  }
 </style>
 <script>
   import IconButton from './IconButton.html'

routes/_components/DynamicPageBanner.html

@@ -31,6 +31,17 @@
     content: '<';
     margin-right: 5px;
   }
+  @media (max-width: 767px) {
+    .dynamic-page-banner {
+      margin: 15px 15px 15px;
+    }
+    h1.dynamic-page-title {
+      font-size: 1.2em;
+    }
+    button.dynamic-page-go-back {
+      font-size: 1.2em;
+    }
+  }
 </style>
 <script>
   export default {

routes/statuses/[statusId].html

@@ -10,7 +10,7 @@
         dynamicLabel="Status"
         dynamicIcon="#fa-comments" >
   {{#if $isUserLoggedIn}}
-  <DynamicPageBanner title="Status"/>
+  <DynamicPageBanner title=""/>
   <LazyTimeline timeline='status/{{params.statusId}}' />
   {{else}}
   <HiddenFromSSR>