From 9cccbabdf9b246d3d4f75f715daeedf169cbf363 Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Fri, 5 Dec 2025 22:49:31 +0200
Subject: [PATCH] a bunch of style/layout fixes after visual review

---
 src/components/BiohazardDialog.svelte             |  4 ++--
 src/components/RichTextFromFacets.svelte          |  3 +--
 src/components/embeds/EmbedComponent.svelte       | 15 +++++++++------
 src/components/posts/PostComponent.svelte         |  2 +-
 src/components/posts/PostFooter.svelte            |  2 +-
 src/components/posts/PostHeader.svelte            |  4 ++--
 .../posts/ReferencedPostAuthorLink.svelte         |  5 +++--
 src/models/posts.js                               |  2 +-
 src/pages/HashtagPage.svelte                      |  2 +-
 src/pages/LikeStatsPage.svelte                    |  2 ++
 src/pages/LycanSearchPage.svelte                  |  1 +
 src/pages/PostingStatsPage.svelte                 |  3 +++
 src/pages/QuotesPage.svelte                       |  4 ++++
 src/pages/SearchPage.svelte                       |  4 ++--
 style.css                                         |  2 +-
 15 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/BiohazardDialog.svelte b/src/components/BiohazardDialog.svelte
index 565a1d1..d87296d 100644
--- a/src/components/BiohazardDialog.svelte
+++ b/src/components/BiohazardDialog.svelte
@@ -48,12 +48,12 @@
     width: 400px;
   }
 
-  p.submit {
+  :global(.dialog) p.submit {
     margin-top: 40px;
     margin-bottom: 20px;
   }
 
-  input[type="submit"] {
+  :global(.dialog) input[type="submit"] {
     width: 180px;
     margin-left: 5px;
     margin-right: 5px;
diff --git a/src/components/RichTextFromFacets.svelte b/src/components/RichTextFromFacets.svelte
index 52755f3..8549682 100644
--- a/src/components/RichTextFromFacets.svelte
+++ b/src/components/RichTextFromFacets.svelte
@@ -19,8 +19,7 @@
     {@const lines = segment.text.split("\n")}
 
     {#each lines as line, i}
-      {#if i > 0}<br>{/if}
-      {line}
+      {#if i > 0}<br>{/if}{line}
     {/each}
   {/if}
 {/each}
diff --git a/src/components/embeds/EmbedComponent.svelte b/src/components/embeds/EmbedComponent.svelte
index ce055e7..fa5d44a 100644
--- a/src/components/embeds/EmbedComponent.svelte
+++ b/src/components/embeds/EmbedComponent.svelte
@@ -86,6 +86,7 @@
       margin-top: 8px;
       margin-bottom: 4px;
       line-height: 135%;
+      white-space: pre-line;
     }
 
     a.link-card.record > div:has(.avatar) {
@@ -98,7 +99,10 @@
 
     a.link-card.record .handle {
       color: #666;
-      margin-left: 5px;
+      margin-left: 1px;
+      font-weight: normal;
+      font-size: 11pt;
+      vertical-align: text-top;
     }
 
     a.link-card.record .avatar {
@@ -114,9 +118,12 @@
     a.link-card.record .stats {
       margin-top: 9px;
       margin-bottom: 1px;
+      font-size: 10pt;
+      color: #666;
     }
 
-    a.link-card.record .stats i.fa-heart:hover {
+    a.link-card.record .stats i.fa-heart {
+      font-size: 9pt;
       color: #aaa;
     }
   }
@@ -152,10 +159,6 @@
       a.link-card.record .avatar {
         border-color: #888;
       }
-
-      a.link-card.record .stats i.fa-heart:hover {
-        color: #eee;
-      }
     }
   }
 </style>
diff --git a/src/components/posts/PostComponent.svelte b/src/components/posts/PostComponent.svelte
index 05d361a..b085ccd 100644
--- a/src/components/posts/PostComponent.svelte
+++ b/src/components/posts/PostComponent.svelte
@@ -187,7 +187,7 @@
 </div>
 
 <style>
-  .post {
+  :global(.post) {
     position: relative;
     padding-left: 21px;
     margin-top: 30px;
diff --git a/src/components/posts/PostFooter.svelte b/src/components/posts/PostFooter.svelte
index 8566004..2ee816a 100644
--- a/src/components/posts/PostFooter.svelte
+++ b/src/components/posts/PostFooter.svelte
@@ -134,7 +134,7 @@
   }
 
   span {
-    margin-right: 10px;
+    margin-right: 7px;
   }
 
   .blocked-info {
diff --git a/src/components/posts/PostHeader.svelte b/src/components/posts/PostHeader.svelte
index 4316991..9916ae0 100644
--- a/src/components/posts/PostHeader.svelte
+++ b/src/components/posts/PostHeader.svelte
@@ -65,7 +65,7 @@
     border-radius: 16px;
     vertical-align: middle;
     margin-bottom: 3px;
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   .no-avatar, .muted-avatar {
@@ -73,7 +73,7 @@
     background-color: #eee;
     border-radius: 16px;
     vertical-align: middle;
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   .muted-avatar {
diff --git a/src/components/posts/ReferencedPostAuthorLink.svelte b/src/components/posts/ReferencedPostAuthorLink.svelte
index dac3de5..8102983 100644
--- a/src/components/posts/ReferencedPostAuthorLink.svelte
+++ b/src/components/posts/ReferencedPostAuthorLink.svelte
@@ -5,6 +5,7 @@
   let { post, status = undefined }: { post: AnyPost, status?: string | undefined } = $props();
 
   let handle: string | undefined = $state();
+  let handleText = $derived(handle ? `@${handle}` : 'see author');
 
   $effect(() => {
     let did = atURI(post.uri).repo;
@@ -16,7 +17,7 @@
 </script>
 
 {#if status}
-  (<a href="{post.didLinkToAuthor}" target="_blank">{handle ?? 'see author'}</a>, {status})
+  (<a href="{post.didLinkToAuthor}" target="_blank">{handleText}</a>, {status})
 {:else}
-  (<a href="{post.didLinkToAuthor}" target="_blank">{handle ?? 'see author'}</a>)
+  (<a href="{post.didLinkToAuthor}" target="_blank">{handleText}</a>)
 {/if}
diff --git a/src/models/posts.js b/src/models/posts.js
index 8f7951e..d05c90c 100644
--- a/src/models/posts.js
+++ b/src/models/posts.js
@@ -343,7 +343,7 @@ export class Post extends BasePost {
   /** @returns {string} */
   get authorDisplayName() {
     if (this.author.displayName) {
-      return this.author.displayName;
+      return this.author.displayName.trim();
     } else if (this.author.handle.endsWith('.bsky.social')) {
       return this.author.handle.replace(/\.bsky\.social$/, '');
     } else {
diff --git a/src/pages/HashtagPage.svelte b/src/pages/HashtagPage.svelte
index 2d3601d..6e32ac5 100644
--- a/src/pages/HashtagPage.svelte
+++ b/src/pages/HashtagPage.svelte
@@ -66,7 +66,7 @@
 {/if}
 
 <style>
-  .hashtag :global(.post) {
+  .hashtag > :global(.post) {
     padding-bottom: 10px;
     border-bottom: 1px solid #ddd;
   }
diff --git a/src/pages/LikeStatsPage.svelte b/src/pages/LikeStatsPage.svelte
index c076222..490e7cc 100644
--- a/src/pages/LikeStatsPage.svelte
+++ b/src/pages/LikeStatsPage.svelte
@@ -36,6 +36,7 @@
   }
 </script>
 
+<main>
 <h2>Like statistics</h2>
 
 <form onsubmit={startScan}>
@@ -57,6 +58,7 @@
   <LikeStatsTable cssClass="given-likes" header="❤️ Likes from you:" users={givenLikesUsers} />
   <LikeStatsTable cssClass="received-likes" header="💛 Likes on your posts:" users={receivedLikesUsers} />
 {/if}
+</main>
 
 <style>
   input[type="range"] {
diff --git a/src/pages/LycanSearchPage.svelte b/src/pages/LycanSearchPage.svelte
index 45a9072..9ddc597 100644
--- a/src/pages/LycanSearchPage.svelte
+++ b/src/pages/LycanSearchPage.svelte
@@ -240,6 +240,7 @@
 <style>
   .search-collections label {
     vertical-align: middle;
+    margin-right: 5px;
   }
 
   .lycan-import {
diff --git a/src/pages/PostingStatsPage.svelte b/src/pages/PostingStatsPage.svelte
index 6ff0532..307aa2e 100644
--- a/src/pages/PostingStatsPage.svelte
+++ b/src/pages/PostingStatsPage.svelte
@@ -109,6 +109,7 @@
   }
 </script>
 
+<main>
 <h2>Bluesky posting statistics</h2>
 
 <form {onsubmit}>
@@ -157,6 +158,7 @@
 {#if results}
   <PostingStatsTable {...tableOptions} {...results} />
 {/if}
+</main>
 
 <style>
   input[type="radio"] {
@@ -168,6 +170,7 @@
   input[type="radio"] + label {
     user-select: none;
     -webkit-user-select: none;
+    margin-right: 4px;
   }
 
   input[type="range"] {
diff --git a/src/pages/QuotesPage.svelte b/src/pages/QuotesPage.svelte
index 5b61dd9..d390b25 100644
--- a/src/pages/QuotesPage.svelte
+++ b/src/pages/QuotesPage.svelte
@@ -75,6 +75,10 @@
 {/if}
 
 <style>
+  .quotes :global(p.back) {
+    padding-left: 10px;
+  }
+
   .quotes :global(.post) {
     padding-bottom: 5px;
   }
diff --git a/src/pages/SearchPage.svelte b/src/pages/SearchPage.svelte
index aadc1b6..541f88d 100644
--- a/src/pages/SearchPage.svelte
+++ b/src/pages/SearchPage.svelte
@@ -2,9 +2,9 @@
   let { children } = $props();
 </script>
 
-<div class="search-page">
+<main class="search-page">
   {@render children()}
-</div>
+</main>
 
 <style>
   .search-page :global {
diff --git a/style.css b/style.css
index 9ef3c78..6adb184 100644
--- a/style.css
+++ b/style.css
@@ -56,7 +56,7 @@ main header h2 {
 p.back i {
   font-size: 10pt;
   color: #888;
-  margin-right: 5px;
+  margin-right: 3px;
 }
 
 @media (prefers-color-scheme: dark) {
-- 
2.51.2