Svelte: simplify and grow last commit (#62978)

This makes various tweaks and simplifications to the LastCommit component shown on the file page.
- Uses the Timestamp component
- Removes a bunch of unnecessary DOM elements and styles in favor of just using flexbox well
- Removes the max width on the last commit component, allowing it to take up as much space as is available (but leaving a healthy gap from the tabs). This was the primary reason I tackled this PR. Most commits I see are truncated to the "barely useful" level

client/web-sveltekit/src/lib/Avatar.svelte

@@ -63,6 +63,7 @@
         justify-content: center;
         position: relative;
         background: var(--secondary);
+        flex: none;
     }
 
     div::after {

client/web-sveltekit/src/lib/repo/LastCommit.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { formatDistanceToNow } from 'date-fns'
-
     import Avatar from '$lib/Avatar.svelte'
+    import Timestamp from '$lib/Timestamp.svelte'
 
     import type { LastCommitFragment } from './LastCommit.gql'
 
@@ -10,62 +9,34 @@
     $: user = lastCommit.author.person
     $: canonicalURL = lastCommit.canonicalURL
     $: commitMessage = lastCommit.subject
-    $: commitDate = formatDistanceToNow(lastCommit.author.date, { addSuffix: true })
 </script>
 
 <div class="last-commit">
-    <div class="avatar">
-        <Avatar avatar={user} />
-    </div>
-    <div class="display-name">
-        <span class="label">{user.displayName || user.name}</span>
-    </div>
-    <div class="commit-message">
-        <a href={canonicalURL}>
-            {commitMessage}
-        </a>
-    </div>
-    <div class="commit-date">
-        {commitDate}
-    </div>
+    <Avatar avatar={user} --avatar-size="1.5rem" />
+    <span>{user.displayName || user.name}</span>
+    <a href={canonicalURL}>
+        {commitMessage}
+    </a>
+    <span class="timestamp"><Timestamp date={lastCommit.author.date} /></span>
 </div>
 
 <style lang="scss">
     .last-commit {
         display: flex;
-        flex-flow: row nowrap;
         align-items: center;
-        justify-content: space-between;
-        margin-right: 0.5rem;
+        gap: 0.75rem;
         white-space: nowrap;
-        max-width: 400px;
         font-size: var(--font-size-small);
     }
 
-    .avatar {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        margin-right: 0.5rem;
-        --avatar-size: 1.5rem;
-    }
-
-    .display-name {
-        margin-right: 0.75rem;
-        color: var(--text-body);
-    }
-
-    .commit-message {
-        align-items: center;
+    a {
         color: var(--text-muted);
-        margin-right: 0.5rem;
-        max-width: 240px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
-    .commit-date {
+    .timestamp {
         color: var(--text-muted);
     }
 </style>

client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte

@@ -35,8 +35,8 @@
     import { isErrorLike, SourcegraphURL } from '$lib/common'
     import { openFuzzyFinder } from '$lib/fuzzyfinder/FuzzyFinderContainer.svelte'
     import { filesHotkey } from '$lib/fuzzyfinder/keys'
-    import Icon from '$lib/Icon.svelte'
     import Icon2 from '$lib/Icon2.svelte'
+    import Icon from '$lib/Icon.svelte'
     import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
     import LoadingSpinner from '$lib/LoadingSpinner.svelte'
     import { fetchSidebarFileTree } from '$lib/repo/api/tree'
@@ -445,7 +445,7 @@
 
         display: flex;
         align-items: center;
-        flex-flow: row nowrap;
+        gap: 2rem;
         justify-content: space-between;
         overflow: hidden;
         height: 100%;
@@ -453,7 +453,12 @@
         color: var(--text-body);
 
         :global([data-tabs]) {
-            width: 100%;
+            flex: 1;
+        }
+        .last-commit {
+            min-width: 0;
+            max-width: content;
+            margin-right: 0.5rem;
         }
     }
 </style>