From 5523cee7f91b79833dc4f4f7247f64004397f15a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 26 Mar 2024 18:08:50 +0100
Subject: [PATCH] style: adjust title/address for subs with no title and IPNS
 address

---
 src/components/board-banner/board-banner.tsx |  7 ++++---
 src/components/board-nav/board-nav.tsx       | 17 +++++++++++------
 src/components/post/post.module.css          |  4 ++--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx
index 6b4ae795..7887a67e 100644
--- a/src/components/board-banner/board-banner.tsx
+++ b/src/components/board-banner/board-banner.tsx
@@ -17,14 +17,15 @@ interface BoardBannerProps {
   address: string | undefined;
 }
 
-const BoardBanner = ({ title, address }: BoardBannerProps) => {
+const BoardBanner = ({ address, title }: BoardBannerProps) => {
+  const displayAddress = address && address.length > 10 && !address.includes('.') ? address.slice(0, 13).concat('...') : address;
   return (
     <div className={styles.content}>
       <div className={styles.bannerCnt}>
         <ImageBanner key={address} />
       </div>
-      <div className={styles.boardTitle}>{title || `p/${address}`}</div>
-      {title && <div className={styles.boardAddress}>p/{address}</div>}
+      <div className={styles.boardTitle}>{title || `p/${displayAddress}`}</div>
+      <div className={styles.boardAddress}>p/{address}</div>
       <hr />
     </div>
   );
diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx
index bd48bc68..fa2e989a 100644
--- a/src/components/board-nav/board-nav.tsx
+++ b/src/components/board-nav/board-nav.tsx
@@ -37,16 +37,21 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
 const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const displaySubplebbit = currentSubplebbit && currentSubplebbit.length > 10 ? currentSubplebbit.slice(0, 10).concat('...') : currentSubplebbit;
 
   const boardSelect = (
-    <select value={currentSubplebbit} onChange={(e) => navigate(`/p/${e.target.value}`)}>
+    <select value={displaySubplebbit} onChange={(e) => navigate(`/p/${e.target.value}`)}>
       <option value='all'>{t('all')}</option>
       <option value='subscriptions'>{t('subscriptions')}</option>
-      {subplebbits.map((subplebbit: any, index: number) => (
-        <option key={index} value={subplebbit.address}>
-          {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
-        </option>
-      ))}
+      {subplebbits.map((subplebbit: any, index: number) => {
+        const { address, title } = subplebbit;
+        const subplebbitAddress = address.includes('.') ? address : title || address.slice(0, 10).concat('...');
+        return (
+          <option key={index} value={subplebbit.address}>
+            {subplebbitAddress}
+          </option>
+        );
+      })}
     </select>
   );
 
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 926dd15e..a518f3d0 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -88,9 +88,9 @@
 .postDesktop .postMessage {
   padding: 1em 40px;
 }
-/* 
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;
   }
-} */
\ No newline at end of file
+}
\ No newline at end of file