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

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,