Fix nested <a> in GridRep

components/reps/GridRep/index.module.scss

@@ -6,8 +6,8 @@
   display: grid;
   grid-template-rows: 1fr 1fr;
   gap: $unit;
-  padding: $unit-2x $unit-2x 0 $unit-2x;
   min-width: 320px;
+  position: relative;
   width: 100%;
   opacity: 1;
 
@@ -54,6 +54,22 @@
     }
   }
 
+  a {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 8px;
+    gap: 8px;
+    padding: $unit-2x $unit-2x 0 $unit-2x;
+  }
+
+  button {
+    position: absolute;
+    z-index: 2;
+    right: $unit;
+    top: $unit;
+    width: 44px;
+  }
+
   .gridContainer {
     aspect-ratio: 2/0.95;
     width: 100%;

components/reps/GridRep/index.tsx

@@ -501,7 +501,6 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
   )
 
   const favoriteButton = (
-    <Link href="#">
     <Button
       className={classNames({
         save: true,
@@ -513,7 +512,6 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
       size="small"
       onClick={sendSaveData}
     />
-    </Link>
   )
 
   const renderFavoriteButton =
@@ -566,7 +564,6 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
         <div className={styles.buttonArea}>
           {renderPrivateIcon}
           {renderVisibilityIcon}
-          {renderFavoriteButton}
         </div>
       </div>
       <div className={styles.attributed}>
@@ -587,9 +584,10 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
   }
 
   return (
+    <div className={gridRepClasses}>
+      {renderFavoriteButton}
       <Link
         href={`/p/${party.shortcode}`}
-      className={gridRepClasses}
         onMouseLeave={() => changeView('weapons')}
       >
         {detailsWithUsername}
@@ -630,6 +628,7 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
           </li>
         </ul>
       </Link>
+    </div>
   )
 }