diff --git a/src/App.js b/src/App.js
index 0b565cdb..6edc9a8a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import Board from './components/Board';
import Thread from './components/Thread';
import Catalog from './components/Catalog';
import { createGlobalStyle } from 'styled-components';
+import 'react-tooltip/dist/react-tooltip.css';
export const BoardContext = React.createContext();
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index 22415060..6996c736 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -5,6 +5,7 @@ import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm
import ImageBanner from './ImageBanner';
import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import InfiniteScroll from 'react-infinite-scroller';
+import { Tooltip } from 'react-tooltip';
const Board = ({ setBodyStyle }) => {
@@ -493,19 +494,56 @@ const Board = ({ setBodyStyle }) => {
...
-
- LongName (...)
+
+ {thread.author.displayName
+ ? thread.author.displayName.length > 15
+ ? <>
+
+
+ {thread.author.displayName.slice(0, 15) + " (...)"}
+
+ >
+ :
+ {thread.author.displayName}
+ :
+ Anonymous}
(User:
- CCxfJWFT...
- )
+ {thread.author.address.length > 15 ?
+ <>
+
+
+ {thread.author.address.slice(0, 15) + "..."}
+
+ >
+ :
+ {thread.author.address}
+ }
+ )
-
- {/* {thread.title ? `${thread.title}` : null} */}
- Sometimes titles can be very lon (…)
-
+ {thread.title ? (
+ thread.title.length > 30 ?
+ <>
+
+
+ {thread.title.slice(0, 30) + " (...)"}
+
+ >
+ :
+ {thread.title}
+ )
+ : null}
2 weeks ago
@@ -542,11 +580,37 @@ const Board = ({ setBodyStyle }) => {
...
- LongName (...)
+ {reply.author.displayName
+ ? reply.author.displayName.length > 12
+ ? <>
+
+
+ {reply.author.displayName.slice(0, 12) + " (...)"}
+
+ >
+ :
+ {reply.author.displayName}
+ :
+ Anonymous}
(User:
- CCxfJWFT...
+ {reply.author.address.length > 12 ?
+ <>
+
+
+ {reply.author.address.slice(0, 12) + "..."}
+
+ >
+ :
+ {reply.author.address}
+ }
)
diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx
index 49db0e88..48afa880 100644
--- a/src/components/Thread.jsx
+++ b/src/components/Thread.jsx
@@ -5,6 +5,7 @@ import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Threa
import { BoardContext } from '../App';
import { useComment } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner';
+import { Tooltip } from 'react-tooltip';
const Thread = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
@@ -417,18 +418,54 @@ const Thread = ({ setBodyStyle }) => {
...
- LongName (...)
+ {comment.author.displayName
+ ? comment.author.displayName.length > 15
+ ? <>
+
+
+ {comment.author.displayName.slice(0, 15) + " (...)"}
+
+ >
+ :
+ {comment.author.displayName}
+ :
+ Anonymous}
(User:
- CCxfJWFT...
- )
+ {comment.author.address.length > 15 ?
+ <>
+
+
+ {comment.author.address.slice(0, 15) + "..."}
+
+ >
+ :
+ {comment.author.address}
+ }
+ )
-
- {/* {thread.title ? `${thread.title}` : null} */}
- Sometimes titles can be very lon (…)
-
+ {comment.title ? (
+ comment.title.length > 30 ?
+ <>
+
+
+ {comment.title.slice(0, 30) + " (...)"}
+
+ >
+ :
+ {comment.title}
+ ) : null}
2 weeks ago
@@ -465,11 +502,37 @@ const Thread = ({ setBodyStyle }) => {
...
- {reply.author.displayName || "Anonymous"}
+ {reply.author.displayName
+ ? reply.author.displayName.length > 12
+ ? <>
+
+
+ {reply.author.displayName.slice(0, 12) + " (...)"}
+
+ >
+ :
+ {reply.author.displayName}
+ :
+ Anonymous}
(User:
- CCxfJWFT...
+ {reply.author.address.length > 12 ?
+ <>
+
+
+ {reply.author.address.slice(0, 12) + "..."}
+
+ >
+ :
+ {reply.author.address}
+ }
)
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index 77923399..25e2117d 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -1575,6 +1575,13 @@ export const BoardForm = styled.div`
display: none;
}
+ .tooltip {
+ border-radius: 0;
+ max-width: 80%;
+ font-size: 11px;
+ padding: 3px;
+ }
+
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':