From 247b739d43c671ea2071f97dee1b39f9ffe21344 Mon Sep 17 00:00:00 2001
From: Timmy Huang <thuang@chanzuckerberg.com>
Date: Wed, 17 Jan 2024 10:39:23 -0800
Subject: [PATCH] add comments

---
 .../components/CollectionRevisionStatusCallout/index.tsx     | 2 ++
 frontend/src/components/Header/components/Nav/index.tsx      | 5 +++++
 frontend/src/layout.css                                      | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Collection/components/CollectionRevisionStatusCallout/index.tsx b/frontend/src/components/Collection/components/CollectionRevisionStatusCallout/index.tsx
index a0206bcef9ff3..f7774166ec868 100644
--- a/frontend/src/components/Collection/components/CollectionRevisionStatusCallout/index.tsx
+++ b/frontend/src/components/Collection/components/CollectionRevisionStatusCallout/index.tsx
@@ -18,6 +18,7 @@ export default function CollectionRevisionStatusCallout({
         {!!revising_in && (
           <span>
             This public collection has a pending revision.{" "}
+            {/* (thuang): use `legacyBehavior` prop, since `<TextLink />` is `<a />` */}
             <Link href={`/collections/${revising_in}`} legacyBehavior passHref>
               <TextLink href="passHref">Continue Revision</TextLink>
             </Link>
@@ -26,6 +27,7 @@ export default function CollectionRevisionStatusCallout({
         {!!revision_of && (
           <span>
             This is a private revision of a published collection.{" "}
+            {/* (thuang): use `legacyBehavior` prop, since `<TextLink />` is `<a />` */}
             <Link href={`/collections/${revision_of}`} legacyBehavior passHref>
               <TextLink href="passHref">Open Published Collection</TextLink>
             </Link>
diff --git a/frontend/src/components/Header/components/Nav/index.tsx b/frontend/src/components/Header/components/Nav/index.tsx
index d9b4a600ba076..634ec65ef1cd6 100644
--- a/frontend/src/components/Header/components/Nav/index.tsx
+++ b/frontend/src/components/Header/components/Nav/index.tsx
@@ -25,6 +25,7 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
           <NavSectionTitle>Application</NavSectionTitle>
           <NavItemContainer>
             <LinkWrapper>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
               <Link href={ROUTES.COLLECTIONS} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.COLLECTIONS)}
@@ -39,6 +40,7 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               </Link>
             </LinkWrapper>
             <LinkWrapper>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
               <Link href={ROUTES.DATASETS} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.DATASETS)}
@@ -52,6 +54,7 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               </Link>
             </LinkWrapper>
             <LinkWrapper>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
               <Link href={ROUTES.WHERE_IS_MY_GENE} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.WHERE_IS_MY_GENE)}
@@ -65,6 +68,7 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               </Link>
             </LinkWrapper>
             <LinkWrapper>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
               <Link href={ROUTES.CELL_GUIDE} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.CELL_GUIDE)}
@@ -97,6 +101,7 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               />
             </LinkWrapper>
             <LinkWrapper>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
               <Link href={ROUTES.CENSUS_DIRECTORY} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.CENSUS_DIRECTORY)}
diff --git a/frontend/src/layout.css b/frontend/src/layout.css
index c5235dd68eac3..e3e4edd2b9708 100644
--- a/frontend/src/layout.css
+++ b/frontend/src/layout.css
@@ -139,8 +139,8 @@ img {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
-  /* (thuang): height: auto; is needed to ensure responsive aspect ratio is
-    correct.
+  /* (thuang): `height: auto;` is needed to ensure responsive aspect ratio is
+    correct when using `next/image`.
     @see: https://nextjs.org/docs/pages/building-your-application/optimizing/images#responsive
    */
   height: auto;