From 0de956ed2f92b8a6ead56e1566801db232d365dc Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Fri, 4 Sep 2026 14:51:31 -0400
Subject: [PATCH] fix(web): refine server update notice (#9744)

---
 apps/web/src/components/ChatView.tsx                        | 5 ++++-
 apps/web/src/components/chat/ComposerBanner.tsx             | 5 ++++-
 apps/web/src/components/chat/ComposerBannerStack.tsx        | 2 +-
 apps/web/src/components/chat/ComposerServerUpdateStatus.tsx | 4 ++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index e7aba91e1133390272773e05d14f2e62b4736423..cad2859d1804656e5ec7292db25421e44816ac19 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -2405,7 +2405,10 @@ export default function ChatView(props: ChatViewProps) {
             <Tooltip>
               <TooltipTrigger
                 render={
-                  <button type="button" className="cursor-help rounded-sm text-left">
+                  <button
+                    type="button"
+                    className="block max-w-full cursor-help truncate rounded-sm text-left"
+                  >
                     Server update available
                   </button>
                 }
diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index 90da8940d498700dbc40f3b7444272714179184e..092baa0ec8aff164086cc99063f3b4fa04dbbf9b 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -178,7 +178,7 @@ function Row({
   layout = "inline",
   ...props
 }: useRender.ComponentProps<"div"> & {
-  layout?: "inline" | "wrap-actions";
+  layout?: "inline" | "wrap-actions" | "wrap-actions-narrow";
 }) {
   const rowProps = {
     className: cn(
@@ -187,6 +187,8 @@ function Row({
       "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-[0.5rem] [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
       layout === "wrap-actions" &&
         "@max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
+      layout === "wrap-actions-narrow" &&
+        "@max-[320px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
       className,
     ),
     "data-composer-banner-row": "true",
@@ -247,6 +249,7 @@ function Actions({ className, ...props }: ComponentProps<"span">) {
       className={cn(
         "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1",
         "@max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:justify-start",
+        "@max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:justify-start",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index fee545a4d1baab42758714c7f9fc0cb18b97c80b..5de40a0d90d592e12eb69e85674fe047ee52adf8 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -269,7 +269,7 @@ function ComposerBannerStackAlert({
       variant={item.variant}
       density="comfortable"
     >
-      <ComposerBanner.Row layout="wrap-actions">
+      <ComposerBanner.Row layout="wrap-actions-narrow">
         <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">
           {item.icon}
         </ComposerBanner.Icon>
diff --git a/apps/web/src/components/chat/ComposerServerUpdateStatus.tsx b/apps/web/src/components/chat/ComposerServerUpdateStatus.tsx
index e647f6cff678826c5056293fd71bad06680a857d..60a998cbeab9f32ce6fd09191a42e45038519d97 100644
--- a/apps/web/src/components/chat/ComposerServerUpdateStatus.tsx
+++ b/apps/web/src/components/chat/ComposerServerUpdateStatus.tsx
@@ -1,5 +1,5 @@
 import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
-import { CircleAlertIcon, InfoIcon, LoaderCircleIcon } from "lucide-react";
+import { CircleAlertIcon, DownloadIcon, LoaderCircleIcon } from "lucide-react";
 import { useId, useState } from "react";
 
 import { serverUpdateStageLabel } from "../ServerUpdateAction";
@@ -17,7 +17,7 @@ export function ComposerServerUpdateIcon({
   if (status === "failed") {
     return <CircleAlertIcon aria-hidden className="text-error" />;
   }
-  return <InfoIcon aria-hidden />;
+  return <DownloadIcon aria-hidden />;
 }
 
 /** One text line, clipped at the end so the error detail never squeezes its title. */
-- 
2.54.0