Tweaked hide/show UI in demo

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>

packages/react-resizable-panels-website/src/styles.module.css

@@ -61,15 +61,17 @@
   border-top: 1px solid #4a4c50;
 }
 
-.Button {
+.Button,
+.ButtonBottom {
   color: #ffffff;
   background: #2a3343;
   border: 1px solid #18181a;
   border-radius: 0.25rem;
   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;
+}

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"
 }