From 0df1e7202a0c5a4daaf46e923536fe190dbe4d9a Mon Sep 17 00:00:00 2001
From: Leo Singer <leo.singer@ligo.org>
Date: Sun, 18 Feb 2024 21:06:57 -0500
Subject: [PATCH] Fix disclosure arrows not showing up on mobile

We were reusing the disclosure arrows from
[usa-banner](https://designsystem.digital.gov/components/banner/)
which employ absolute positioning on tablet and smaller screen
sizes.

Fixes #1940.
---
 .../CircularEditForm.tsx                      | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/routes/_gcn.circulars.edit.$circularId/CircularEditForm.tsx b/app/routes/_gcn.circulars.edit.$circularId/CircularEditForm.tsx
index e4b4a0721..825efb857 100644
--- a/app/routes/_gcn.circulars.edit.$circularId/CircularEditForm.tsx
+++ b/app/routes/_gcn.circulars.edit.$circularId/CircularEditForm.tsx
@@ -214,15 +214,22 @@ export function CircularEditForm({
           <small>
             The subject line must contain (and should start with) the name of
             the transient, which must start with one of the{' '}
-            <button
+            <Button
+              unstyled
               type="button"
-              className="usa-banner__button margin-left-0"
+              className="usa-link"
               aria-expanded={showKeywords}
               onClick={toggleShowKeywords}
             >
-              <span className="usa-banner__button-text">known keywords</span>
-            </button>
-            .
+              <small>
+                known keywords&nbsp;
+                {showKeywords ? (
+                  <Icon.ExpandLess role="presentation" />
+                ) : (
+                  <Icon.ExpandMore role="presentation" />
+                )}
+              </small>
+            </Button>
           </small>
           {showKeywords && (
             <div className="text-base padding-x-2 padding-bottom-2">
@@ -286,14 +293,22 @@ export function CircularEditForm({
             <Link to="/docs/circulars/styleguide">style guide</Link>. References
             to Circulars, DOIs, arXiv preprints, and transients are
             automatically shown as links; see{' '}
-            <button
+            <Button
+              unstyled
               type="button"
-              className="usa-banner__button margin-left-0"
+              className="usa-link"
               aria-expanded={showBodySyntax}
               onClick={toggleShowBodySyntax}
             >
-              <span className="usa-banner__button-text">syntax.</span>
-            </button>
+              <small>
+                syntax&nbsp;
+                {showBodySyntax ? (
+                  <Icon.ExpandLess role="presentation" />
+                ) : (
+                  <Icon.ExpandMore role="presentation" />
+                )}
+              </small>
+            </Button>
           </small>
         </div>
         {showBodySyntax && (