Fix some changelog issues, and broader mobile padding issues (#3246)

apps/frontend/src/layouts/default.vue

@@ -1444,10 +1444,6 @@ function hideStagingBanner() {
   .mobile-navigation {
     display: flex;
   }
-
-  main {
-    padding-top: 1.5rem;
-  }
 }
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>

apps/frontend/src/pages/news/changelog.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="page experimental-styles-within">
+    <h1 class="m-0 text-3xl font-extrabold">Changelog</h1>
+    <p class="my-3">Keep up-to-date on what's new with Modrinth.</p>
+    <NuxtPage />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  padding: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 56rem;
+}
+</style>

apps/frontend/src/pages/news/changelog/[product]/[date].vue

@@ -32,10 +32,10 @@ if (!changelogEntry.value) {
 </script>
 
 <template>
-  <div v-if="changelogEntry" class="page experimental-styles-within">
+  <div v-if="changelogEntry">
     <nuxt-link
       :to="`/news/changelog?filter=${changelogEntry.product}`"
-      class="mb-4 flex w-fit items-center gap-2 text-link"
+      class="mb-4 mt-4 flex w-fit items-center gap-2 text-link"
     >
       <ChevronLeftIcon /> View full changelog
     </nuxt-link>
@@ -43,19 +43,12 @@ if (!changelogEntry.value) {
       <div class="absolute flex h-full w-4 justify-center">
         <div class="timeline-indicator" :class="{ first: isFirst }" />
       </div>
-      <ChangelogEntry :entry="changelogEntry" :first="isFirst" show-type class="relative z-10" />
+      <ChangelogEntry :entry="changelogEntry" :first="isFirst" show-type class="relative z-[1]" />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.page {
-  padding: 0.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 56rem;
-}
-
 .timeline-indicator {
   background-image: linear-gradient(
     to bottom,

apps/frontend/src/pages/news/changelog/index.vue

@@ -29,56 +29,45 @@ const changelogEntries = computed(() =>
 </script>
 
 <template>
-  <div class="page experimental-styles-within">
-    <h1 class="m-0 text-3xl font-extrabold">Changelog</h1>
-    <p class="my-3">Keep up-to-date on what's new with Modrinth.</p>
-    <NavTabs
-      :links="[
-        {
-          label: 'All',
-          href: '',
-        },
-        {
-          label: 'Website',
-          href: 'web',
-        },
-        {
-          label: 'Servers',
-          href: 'servers',
-        },
-        {
-          label: 'App',
-          href: 'app',
-        },
-      ]"
-      query="filter"
-      class="mb-4"
-    />
-    <div class="relative flex flex-col gap-4 pb-6">
-      <div class="absolute flex h-full w-4 justify-center">
-        <div class="timeline-indicator" />
-      </div>
-      <ChangelogEntry
-        v-for="(entry, index) in changelogEntries"
-        :key="entry.date"
-        :entry="entry"
-        :first="index === 0"
-        :show-type="filter === undefined"
-        has-link
-        class="relative z-10"
-      />
+  <NavTabs
+    :links="[
+      {
+        label: 'All',
+        href: '',
+      },
+      {
+        label: 'Website',
+        href: 'web',
+      },
+      {
+        label: 'Servers',
+        href: 'servers',
+      },
+      {
+        label: 'App',
+        href: 'app',
+      },
+    ]"
+    query="filter"
+    class="mb-4"
+  />
+  <div class="relative flex flex-col gap-4 pb-6">
+    <div class="absolute flex h-full w-4 justify-center">
+      <div class="timeline-indicator" />
     </div>
+    <ChangelogEntry
+      v-for="(entry, index) in changelogEntries"
+      :key="entry.date"
+      :entry="entry"
+      :first="index === 0"
+      :show-type="filter === undefined"
+      has-link
+      class="relative z-[1]"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.page {
-  padding: 0.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 56rem;
-}
-
 .timeline-indicator {
   background-image: linear-gradient(
     to bottom,

apps/frontend/src/pages/report.vue

@@ -607,7 +607,7 @@ const messages = defineMessages({
 
 <style scoped lang="scss">
 .page {
-  padding: 0.5rem;
+  padding: 1rem;
   margin-left: auto;
   margin-right: auto;
   max-width: 56rem;