From 39caf79e61e948dad91fb111c8641c6758c5c384 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Bert?=
 <63123542+m-bert@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:30:03 +0100
Subject: [PATCH] [docs] Add `Swipe & Scroll` guide (#3254)

## Description

At the beginning of new web implementation `Swipeable` component was
blocking `scroll` on `web`. We did fix it by adding `touch-action:
pan-y;` as a property to our handlers, and making it default in `Pan`
used under the hood of `Swipeable`.

However, some of our users prefer to create their own versions of
`Swipeable` - that's where they encounter this issue.

This PR adds guide section about fixing this problem.

It also changes font size of `code` inside headers such that it is no
longer ridiculously small.
## Test plan

Run docs
---
 docs/docs/guides/swipe-and-scroll.md | 12 ++++++++++++
 docs/src/css/typography.css          |  5 +++++
 2 files changed, 17 insertions(+)
 create mode 100644 docs/docs/guides/swipe-and-scroll.md

diff --git a/docs/docs/guides/swipe-and-scroll.md b/docs/docs/guides/swipe-and-scroll.md
new file mode 100644
index 0000000000..296f888cf7
--- /dev/null
+++ b/docs/docs/guides/swipe-and-scroll.md
@@ -0,0 +1,12 @@
+---
+id: swipe-and-scroll
+title: Custom swipeable components inside ScrollView (web)
+---
+
+While we recommend using our own [`ReanimatedSwipeable`](../components/reanimated_swipeable.md) component, creating your own version of swipeable gives you more control over its behavior. Common issue here is that after creating your own swipeable component, scroll does not work. In that case, try adding [`touchAction`](../gestures/gesture-detector.md#touchaction-web-only) set to `"pan-y"`, like this:
+
+```jsx
+<GestureDetector gesture={...} ... touchAction="pan-y">
+  ...
+</GestureDetector>
+```
diff --git a/docs/src/css/typography.css b/docs/src/css/typography.css
index d8fc415e6b..42258d11a6 100644
--- a/docs/src/css/typography.css
+++ b/docs/src/css/typography.css
@@ -183,6 +183,11 @@ code {
   border-bottom: 1px solid var(--ifm-font-color-base);
 }
 
+.markdown h2 code {
+  font-size: 22px;
+  font-weight: 600;
+}
+
 /* Sidebar */
 [class*='menu__list-item-collapsible'] a {
   font-family: var(--swm-title-font);