fix item spacing

components/comment.js

@@ -77,7 +77,7 @@ export function CommentFlat ({ item, rank, siblingComments, ...props }) {
           </div>)
         : <div />}
       <LinkToContext
-        className={siblingComments ? 'py-3' : 'py-2'}
+        className='py-2'
         onClick={e => {
           router.push(href, as)
         }}

components/comment.module.css

@@ -1,12 +1,11 @@
 .item {
     align-items: flex-start;
     margin-bottom: 0 !important;
-    padding-bottom: 0 !important;
+    padding-top: 0 !important;
 }
 
 .upvote {
     margin-top: 9px;
-    margin-left: .25rem;
     margin-right: 0rem;
 }
 

components/item.js

@@ -46,7 +46,7 @@ export function SearchTitle ({ title }) {
 }
 
 export default function Item ({
-  item, rank, belowTitle, right, full, children, siblingComments,
+  item, rank, belowTitle, right, full, children, itemClassName,
   onQuoteReply, pinnable
 }) {
   const titleRef = useRef()
@@ -62,7 +62,7 @@ export default function Item ({
             {rank}
           </div>)
         : <div />}
-      <div className={`${styles.item} ${siblingComments ? 'pt-3' : ''}`}>
+      <div className={classNames(styles.item, itemClassName)}>
         {item.position && (pinnable || !item.subName)
           ? <Pin width={24} height={24} className={styles.pin} />
           : item.meDontLikeSats > item.meSats

components/item.module.css

@@ -118,7 +118,7 @@ a.link:visited {
     display: flex;
     justify-content: flex-start;
     min-width: 0;
-    padding-bottom: .5rem;
+    padding-top: .5rem;
 }
 
 .item .companyImage {
@@ -170,6 +170,7 @@ a.link:visited {
 
 .children {
     margin-left: 28px;
+    padding-top: .5rem;
 }
 
 .rank {

components/items.js

@@ -51,7 +51,7 @@ export default function Items ({ ssrData, variables = {}, query, destructureData
     <>
       <div className={styles.grid}>
         {itemsWithPins.filter(filter).map((item, i) => (
-          <ListItem key={item.id} item={item} rank={rank && i + 1} siblingComments={variables.includeComments} pinnable={isHome ? false : pins?.length > 0} />
+          <ListItem key={item.id} item={item} rank={rank && i + 1} itemClassName={variables.includeComments ? 'py-2' : ''} pinnable={isHome ? false : pins?.length > 0} />
         ))}
       </div>
       <Foooter

components/link-to-context.module.css

@@ -12,6 +12,10 @@
 
 .linkBoxParent {
     position: relative;
+    margin-left: -0.5rem;
+    padding-left: 0.5rem;
+    margin-right: -0.5rem;
+    padding-right: 0.5rem;
 }
 
 .linkBoxParent > * {

components/more-footer.js

@@ -33,7 +33,7 @@ export default function MoreFooter ({ cursor, count, fetchMore, Skeleton, invisi
     )
   }
 
-  return <div className={`d-flex justify-content-center mt-3 mb-1 ${invisible ? 'invisible' : ''}`}><Footer /></div>
+  return <div className={`d-flex justify-content-center mt-4 mb-1 ${invisible ? 'invisible' : ''}`}><Footer /></div>
 }
 
 export function NavigateFooter ({ cursor, count, fetchMore, href, text, invisible, noMoreText = 'NO MORE' }) {

components/nav/desktop/second-bar.js

@@ -6,7 +6,7 @@ export default function SecondBar (props) {
   const { prefix, topNavKey, sub } = props
   if (!hasNavSelect(props)) return null
   return (
-    <Navbar className='pt-0 pb-3'>
+    <Navbar className='pt-0 pb-2'>
       <Nav
         className={styles.navbarNav}
         activeKey={topNavKey}

components/recent-header.js

@@ -15,7 +15,7 @@ export default function RecentHeader ({ type, sub }) {
 
   type ||= router.query.type || type || 'posts'
   return (
-    <div className='text-muted fw-bold mt-1 mb-3 d-flex justify-content-start align-items-center'>
+    <div className='text-muted fw-bold my-1 d-flex justify-content-start align-items-center'>
       <Select
         groupClassName='mb-2'
         className='w-auto'

components/territory-header.js

@@ -81,7 +81,7 @@ export default function TerritoryHeader ({ sub }) {
   return (
     <>
       <TerritoryPaymentDue sub={sub} />
-      <div className='mb-3'>
+      <div className='mb-2 mt-1'>
         <div>
           <TerritoryDetails sub={sub}>
             <div className='d-flex my-2 justify-content-end'>

components/top-header.js

@@ -46,7 +46,7 @@ export default function TopHeader ({ sub, cat }) {
         initial={{ what, by, when, from: '', to: '' }}
         onSubmit={top}
       >
-        <div className='text-muted fw-bold mt-1 mb-3 d-flex align-items-center flex-wrap'>
+        <div className='text-muted fw-bold my-1 d-flex align-items-center flex-wrap'>
           <div className='text-muted fw-bold mb-2 d-flex align-items-center'>
             <Select
               groupClassName='me-2 mb-0'