docs: share page many model case

2 files changed, 13 insertions, 1 deletions

diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css
index 14680736c..9930e6b57 100644
--- a/packages/web/src/components/share.module.css
+++ b/packages/web/src/components/share.module.css
@@ -57,6 +57,7 @@
     display: flex;
     gap: 0.5rem 0.875rem;
     flex-wrap: wrap;
+    max-width: var(--lg-tool-width);
 
     [data-slot="item"] {
       display: flex;
diff --git a/packages/web/src/pages/s/[id].astro b/packages/web/src/pages/s/[id].astro
index 46cdd2484..05548348c 100644
--- a/packages/web/src/pages/s/[id].astro
+++ b/packages/web/src/pages/s/[id].astro
@@ -38,8 +38,19 @@ const encodedTitle = encodeURIComponent(
   )
 );
 
-const ogImage = `${config.socialCard}/opencode-share/${encodedTitle}.png?model=${Array.from(models).join(",")}&version=${version}&id=${id}`;
+const modelsArray = Array.from(models);
+let modelParam;
+if (modelsArray.length === 1) {
+  modelParam = modelsArray[0];
+}
+else if (modelsArray.length === 2) {
+  modelParam = `${modelsArray[0]} & ${modelsArray[1]}`;
+}
+else {
+  modelParam = `${modelsArray[0]} & ${modelsArray.length - 1} others`;
+}
 
+const ogImage = `${config.socialCard}/opencode-share/${encodedTitle}.png?model=${modelParam}&version=${version}&id=${id}`;
 ---
 <StarlightPage
   hasSidebar={false}