Enhance mobile support: responsive layouts, touch-friendly dividers, and improved accessibility adjustments across examples.

tomkp · tomkp · commit 7741b9809507 · 2025-12-22T22:34:57.000Z
diff --git a/examples/BasicExample.tsx b/examples/BasicExample.tsx
@@ -43,12 +43,13 @@ export function BasicExample() {
       </div>
       <div className="example-content">
         <SplitPane direction={direction}>
-          <Pane minSize={80} defaultSize={direction === 'vertical' ? '40%' : '30%'}>
+          <Pane
+            minSize={80}
+            defaultSize={direction === 'vertical' ? '40%' : '30%'}
+          >
             <div className="pane-content sidebar">
               <h2>Sidebar</h2>
-              <p>
-                Min size: 80px. Drag the divider to resize.
-              </p>
+              <p>Min size: 80px. Drag the divider to resize.</p>
               <div className="file-tree">
                 <div className="file-tree-item folder">src</div>
                 <div
@@ -71,9 +72,7 @@ export function BasicExample() {
           <Pane minSize={100}>
             <div className="pane-content editor">
               <h2>Main Content</h2>
-              <p>
-                Use arrow keys when focused for keyboard control.
-              </p>
+              <p>Use arrow keys when focused for keyboard control.</p>
               <div className="code-block">
                 <code>
                   {`import { SplitPane, Pane } from 'react-split-pane';
diff --git a/examples/NestedExample.tsx b/examples/NestedExample.tsx
@@ -12,9 +12,7 @@ export function NestedExample() {
     <div className="example-container">
       <div className="example-info">
         <h2>Nested Split Panes</h2>
-        <p>
-          Create complex layouts by nesting split panes. IDE-style layout.
-        </p>
+        <p>Create complex layouts by nesting split panes. IDE-style layout.</p>
       </div>
       <div className="example-content">
         <SplitPane direction={isMobile ? 'vertical' : 'horizontal'}>
diff --git a/examples/TouchExample.tsx b/examples/TouchExample.tsx
@@ -4,7 +4,9 @@ import { SplitPane, Pane } from '../src';
 export function TouchExample() {
   const [resizeSource, setResizeSource] = useState<string | null>(null);
   const [sizes, setSizes] = useState<number[]>([]);
-  const [direction, setDirection] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
+    'horizontal'
+  );
 
   // Use vertical layout on mobile for better touch experience
   useEffect(() => {
@@ -18,12 +20,11 @@ export function TouchExample() {
     <div className="example-container">
       <div className="example-info">
         <h2>Touch Support</h2>
-        <p>
-          Full touch support for mobile. Drag the divider with your finger!
-        </p>
+        <p>Full touch support for mobile. Drag the divider with your finger!</p>
         {resizeSource && (
           <p className="size-display">
-            Via: <strong className={`source-${resizeSource}`}>{resizeSource}</strong>
+            Via:{' '}
+            <strong className={`source-${resizeSource}`}>{resizeSource}</strong>
             {sizes.length > 0 && (
               <span> | {sizes.map((s) => Math.round(s)).join('/')}px</span>
             )}
diff --git a/examples/index.html b/examples/index.html
@@ -2,9 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"
+    />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
     <meta name="theme-color" content="#1a1a2e" />
     <title>React Split Pane Examples</title>
   </head>
