Make catalog page accomodate longer package names

Author: oBusk

src/app/[...parts]/_page/catalog/CatalogPage.tsx

@@ -37,7 +37,7 @@ async function CatalogPageInner({ specs }: CatalogPageProps) {
 
     return (
         <div className="mx-auto w-full max-w-7xl py-8">
-            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+            <div className="grid grid-cols-1 gap-8 lg:grid-cols-[2fr,3fr]">
                 <div className="flex flex-col">
                     <PackageMeta packument={pack} />
                 </div>
@@ -55,7 +55,7 @@ async function CatalogPageInner({ specs }: CatalogPageProps) {
 function CatalogPageFallback() {
     return (
         <div className="mx-auto w-full max-w-7xl py-8">
-            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+            <div className="grid grid-cols-1 gap-8 lg:grid-cols-[2fr,3fr]">
                 <div className="flex flex-col">
                     <Skeleton className="h-96 w-full rounded-md" />
                 </div>

src/app/[...parts]/_page/catalog/ComparisonList.tsx

@@ -26,13 +26,22 @@ function getHighlightIndex(type: "major" | "minor" | "patch"): number {
     }
 }
 
+/**
+ * Threshold for omitting the package name in the "to" spec
+ * When package name is 24+ characters, we show "pkg@1.0.0...2.0.0" instead of "pkg@1.0.0...pkg@2.0.0"
+ */
+const PACKAGE_NAME_LENGTH_THRESHOLD = 24;
+
 /**
  * Right column showing the list of comparisons
  */
 export default function ComparisonList({
     packageName,
     comparisons,
 }: ComparisonListProps) {
+    const showSecondPackageName =
+        packageName.length < PACKAGE_NAME_LENGTH_THRESHOLD;
+
     if (comparisons.length === 0) {
         return (
             <BorderBox>
@@ -73,7 +82,11 @@ export default function ComparisonList({
                                 <span className="text-muted-foreground">
                                     ...
                                 </span>
-                                <PackageNamePrefix packageName={packageName} />
+                                {showSecondPackageName ? (
+                                    <PackageNamePrefix
+                                        packageName={packageName}
+                                    />
+                                ) : null}
                                 <VersionWithHighlight
                                     version={comparison.to}
                                     highlightIndex={highlightIndex}