Skip to content

Commit

Permalink
Fix disclosure arrows not showing up on mobile
Browse files Browse the repository at this point in the history
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 nasa-gcn#1940.
  • Loading branch information
lpsinger committed Feb 19, 2024
1 parent 88a2798 commit 0df1e72
Showing 1 changed file with 24 additions and 9 deletions.
33 changes: 24 additions & 9 deletions app/routes/_gcn.circulars.edit.$circularId/CircularEditForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 && (
Expand Down

0 comments on commit 0df1e72

Please sign in to comment.