fix: reduces padding on mobile (#2476)

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']

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>

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">

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>

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()

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>

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>