Fixed UI for Proposal List Display and UI for links in full proposal

src/App.css

@@ -11,7 +11,8 @@ a {
   z-index: 1000000;
 }
 
-[data-rsbs-overlay], [data-rsbs-root]:after {
+[data-rsbs-overlay],
+[data-rsbs-root]:after {
   background: #1C1F23;
   z-index: 1000001;
   max-height: 90vh;
@@ -24,7 +25,7 @@ a {
 
 /* Hide scrollbar for IE, Edge and Firefox */
 * {
-  scrollbar-width: none; 
+  scrollbar-width: none;
 }
 
 /* width */
@@ -47,4 +48,12 @@ a {
 /* Handle on hover */
 /* ::-webkit-scrollbar-thumb:hover {
   background: #4a5055;
-} */
+} */
+.proposal-details a {
+  color: #81feb7;
+  cursor: pointer;
+}
+.proposal-details a:hover {
+  text-decoration: underline;
+  /* border-bottom: 1px solid #81feb7; */
+}

src/modules/explorer/components/ProposalsList.tsx

@@ -57,8 +57,8 @@ export const ProposalsList: React.FC<Props> = ({
 }) => {
   const [currentPage, setCurrentPage] = useState(0)
   const [offset, setOffset] = useState(0)
-  const [open, setopen] = useState(true)
   const [filteredProposals, setFilteredProposals] = useState<ProposalObj[]>([])
+  // TODO: next two lines can be safely removed
   const [filter, setFilter] = useState<number>(0)
   const [filterOnchain, setFilterOnchain] = useState<string>()
   const [isLoading, setIsLoading] = useState(false)
@@ -133,6 +133,7 @@ export const ProposalsList: React.FC<Props> = ({
     []
   )
 
+  // TODO: this can be probably removed as not in use
   const orderedList = (state: Order) => {
     if (state === "recent") {
       return listOfProposals

src/modules/lite/explorer/components/ProposalDetailCard.tsx

@@ -200,7 +200,7 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin
           </Grid>
 
           <Grid container>
-            <Typography variant="body2" color="textPrimary">
+            <Typography variant="body2" color="textPrimary" className="proposal-details">
               {ReactHtmlParser(poll?.description ? poll?.description : "")}
             </Typography>
           </Grid>

src/modules/lite/explorer/components/ProposalTableRow.tsx

@@ -37,12 +37,17 @@ const DescriptionText = styled(Typography)(({ theme }) => ({
   }
 }))
 
+const stripHtmlTags = (input: string) => {
+  const div = document.createElement("div")
+  div.innerHTML = input
+  return div.textContent || div.innerText || ""
+}
+
 export const ProposalTableRow: React.FC<{ poll: Poll | any; daoId?: string }> = ({ poll, daoId }) => {
   const navigate = useHistory()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down("xs"))
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
-
   return (
     <RowContainer
       style={{ background: "#2F3438", borderRadius: 8 }}
@@ -55,11 +60,15 @@ export const ProposalTableRow: React.FC<{ poll: Poll | any; daoId?: string }> =
     >
       <Grid container item style={{ gap: 16 }} xs={12} md={12} justifyContent={isMobile ? "center" : "flex-start"}>
         <Title color="textPrimary" align={isMobile ? "center" : "left"}>
-          {poll.name}
+          {poll.name.length > 100 ? poll.name.slice(0, 100) + "..." : poll.name}
         </Title>
 
         <Grid container direction="row">
-          <DescriptionText>{ReactHtmlParser(poll.description)}</DescriptionText>
+          <DescriptionText>
+            {poll.description.length > 200
+              ? stripHtmlTags(poll.description).slice(0, 200) + "..."
+              : ReactHtmlParser(poll.description)}
+          </DescriptionText>
         </Grid>
 
         <Grid