feat: better design

src/views/PublicNoteListByDidView.vue

@@ -16,8 +16,10 @@ const author = computedAsync(async () => getUniqueAka(did.value))
 
 <template>
   <main class="public-note-list-view">
-    <h1>{{ author?.alias ?? did }}</h1>
-    <back-button class="back-button" :fallback="{ name: 'Home' }" />
+    <div class="header">
+      <back-button class="back-button" :fallback="{ name: 'Home' }" />
+      <h1>{{ author?.alias ?? did }}</h1>
+    </div>
     <div v-if="isLoading"></div>
     <div v-else>
       <ul
@@ -55,8 +57,17 @@ const author = computedAsync(async () => getUniqueAka(did.value))
   padding-left: 1rem;
   padding-right: 1rem;
 
-  h1 {
+  .header {
     margin-top: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  h1 {
+    flex: 1;
+    text-align: center;
+    margin-bottom: 0;
   }
 
   .back-button {

src/views/PublicNoteListView.vue

@@ -9,8 +9,10 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAlias } =
 
 <template>
   <main class="public-note-list-view">
-    <h1>Remanso notes</h1>
-    <back-button class="back-button" :fallback="{ name: 'Home' }" />
+    <div class="header">
+      <back-button class="back-button" :fallback="{ name: 'Home' }" />
+      <h1>Remanso notes</h1>
+    </div>
     <div v-if="isLoading"></div>
     <div v-else>
       <ul
@@ -61,8 +63,17 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAlias } =
   padding-left: 1rem;
   padding-right: 1rem;
 
-  h1 {
+  .header {
     margin-top: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  h1 {
+    flex: 1;
+    text-align: center;
+    margin-bottom: 0;
   }
 
   .back-button {

src/views/PublicNoteView.vue

@@ -99,6 +99,7 @@ watch(
           </router-link>
           <span v-if="publishedAt">&nbsp;•&nbsp;{{ publishedAt }}</span>
         </span>
+        <div class="badge skeleton h-4 w-50" v-else></div>
       </div>
       <div class="repo-title-breadcrumb">
         <a
@@ -131,6 +132,8 @@ watch(
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
   }
 
   h1 {
@@ -138,13 +141,8 @@ watch(
   }
 
   .article {
-    position: sticky;
     padding: 0 2rem;
     scrollbar-width: none;
-
-    article {
-      margin-top: 1rem;
-    }
   }
 
   &.content {
@@ -193,6 +191,7 @@ watch(
       transform-origin: 0 0;
       transform: rotate(90deg);
       font-size: 0.8em;
+      text-wrap: nowrap;
 
       a {
         color: var(--color-base-content);
@@ -207,6 +206,10 @@ watch(
     }
   }
 
+  .note {
+    width: 100%;
+  }
+
   @media screen and (max-width: 768px) {
     flex-wrap: wrap;