From 38d1f99387afe3357d8241c852dc300e92bcbed9 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 6 Nov 2023 13:59:53 -0800
Subject: [PATCH] fix: reduces padding on mobile (#2476)

---
 assets/components.d.ts              |  1 +
 assets/components/PageWithLinks.vue | 12 ++++++++++++
 assets/layouts/default.vue          |  4 +---
 assets/pages/[...all].vue           | 12 +++++++-----
 assets/pages/content/[id].vue       | 11 ++++-------
 assets/pages/index.vue              |  7 ++-----
 assets/pages/settings.vue           |  7 ++-----
 7 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 assets/components/PageWithLinks.vue

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 71b6fcaddc78..e4f0ac8a44f1 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -59,6 +59,7 @@ declare module 'vue' {
     'Octicon:container24': typeof import('~icons/octicon/container24')['default']
     'Octicon:download24': typeof import('~icons/octicon/download24')['default']
     'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
+    PageWithLinks: typeof import('./components/PageWithLinks.vue')['default']
     'Ph:command': typeof import('~icons/ph/command')['default']
     'Ph:computerTower': typeof import('~icons/ph/computer-tower')['default']
     'Ph:controlBold': typeof import('~icons/ph/control-bold')['default']
diff --git a/assets/components/PageWithLinks.vue b/assets/components/PageWithLinks.vue
new file mode 100644
index 000000000000..652deda03a6c
--- /dev/null
+++ b/assets/components/PageWithLinks.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-8 px-4 py-8 md:px-8">
+    <section>
+      <links />
+    </section>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
index 03141409d620..b61b5e0b59dd 100644
--- a/assets/layouts/default.vue
+++ b/assets/layouts/default.vue
@@ -8,9 +8,7 @@
       <pane min-size="10">
         <splitpanes>
           <pane class="router-view min-h-screen">
-            <Suspense>
-              <router-view></router-view>
-            </Suspense>
+            <router-view></router-view>
           </pane>
           <template v-if="!isMobile">
             <pane v-for="other in activeContainers" :key="other.id">
diff --git a/assets/pages/[...all].vue b/assets/pages/[...all].vue
index d507ce1d25d0..68cff9e89667 100644
--- a/assets/pages/[...all].vue
+++ b/assets/pages/[...all].vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="hero min-h-screen bg-base-200">
-    <div class="hero-content text-center">
-      <div class="max-w-md">
-        <p class="py-6 text-2xl font-bold">{{ $t("error.page-not-found") }}</p>
+  <page-with-links>
+    <div class="hero min-h-screen bg-base-200">
+      <div class="hero-content text-center">
+        <div class="max-w-md">
+          <p class="py-6 text-2xl font-bold">{{ $t("error.page-not-found") }}</p>
+        </div>
       </div>
     </div>
-  </div>
+  </page-with-links>
 </template>
 
 <script lang="ts" setup>
diff --git a/assets/pages/content/[id].vue b/assets/pages/content/[id].vue
index e10ef5e93365..f68225d1efa9 100644
--- a/assets/pages/content/[id].vue
+++ b/assets/pages/content/[id].vue
@@ -1,18 +1,15 @@
 <template>
-  <div class="flex flex-col gap-8 p-8">
+  <page-with-links>
     <section>
-      <links />
+      <article class="prose" v-html="data.content" v-if="data"></article>
     </section>
-    <section>
-      <article class="prose" v-html="data!.content"></article>
-    </section>
-  </div>
+  </page-with-links>
 </template>
 
 <script lang="ts" setup>
 const { id } = defineProps<{ id: string }>();
 
-const { data } = await useFetch(() => withBase("/api/content/" + id), {
+const { data } = useFetch(() => withBase("/api/content/" + id), {
   refetch: true,
 })
   .get()
diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index eb22c7be700b..08e57af22e6f 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="flex flex-col gap-16 p-8">
-    <section>
-      <links />
-    </section>
+  <page-with-links class="gap-16">
     <section>
       <div class="stats grid bg-base-lighter shadow">
         <div class="stat">
@@ -28,7 +25,7 @@
     <section>
       <container-table :containers="runningContainers"></container-table>
     </section>
-  </div>
+  </page-with-links>
 </template>
 
 <script lang="ts" setup>
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 2aeb014f04d5..8b2d2f9595ff 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="flex flex-col gap-8 p-8">
-    <section>
-      <links />
-    </section>
+  <page-with-links>
     <section>
       <div class="has-underline">
         <h2>{{ $t("settings.about") }}</h2>
@@ -88,7 +85,7 @@
         <toggle v-model="automaticRedirect">{{ $t("settings.automatic-redirect") }}</toggle>
       </div>
     </section>
-  </div>
+  </page-with-links>
 </template>
 
 <script lang="ts" setup>