From 08fd291cf66f876922b4c77297e5e7ff4f4c18f9 Mon Sep 17 00:00:00 2001
From: Katrin Yordanova <katrin.yordanova@crust.tech>
Date: Wed, 12 Jun 2024 09:53:18 +0300
Subject: [PATCH] Fix bottom part of page being cut off for ios

---
 client/web/admin/src/views/Layout.vue            | 12 +++++++++++-
 client/web/compose/src/views/Namespace/Index.vue | 11 +++++++++++
 client/web/privacy/src/views/Layout.vue          | 12 +++++++++++-
 client/web/reporter/src/views/Layout.vue         | 12 +++++++++++-
 client/web/workflow/src/views/Layout.vue         | 12 +++++++++++-
 5 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/client/web/admin/src/views/Layout.vue b/client/web/admin/src/views/Layout.vue
index a63a49447..37bdb6527 100644
--- a/client/web/admin/src/views/Layout.vue
+++ b/client/web/admin/src/views/Layout.vue
@@ -73,7 +73,7 @@
           }"
         />
       </template>
-      <div class="d-flex flex-column w-100 flex-fill">
+      <div class="d-flex flex-column w-100 flex-fill pb-safari">
         <router-view />
       </div>
     </main>
@@ -224,3 +224,13 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+/* fixes bottom part of page being cut off */
+/* CSS specific to iOS devices */
+@supports (-webkit-touch-callout: none) {
+  .pb-safari {
+    padding-bottom: 5.5em;
+  }
+}
+</style>
diff --git a/client/web/compose/src/views/Namespace/Index.vue b/client/web/compose/src/views/Namespace/Index.vue
index 04eb4a7f6..68fb6379b 100644
--- a/client/web/compose/src/views/Namespace/Index.vue
+++ b/client/web/compose/src/views/Namespace/Index.vue
@@ -27,6 +27,7 @@
 
     <router-view
       v-if="loaded"
+      class="pb-safari"
     />
   </div>
 </template>
@@ -87,3 +88,13 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+/* fixes bottom part of page being cut off */
+/* CSS specific to iOS devices */
+@supports (-webkit-touch-callout: none) {
+  .pb-safari {
+    padding-bottom: 5.5em;
+  }
+}
+</style>
diff --git a/client/web/privacy/src/views/Layout.vue b/client/web/privacy/src/views/Layout.vue
index a3b083177..d1d91aa94 100644
--- a/client/web/privacy/src/views/Layout.vue
+++ b/client/web/privacy/src/views/Layout.vue
@@ -69,7 +69,7 @@
       </template>
 
       <div
-        class="d-flex flex-column w-100"
+        class="d-flex flex-column w-100 pb-safari"
       >
         <router-view
           class="flex-grow-1 overflow-auto"
@@ -130,3 +130,13 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+/* fixes bottom part of page being cut off */
+/* CSS specific to iOS devices */
+@supports (-webkit-touch-callout: none) {
+  .pb-safari {
+    padding-bottom: 5.5em;
+  }
+}
+</style>
diff --git a/client/web/reporter/src/views/Layout.vue b/client/web/reporter/src/views/Layout.vue
index 695fd28c7..d291163eb 100644
--- a/client/web/reporter/src/views/Layout.vue
+++ b/client/web/reporter/src/views/Layout.vue
@@ -71,7 +71,7 @@
       </template>
 
       <div
-        class="d-flex flex-column w-100"
+        class="d-flex flex-column w-100 pb-safari"
       >
         <router-view
           class="flex-grow-1 overflow-auto"
@@ -184,3 +184,13 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+/* fixes bottom part of page being cut off */
+/* CSS specific to iOS devices */
+@supports (-webkit-touch-callout: none) {
+  .pb-safari {
+    padding-bottom: 5.5em;
+  }
+}
+</style>
diff --git a/client/web/workflow/src/views/Layout.vue b/client/web/workflow/src/views/Layout.vue
index d0b447ece..8412c7854 100644
--- a/client/web/workflow/src/views/Layout.vue
+++ b/client/web/workflow/src/views/Layout.vue
@@ -50,7 +50,7 @@
       </c-sidebar>
     </aside>
 
-    <main class="d-inline-flex h-100 overflow-auto">
+    <main class="d-inline-flex h-100 overflow-auto pb-safari">
       <!--
         Content spacer
         Large and xl screens should push in content when the nav is expanded
@@ -144,3 +144,13 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+/* fixes bottom part of page being cut off */
+/* CSS specific to iOS devices */
+@supports (-webkit-touch-callout: none) {
+  .pb-safari {
+    padding-bottom: 5.5em;
+  }
+}
+</style>