better horizontal comment density + fix downzap icon width

components/comment.module.css

@@ -18,9 +18,7 @@
 
 .dontLike {
     fill: #a5a5a5;
-    margin-right: .35rem;
-    padding: 2px;
-    margin-left: 1px;
+    margin-right: 2px;
     margin-top: 9px;
     cursor: pointer;
 }
@@ -64,19 +62,23 @@
 
 .children {
     margin-top: 0;
-    margin-left: 27px;
+    margin-left: 15px;
 }
 
 .comments {
-    margin-left: -.75rem;
+    margin-left: -15px;
 }
 
 @media screen and (min-width: 768px) {
 
     .comments {
-        margin-left: .75rem;
+        margin-left: 0px;
     }
-  }
+
+    .children {
+        margin-left: 25px;
+    }
+}
 
 .skeleton .hunk {
     width: 100%;

components/dont-link-this.js

@@ -7,6 +7,7 @@ import Flag from '@/svgs/flag-fill.svg'
 import { useMemo } from 'react'
 import getColor from '@/lib/rainbow'
 import { gql, useMutation } from '@apollo/client'
+import styles from './upvote.module.css'
 
 export function DownZap ({ item, ...props }) {
   const { meDontLikeSats } = item
@@ -20,7 +21,9 @@ export function DownZap ({ item, ...props }) {
     <DownZapper
       item={item} As={({ ...oprops }) =>
         <div className='upvoteParent'>
-          <Flag {...props} {...oprops} style={style} />
+          <div className={styles.upvoteWrapper}>
+            <Flag {...props} {...oprops} style={style} />
+          </div>
         </div>}
     />
   )

components/item.module.css

@@ -76,10 +76,9 @@ a.title:visited {
 
 .dontLike {
     fill: #a5a5a5;
-    margin-right: .35rem;
-    margin-left: -.2rem;
     flex-shrink: 0;
     cursor: pointer;
+    margin-right: 2px;
 }
 
 .case {

components/reply.module.css

@@ -2,6 +2,7 @@
     max-width: 600px;
     padding-right: 15px;
     padding-bottom: 1rem;
+    margin-left: 12px;
 }
 
 .replyButtons {
@@ -12,6 +13,7 @@
     align-items: center;
     line-height: 1rem;
     vertical-align: middle;
+    margin-left: 12px;
 }
 
 .replyButtons > * {
@@ -47,4 +49,14 @@
 .reply .text {
     margin-top: -1px;
     height: auto;
+}
+
+@media screen and (min-width: 768px) {
+    .replyButtons {
+        margin-left: .99px;
+    }
+
+    .reply {
+        margin-left: .99px;
+    }
 }

fragments/comments.js

@@ -152,6 +152,16 @@ export const COMMENTS = gql`
                     comments {
                       comments {
                         ...CommentFields
+                        comments {
+                          comments {
+                            ...CommentFields
+                            comments {
+                              comments {
+                                ...CommentFields
+                              }
+                            }
+                          }
+                        }
                       }
                     }
                   }
@@ -167,7 +177,7 @@ export const COMMENTS = gql`
 export const COMMENT_WITH_NEW_RECURSIVE = gql`
   ${COMMENT_FIELDS}
   ${COMMENTS}
-  
+
   fragment CommentWithNewRecursive on Item {
     ...CommentFields
     comments {
@@ -180,7 +190,7 @@ export const COMMENT_WITH_NEW_RECURSIVE = gql`
 
 export const COMMENT_WITH_NEW_LIMITED = gql`
   ${COMMENT_FIELDS}
-  
+
   fragment CommentWithNewLimited on Item {
     ...CommentFields
     comments {
@@ -193,7 +203,7 @@ export const COMMENT_WITH_NEW_LIMITED = gql`
 
 export const COMMENT_WITH_NEW_MINIMAL = gql`
   ${COMMENT_FIELDS}
-  
+
   fragment CommentWithNewMinimal on Item {
     ...CommentFields
   }
@@ -201,7 +211,7 @@ export const COMMENT_WITH_NEW_MINIMAL = gql`
 
 export const GET_NEW_COMMENTS = gql`
   ${COMMENTS}
-  
+
   query GetNewComments($rootId: ID, $after: Date) {
     newComments(rootId: $rootId, after: $after) {
       comments {

lib/constants.js

@@ -42,7 +42,7 @@ export const BOUNTY_MAX = 10000000
 export const POST_TYPES = ['LINK', 'DISCUSSION', 'BOUNTY', 'POLL']
 export const TERRITORY_BILLING_TYPES = ['MONTHLY', 'YEARLY', 'ONCE']
 export const TERRITORY_GRACE_DAYS = 5
-export const COMMENT_DEPTH_LIMIT = 6
+export const COMMENT_DEPTH_LIMIT = 8
 export const COMMENTS_LIMIT = 50
 export const FULL_COMMENTS_THRESHOLD = 200
 export const COMMENTS_OF_COMMENT_LIMIT = 2