Hide the flipbook instructions when data is pasted (#1072)

## Summary:
Previously, the instructions took up a bunch of screen real estate by
default. Once someone has entered data in the flipbook, the instructions
have served their purpose and can go away.

I've also moved the instructions below the text input so the layout
doesn't shift when the instructions disappear.

Issue: none

Test plan:

```
yarn dev
open http://localhost:5173/#flipbook
```

Follow the instructions onscreen to get some data in the box. The
instructions should vanish. Delete everything from the box and the
instructions should reappear.

Author: benchristel

Reviewers: jeremywiebe, mark-fitzgerald, nedredmond, nishasy

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1072

dev/flipbook.tsx

@@ -41,26 +41,10 @@ export function Flipbook() {
 
     const question = selectCurrentQuestion(state);
 
+    const noTextEntered = state.questions.trim() === "";
+
     return (
         <View style={{padding: Spacing.medium_16}}>
-            <details open>
-                <summary>Instructions (click to show/hide)</summary>
-                <ol>
-                    <li>
-                        <p>
-                            Run a command like one of the following to copy
-                            question data to your clipboard.
-                        </p>
-                        <code>
-                            <pre>{exampleCommands}</pre>
-                        </code>
-                    </li>
-                    <li>
-                        <p>Paste the data in the box below.</p>
-                    </li>
-                </ol>
-            </details>
-
             <textarea
                 wrap={"off"}
                 rows={10}
@@ -78,6 +62,23 @@ export function Flipbook() {
                     Next
                 </Button>
             </View>
+            <div style={{display: noTextEntered ? "block" : "none"}}>
+                <h2>Instructions</h2>
+                <ol>
+                    <li>
+                        <p>
+                            Run a command like one of the following to copy
+                            question data to your clipboard.
+                        </p>
+                        <code>
+                            <pre>{exampleCommands}</pre>
+                        </code>
+                    </li>
+                    <li>
+                        <p>Paste the data in the box above.</p>
+                    </li>
+                </ol>
+            </div>
             {question != null && (
                 <SideBySideQuestionRenderer question={question} />
             )}