From 8608c273e06a2841fc35a1aba255b9e697413a90 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Fri, 23 Dec 2022 11:39:21 -0500
Subject: [PATCH] Tweaked hide/show UI in demo

---
 .../src/VerticalGroup.tsx                         | 15 +++++++++------
 .../src/styles.module.css                         | 12 ++++++++++--
 tsconfig.json                                     |  6 +-----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/react-resizable-panels-website/src/VerticalGroup.tsx b/packages/react-resizable-panels-website/src/VerticalGroup.tsx
index eae4f3039..bfa5f2341 100644
--- a/packages/react-resizable-panels-website/src/VerticalGroup.tsx
+++ b/packages/react-resizable-panels-website/src/VerticalGroup.tsx
@@ -36,12 +36,15 @@ export function VerticalGroup() {
             It uses the <code>minSize</code> prop to prevent it from shrinking
             to less than 35% of the total height.
           </p>
+
           {isPanelHidden && (
-            <p className={styles.ParagraphOfText}>
-              <button className={styles.Button} onClick={showPanel}>
-                Show the bottom panel
-              </button>
-            </p>
+            <button
+              className={styles.ButtonBottom}
+              onClick={showPanel}
+              id="blah"
+            >
+              Show panel
+            </button>
           )}
         </div>
       </Panel>
@@ -64,7 +67,7 @@ export function VerticalGroup() {
             </p>
             <p className={styles.ParagraphOfText}>
               <button className={styles.Button} onClick={hidePanel}>
-                Hide this panel
+                Hide panel
               </button>
             </p>
           </div>
diff --git a/packages/react-resizable-panels-website/src/styles.module.css b/packages/react-resizable-panels-website/src/styles.module.css
index 5fed37a49..ebf8f68e6 100644
--- a/packages/react-resizable-panels-website/src/styles.module.css
+++ b/packages/react-resizable-panels-website/src/styles.module.css
@@ -61,7 +61,8 @@
   border-top: 1px solid #4a4c50;
 }
 
-.Button {
+.Button,
+.ButtonBottom {
   color: #ffffff;
   background: #2a3343;
   border: 1px solid #18181a;
@@ -69,7 +70,8 @@
   padding: 0.25rem 0.5rem;
   cursor: pointer;
 }
-.Button:hover {
+.Button:hover,
+.ButtonBottom:hover {
   background: #454950;
 }
 
@@ -93,3 +95,9 @@
 .VerticalDot {
   background-color: var(--color-vertical);
 }
+
+.ButtonBottom {
+  position: absolute;
+  bottom: 1ch;
+  right: 1ch;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 72fb4a7ad..03e354b18 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,11 +7,7 @@
     "jsx": "react-jsx"
   },
   "exclude": ["node_modules"],
-  "include": [
-    "declaration.d.ts",
-    "packages/**/*.ts",
-    "packages/**/*.tsx"
-  ],
+  "include": ["declaration.d.ts", "packages/**/*.ts", "packages/**/*.tsx"],
   "strict": true,
   "target": "es2015"
 }