From e87f52f50a0de2286ed61587b7706b3643356e96 Mon Sep 17 00:00:00 2001
From: Ali Sherief <ali@notatether.com>
Date: Wed, 21 Sep 2022 12:16:44 +0000
Subject: [PATCH] Fix document not scrolling in iOS (all browsers)

This patches a bug where users cannot scroll a document on iOS,
because iOS does not allow iframes to be scrolled.

See https://davidwalsh.name/scroll-iframes-ios for details.
---
 src/static/skins/colibris/src/layout.css | 15 +++++++++++++++
 src/templates/pad.html                   |  4 +++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
index 1ec3886c8f56..4ce234a47294 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -1,3 +1,18 @@
+.scroll-wrapper { 
+  display: flex;
+  min-width: 100vw;
+}
+
+@supports (-webkit-touch-callout: none)  {
+  .scroll-wrapper {
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+  }                      
+                       
+  .scroll-wrapper iframe {}
+                      
+}
+
 #outerdocbody {
   margin: 0 auto;
   padding-top: 20px;
diff --git a/src/templates/pad.html b/src/templates/pad.html
index bc3cec88e255..45100b0708b5 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -79,7 +79,9 @@
 
   <% e.begin_block("afterEditbar"); %><% e.end_block(); %>
 
-  <div id="editorcontainerbox" class="flex-layout">
+      <div class="scroll-wrapper">
+          <div id="editorcontainerbox" class="flex-layout">
+      </div>
 
       <% e.begin_block("editorContainerBox"); %>