style: adjust title/address for subs with no title and IPNS address

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>
   );

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>
   );
 

src/components/post/post.module.css

@@ -88,9 +88,9 @@
 .postDesktop .postMessage {
   padding: 1em 40px;
 }
-/* 
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;
   }
-} */
+}