diff --git a/fixtures/view-transition/src/components/Page.css b/fixtures/view-transition/src/components/Page.css
index 4bdf5644efadf..e7d876681d872 100644
--- a/fixtures/view-transition/src/components/Page.css
+++ b/fixtures/view-transition/src/components/Page.css
@@ -8,7 +8,16 @@
 }
 
 .swipe-recognizer {
-  width: 200px;
-  border: 1px solid #333333;
+  width: 300px;
+  background: #eee;
   border-radius: 10px;
+  padding: 20px;
 }
+
+.button {
+  background: #000;
+  color: #fff;
+  border: 0px;
+  border-radius: 5px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js
index 48288da25234f..ee4b95331f759 100644
--- a/fixtures/view-transition/src/components/Page.js
+++ b/fixtures/view-transition/src/components/Page.js
@@ -74,75 +74,80 @@ export default function Page({url, navigate}) {
     </ViewTransition>
   );
   return (
-    <div>
-      <button
-        onClick={() => {
-          navigate(url === '/?b' ? '/?a' : '/?b');
-        }}>
-        {url === '/?b' ? 'A' : 'B'}
-      </button>
-      <ViewTransition className="none">
-        <div>
-          <ViewTransition>
-            <div>
-              <ViewTransition className={transitions['slide-on-nav']}>
-                <h1>{!show ? 'A' : 'B'}</h1>
-              </ViewTransition>
-            </div>
-          </ViewTransition>
-          <ViewTransition
-            className={{
-              'navigation-back': transitions['slide-right'],
-              'navigation-forward': transitions['slide-left'],
-            }}>
-            <h1>{!show ? 'A' + counter : 'B' + counter}</h1>
-          </ViewTransition>
-          {show ? (
-            <div>
-              {a}
-              {b}
-            </div>
-          ) : (
-            <div>
-              {b}
-              {a}
-            </div>
-          )}
-          <ViewTransition>
-            {show ? <div>hello{exclamation}</div> : <section>Loading</section>}
-          </ViewTransition>
-          <p>scroll me</p>
-          <p>
-            <Id />
-          </p>
-          <p></p>
-          <p></p>
-          <p></p>
-          <p></p>
-          <p></p>
-          <div className="swipe-recognizer">
-            <SwipeRecognizer
-              action={swipeAction}
-              gesture={startGesture}
-              direction={show ? 'left' : 'right'}>
-              Swipe me
-            </SwipeRecognizer>
-          </div>
-          <p></p>
-          <p></p>
-          {show ? null : (
+    <div className="swipe-recognizer">
+      <SwipeRecognizer
+        action={swipeAction}
+        gesture={startGesture}
+        direction={show ? 'left' : 'right'}>
+        <button
+          className="button"
+          onClick={() => {
+            navigate(url === '/?b' ? '/?a' : '/?b');
+          }}>
+          {url === '/?b' ? 'Goto A' : 'Goto B'}
+        </button>
+        <ViewTransition className="none">
+          <div>
             <ViewTransition>
-              <div>world{exclamation}</div>
+              <div>
+                <ViewTransition className={transitions['slide-on-nav']}>
+                  <h1>{!show ? 'A' : 'B' + counter}</h1>
+                </ViewTransition>
+              </div>
+            </ViewTransition>
+            <ViewTransition
+              className={{
+                'navigation-back': transitions['slide-right'],
+                'navigation-forward': transitions['slide-left'],
+              }}>
+              <h1>{!show ? 'A' + counter : 'B'}</h1>
             </ViewTransition>
-          )}
-          <Activity mode={show ? 'visible' : 'hidden'}>
+            {show ? (
+              <div>
+                {a}
+                {b}
+              </div>
+            ) : (
+              <div>
+                {b}
+                {a}
+              </div>
+            )}
             <ViewTransition>
-              <div>!!</div>
+              {show ? (
+                <div>hello{exclamation}</div>
+              ) : (
+                <section>Loading</section>
+              )}
             </ViewTransition>
-          </Activity>
-          {show ? <Component /> : null}
-        </div>
-      </ViewTransition>
+            <p>
+              <Id />
+            </p>
+            {show ? null : (
+              <ViewTransition>
+                <div>world{exclamation}</div>
+              </ViewTransition>
+            )}
+            <Activity mode={show ? 'visible' : 'hidden'}>
+              <ViewTransition>
+                <div>!!</div>
+              </ViewTransition>
+            </Activity>
+            <p>these</p>
+            <p>rows</p>
+            <p>exist</p>
+            <p>to</p>
+            <p>test</p>
+            <p>scrolling</p>
+            <p>content</p>
+            <p>out</p>
+            <p>of</p>
+            <p>the</p>
+            <p>viewport</p>
+            {show ? <Component /> : null}
+          </div>
+        </ViewTransition>
+      </SwipeRecognizer>
     </div>
   );
 }