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,9 +29,6 @@ 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="[
       {
@@ -65,20 +62,12 @@ const changelogEntries = computed(() =>
       :first="index === 0"
       :show-type="filter === undefined"
       has-link
-        class="relative z-10"
+      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/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;

packages/ui/src/components/changelog/ChangelogEntry.vue

@@ -5,11 +5,11 @@
         class="h-4 w-4 rounded-full border-2 border-solid border-button-border"
         :class="recent || first ? 'bg-brand' : 'bg-button-bg'"
       />
+      <div class="flex flex-wrap items-center gap-2">
         <AutoLink
           :to="
             hasLink ? `/news/changelog/${entry.product}/${entry.version ?? entry.date.unix()}` : ''
           "
-        class="flex items-center gap-2"
           :class="{ 'hover:underline': hasLink }"
         >
           <h2 class="flex items-center gap-2 m-0 text-xl font-extrabold text-contrast">
@@ -21,10 +21,14 @@
               {{ entry.version ?? formattedDate }}
             </span>
           </h2>
-        <div v-if="entry.version" v-tooltip="dateTooltip" :class="{ 'cursor-help': dateTooltip }">
-          {{ formattedDate }}
-        </div>
         </AutoLink>
+        <div v-if="recent" v-tooltip="dateTooltip" class="hidden sm:flex" :class="{ 'cursor-help': dateTooltip }">
+          {{ relativeDate }}
+        </div>
+        <div v-else-if="entry.version" :class="{ 'cursor-help': dateTooltip }">
+          {{ longDate }}
+        </div>
+      </div>
     </div>
     <div class="ml-8 mt-3 rounded-2xl bg-bg-raised px-4 py-3">
       <div class="changelog-body" v-html="renderHighlightedString(entry.body)" />
@@ -63,6 +67,10 @@ const formattedDate = computed(() =>
   props.entry.version ? props.entry.date.fromNow() : props.entry.date.format('MMMM D, YYYY'),
 )
 
+const relativeDate = computed(() => props.entry.date.fromNow())
+const longDate = computed(() => props.entry.date.format('MMMM D, YYYY'))
+const versionName = computed(() => props.entry.version ?? longDate.value)
+
 const messages = defineMessages({
   web: {
     id: 'changelog.product.web',
@@ -85,6 +93,7 @@ const messages = defineMessages({
 <style lang="scss" scoped>
 :deep(.changelog-body) {
   line-height: 1.4;
+  word-break: break-word;
 
   h1,
   h2,

packages/utils/changelog.ts

@@ -10,6 +10,15 @@ export type VersionEntry = {
 }
 
 const VERSIONS: VersionEntry[] = [
+  {
+    date: `2025-02-11T13:00:00-09:00`,
+    product: 'web',
+    body: `### Improvements
+- Added project issues link to report page if present.
+- Added relative times for all recent versions to changelog page.
+- Added header to changelog sub-pages.
+- Fixed various padding issues and changelog overlapping navbar on mobile.`,
+  },
   {
     date: `2025-02-11T09:00:00-09:00`,
     product: 'web',
@@ -84,7 +93,7 @@ Contributed by [IMB11](https://github.com/modrinth/code/pull/1301).`,
     product: 'web',
     body: `### Improvements
 - Tags on project pages are now clickable to view other projects with that tag (Contributed by [Neddo](https://github.com/modrinth/code/pull/3126))
-- You can now send someone a link to the download interface with a specific version and loader selected, like so: https://modrinth.com/mod/sodium?version=1.21.2&loader=quilt#download (Contributed by [AwakenedRedstone](https://github.com/modrinth/code/pull/3138)`,
+- You can now send someone a link to the download interface with a specific version and loader selected, like so: https://modrinth.com/mod/sodium?version=1.21.2&loader=quilt#download (Contributed by [AwakenedRedstone](https://github.com/modrinth/code/pull/3138))`,
   },
   {
     date: `2024-12-25T14:00:00-09:00`,