Remove outter <a on library items to work around checkbox propogating the click event up in firefox

packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx

@@ -32,8 +32,6 @@ export const MetaStyle = {
   textOverflow: 'ellipsis',
   wordBreak: 'break-word',
   lineHeight: 1.1,
-  overflowX: 'hidden',
-  overflowY: 'visible',
 }
 
 export const TitleStyle = {
@@ -51,23 +49,6 @@ export const TitleStyle = {
   '-webkit-box-orient': 'vertical',
 }
 
-export const DescriptionStyle = {
-  color: '$thTextSubtle',
-  pt: '10px',
-  fontSize: '13px',
-  fontWeight: '400',
-  lineHeight: '140%',
-  fontFamily: '$display',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  display: '-webkit-box',
-  '-webkit-line-clamp': '2',
-  '-webkit-box-orient': 'vertical',
-  height: '45px',
-  alignItems: 'start',
-  maxWidth: '-webkit-fill-available',
-}
-
 export const AuthorInfoStyle = {
   maxLines: '1',
   maxWidth: '240px',
@@ -78,7 +59,7 @@ export const AuthorInfoStyle = {
   lineHeight: '1',
   wordWrap: 'break-word',
   whiteSpace: 'nowrap',
-  overflow: 'hidden',
+  overflowX: 'hidden',
   textOverflow: 'ellipsis',
 }
 
@@ -167,6 +148,7 @@ export function CardCheckbox(props: CardCheckBoxProps): JSX.Element {
         checked={props.isChecked}
         onChange={(event) => {
           props.handleChanged()
+          event.stopPropagation()
         }}
       ></input>
     </form>

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -30,10 +30,12 @@ import { DotsThree } from 'phosphor-react'
 import { isTouchScreenDevice } from '../../../lib/deviceType'
 import { ProgressBarOverlay } from './LibraryListCard'
 import { FallbackImage } from './FallbackImage'
+import { useRouter } from 'next/router'
 
 dayjs.extend(relativeTime)
 
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
+  const router = useRouter()
   const [isHovered, setIsHovered] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
 
@@ -85,6 +87,17 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
       onMouseLeave={() => {
         setIsHovered(false)
       }}
+      onClick={(event) => {
+        console.log('click event: ', event)
+        if (event.metaKey || event.ctrlKey) {
+          window.open(
+            `/${props.viewer.profile.username}/${props.item.slug}`,
+            '_blank'
+          )
+        } else {
+          router.push(`/${props.viewer.profile.username}/${props.item.slug}`)
+        }
+      }}
     >
       {!isTouchScreenDevice() && (
         <Box
@@ -100,7 +113,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           />
         </Box>
       )}
-      <Link
+      {/* <Link
         href={`${props.viewer.profile.username}/${props.item.slug}`}
         passHref
       >
@@ -108,10 +121,10 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           href={`${props.viewer.profile.username}/${props.item.slug}`}
           style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
           tabIndex={-1}
-        >
-          <LibraryGridCardContent {...props} isHovered={isHovered} />
-        </a>
-      </Link>
+        > */}
+      <LibraryGridCardContent {...props} isHovered={isHovered} />
+      {/* </a>
+      </Link> */}
     </VStack>
   )
 }

packages/web/components/patterns/LibraryCards/LibraryListCard.tsx

@@ -30,8 +30,10 @@ import { CoverImage } from '../../elements/CoverImage'
 import { ProgressBar } from '../../elements/ProgressBar'
 import { theme } from '../../tokens/stitches.config'
 import { FallbackImage } from './FallbackImage'
+import { useRouter } from 'next/router'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
+  const router = useRouter()
   const [isHovered, setIsHovered] = useState(false)
 
   const [isOpen, setIsOpen] = useState(false)
@@ -95,6 +97,17 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
       onMouseLeave={() => {
         setIsHovered(false)
       }}
+      onClick={(event) => {
+        console.log('click event: ', event)
+        if (event.metaKey || event.ctrlKey) {
+          window.open(
+            `/${props.viewer.profile.username}/${props.item.slug}`,
+            '_blank'
+          )
+        } else {
+          router.push(`/${props.viewer.profile.username}/${props.item.slug}`)
+        }
+      }}
     >
       {!isTouchScreenDevice() && (
         <Box
@@ -110,18 +123,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
           />
         </Box>
       )}
-      <Link
-        href={`${props.viewer.profile.username}/${props.item.slug}`}
-        passHref
-      >
-        <a
-          href={`${props.viewer.profile.username}/${props.item.slug}`}
-          style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
-          tabIndex={-1}
-        >
-          <LibraryListCardContent {...props} isHovered={isHovered} />
-        </a>
-      </Link>
+      <LibraryListCardContent {...props} isHovered={isHovered} />
     </VStack>
   )
 }