From be579df99672e5c118d5d01d041c5403170612ff Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 30 May 2024 10:47:14 +0200
Subject: [PATCH] style(home): improve offline icon position, use short
 addresses, add break word

---
 src/views/home/home.module.css | 6 +++---
 src/views/home/home.tsx        | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css
index d4a26aaf..be829aaa 100644
--- a/src/views/home/home.module.css
+++ b/src/views/home/home.module.css
@@ -119,7 +119,7 @@
 }
 
 .list a {
-  display: inline-block;
+
   color: var(--homepage-box-link-text-color);
   text-decoration: var(--homepage-box-link-text-decoration);
 }
@@ -140,7 +140,7 @@
   background-image: url('/public/assets/icons/offline.png');
   display: inline-block;
   vertical-align: text-top;
-  margin-left: 2px;
+  margin-right: 2px;
   width: 13px;
   height: 13px;
   background-repeat: no-repeat;
@@ -161,7 +161,7 @@
   float: left;
   width: 168px;
   margin-right: 15px;
-  overflow: hidden;
+  word-break: break-word;
 }
 
 .boardsBoxContent h3 {
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 404caa65..dea606c0 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -3,6 +3,7 @@ import styles from './home.module.css';
 import { Link, useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { Comment, Subplebbit, useAccount, useAccountSubplebbits, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import packageJson from '../../../package.json';
 import useDefaultSubplebbits, { useMultisubMetadata, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import usePopularPosts from '../../hooks/use-popular-posts';
@@ -79,9 +80,9 @@ const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subp
 
   return (
     <div className={styles.subplebbit} key={address}>
+      {isOffline && <span className={styles.offlineIcon} />}
       <Link to={`/p/${address}`}>{title || address}</Link>
       {nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
-      {isOffline && <span className={styles.offlineIcon} />}
     </div>
   );
 };
@@ -166,7 +167,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
             {subscriptions.length > 0
               ? subscriptions.map((address: string, index: number) => (
                   <div className={styles.subplebbit} key={index}>
-                    <Link to={`/p/${address}`}>{address}</Link>
+                    <Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
                   </div>
                 ))
               : t('not_subscribed')}
@@ -176,7 +177,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
             {accountSubplebbitAddresses.length > 0
               ? accountSubplebbitAddresses.map((address: string, index: number) => (
                   <div className={styles.subplebbit} key={index}>
-                    <Link to={`/p/${address}`}>p/{address}</Link>
+                    <Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
                   </div>
                 ))
               : t('not_moderating')}