From ffa1a28e907e25589cd500e00d2bb907220e7a9c Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 17 Feb 2026 00:13:08 +0100
Subject: [PATCH] feat: better design

---
 src/views/PublicNoteListByDidView.vue | 17 ++++++++++++++---
 src/views/PublicNoteListView.vue      | 17 ++++++++++++++---
 src/views/PublicNoteView.vue          | 13 ++++++++-----
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/views/PublicNoteListByDidView.vue b/src/views/PublicNoteListByDidView.vue
index 1354af1..d460282 100644
--- a/src/views/PublicNoteListByDidView.vue
+++ b/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 {
diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue
index 8ee9d5e..6a5cf28 100644
--- a/src/views/PublicNoteListView.vue
+++ b/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 {
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index 3e3ca0e..5260d69 100644
--- a/src/views/PublicNoteView.vue
+++ b/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;