Merge pull request 'fix/deep-link-views: use proper #Content wrapper' (#184) from deep-link-views-safe-area-inset into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/pulls/184

src/views/DeepLinkErrorView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="deep-link-error">
+  <!-- CONTENT -->
-    <div class="safe-area-spacer"></div>
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <h1>Invalid Deep Link</h1>
     <div class="error-details">
       <div class="error-message">
@@ -39,7 +39,7 @@
         </li>
       </ul>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -114,18 +114,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.deep-link-error {
-  padding-top: 60px;
-  padding-left: 20px;
-  padding-right: 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.safe-area-spacer {
-  height: env(safe-area-inset-top);
-}
-
 h1 {
   color: #ff4444;
   margin-bottom: 24px;

src/views/DeepLinkRedirectView.vue

@@ -1,11 +1,8 @@
 <template>
   <!-- CONTENT -->
-  <section id="Content" class="relative w-[100vw] h-[100vh]">
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <div
-      class="p-6 bg-white w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto"
-    >
     <div class="mb-4">
-        <h1 class="text-xl text-center font-semibold relative mb-4">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
         Redirecting to Time Safari
       </h1>
 
@@ -58,16 +55,12 @@
         <div class="text-center text-sm text-gray-500 mt-4">
           <p v-if="isMobile">
             Or manually open:
-              <code class="bg-gray-100 px-2 py-1 rounded">{{
+            <code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
-                deepLinkUrl
-              }}</code>
           </p>
           <p v-else>
             If you have the Time Safari app installed, you can also copy this
             link:
-              <code class="bg-gray-100 px-2 py-1 rounded">{{
+            <code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
-                deepLinkUrl
-              }}</code>
           </p>
         </div>
 
@@ -91,7 +84,6 @@
         <p>Processing redirect...</p>
       </div>
     </div>
-    </div>
   </section>
 </template>