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

Author: Prospector

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,30 +32,23 @@ 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>
     <div class="relative flex flex-col gap-4 pb-6">
       <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;

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

@@ -5,26 +5,30 @@
         class="h-4 w-4 rounded-full border-2 border-solid border-button-border"
         :class="recent || first ? 'bg-brand' : 'bg-button-bg'"
       />
-      <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">
-          <template v-if="showType">
-            {{ formatMessage(messages[entry.product]) }}
-            <div class="w-2 h-2 rounded-full bg-secondary" />
-          </template>
-          <span :class="{ 'text-primary font-bold': showType }">
-            {{ entry.version ?? formattedDate }}
-          </span>
-        </h2>
-        <div v-if="entry.version" v-tooltip="dateTooltip" :class="{ 'cursor-help': dateTooltip }">
-          {{ formattedDate }}
+      <div class="flex flex-wrap items-center gap-2">
+        <AutoLink
+          :to="
+            hasLink ? `/news/changelog/${entry.product}/${entry.version ?? entry.date.unix()}` : ''
+          "
+          :class="{ 'hover:underline': hasLink }"
+        >
+          <h2 class="flex items-center gap-2 m-0 text-xl font-extrabold text-contrast">
+            <template v-if="showType">
+              {{ formatMessage(messages[entry.product]) }}
+              <div class="w-2 h-2 rounded-full bg-secondary" />
+            </template>
+            <span :class="{ 'text-primary font-bold': showType }">
+              {{ entry.version ?? formattedDate }}
+            </span>
+          </h2>
+        </AutoLink>
+        <div v-if="recent" v-tooltip="dateTooltip" class="hidden sm:flex" :class="{ 'cursor-help': dateTooltip }">
+          {{ relativeDate }}
         </div>
-      </AutoLink>
+        <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`,