Force long URLs to wrap, shrink DiffTitle

Author: jpenilla

web/src/routes/+page.svelte

@@ -58,9 +58,9 @@
 
 <div class="flex min-h-screen flex-col">
     <MenuBar />
-    <div bind:this={mainContainerRef} class="relative flex grow flex-row justify-center">
+    <div bind:this={mainContainerRef} class="relative flex max-w-full grow flex-row justify-center">
         <Sidebar closeOnClick={mainContainerRef} />
-        <div class="flex grow flex-col">
+        <div class="flex max-w-full grow flex-col">
             {#if viewer.diffMetadata !== null}
                 <div class="flex flex-wrap gap-2 px-3 pt-2">
                     <DiffTitle meta={viewer.diffMetadata} />
@@ -107,7 +107,7 @@
                                 </div>
                             {/if}
                             {#if !viewer.fileStates[index].collapsed && value.type === "text" && (!value.patchHeaderDiffOnly || !globalOptions.omitPatchHeaderOnlyHunks)}
-                                <div class="mb border-b">
+                                <div class="border-b">
                                     <ConciseDiffView
                                         patch={value.structuredPatch}
                                         syntaxHighlighting={globalOptions.syntaxHighlighting}

web/src/routes/DiffTitle.svelte

@@ -10,10 +10,10 @@
 </script>
 
 {#snippet github(details: GithubDiff)}
-    <div>
+    <div class="max-w-full">
         <div class="flex gap-2">
-            <span class="iconify size-6 shrink-0 octicon--mark-github-24"></span>
-            <h1 class="text-base">{details.owner}<span class="mx-1.5 font-light text-em-med">/</span>{details.repo}</h1>
+            <span class="iconify size-4 shrink-0 place-self-center octicon--mark-github-16"></span>
+            <h1 class="text-sm">{details.owner}<span class="mx-1.5 font-light text-em-med">/</span>{details.repo}</h1>
         </div>
         <h2 class="text-sm text-em-med">
             <a href={details.backlink} target="_blank" rel="noopener noreferrer" class="hover:text-primary">{details.description}</a>
@@ -22,9 +22,9 @@
 {/snippet}
 
 {#snippet file(fileName: string)}
-    <div class="flex gap-2">
-        <span class="iconify size-6 shrink-0 octicon--file-diff-24"></span>
-        <h1 class="text-base">{fileName}</h1>
+    <div class="flex max-w-full gap-2">
+        <span class="iconify size-4 shrink-0 place-self-center octicon--file-diff-16"></span>
+        <h1 class="text-sm wrap-anywhere break-keep">{fileName}</h1>
     </div>
 {/snippet}