description polish

frontend/DESIGN.md

@@ -182,6 +182,10 @@ Patterns:
   link.
 - Icon-only buttons are `IconButton` (below), never a `Button` with a
   `title`.
+- An action whose label doesn't fit beside a name on a phone (the shared
+  agent card's Edit, in a long locale) is two elements: an `IconButton`
+  with `sm:hidden` and the labelled `Button` with `hidden sm:inline-flex`.
+  Never hide a Button's label span, which leaves an icon-only Button.
 - Roles for dangerous and dismissive actions: a delete on a page (a "Danger
   zone" card's Delete agent or Revoke, Delete all) is `destructive-outline`;
   the submit of a confirm dialog is `destructive` (`ModalActions destructive`,
@@ -294,6 +298,8 @@ tone="destructive"`. Muted text fails AA on the red fill, so the tone turns
   ghost's grey square would not.
 - A card on the page background that must not look raised (the shared
   agent card) is `subtle lg`. Cards never take a shadow.
+- The shared agent card's description is `line-clamp-3` with no inner
+  scroller (`max-h-* overflow-y-auto`) and no hover hint for the cut text.
 
 Stat tiles are `components/StatCard.tsx`, never a hand-rolled Card: `label`,
 `value` (24px bold `tabular-nums`), `sub` (a 12px muted line or link),
@@ -965,6 +971,13 @@ leading-tight font-semibold`. `DialogTitle` and `SheetTitle` default to it;
   or output) stays proportional at the same size; only what the app
   serialised (arguments, results, attributes) is mono. Every stat figure is
   `tabular-nums`.
+- **Wrapping**: prose that can run long (a name, a description) wraps with
+  `wrap-break-word` in a column that can shrink (`min-w-0` in a flex row).
+  A single long token (a URL, a key, an id, an email, a filename, a command)
+  is `wrap-anywhere`, which also lets a table cell or flex item shrink below
+  the token instead of widening the table. Both break at spaces first and
+  split a token only when it would overflow. Never `break-all`: it splits
+  ordinary words mid-word ("notif / ications").
 
 ### Rhythm
 

frontend/src/admin/Admins.tsx

@@ -81,7 +81,7 @@ export default function Admins() {
             <TableBody>
               {admins.map((a) => (
                 <TableRow key={a.user_id}>
-                  <TableCell className="font-medium break-all">
+                  <TableCell className="font-medium wrap-anywhere">
                     {a.user_id}
                   </TableCell>
                   <TableCell>

frontend/src/admin/Quotas.tsx

@@ -308,7 +308,7 @@ export default function Quotas() {
                 {userPolicies.map((policy) => (
                   <TableRow key={`${policy.subject_id}:${policy.bucket}`}>
                     <TableCell>
-                      <span className="mr-2 break-all">
+                      <span className="mr-2 wrap-anywhere">
                         {policy.subject_id}
                       </span>
                       {bucketPill(policy)}

frontend/src/admin/Usage.tsx

@@ -224,7 +224,7 @@ export default function Usage() {
               <TableBody>
                 {topUsers.map((user) => (
                   <TableRow key={user.user_id}>
-                    <TableCell className="font-mono text-xs break-all">
+                    <TableCell className="font-mono text-xs wrap-anywhere">
                       <Button
                         type="button"
                         variant="link"

frontend/src/admin/UserUsageModal.tsx

@@ -78,7 +78,7 @@ function SplitTable({
             <TableBody>
               {rows.map((row) => (
                 <TableRow key={row.key}>
-                  <TableCell className="text-xs break-all">
+                  <TableCell className="text-xs wrap-anywhere">
                     {labels?.[row.key] ?? row.key}
                   </TableCell>
                   <TableCell align="right" className="tabular-nums">

frontend/src/agents/SharedAgentCard.tsx

@@ -6,6 +6,7 @@ import { Avatar } from '../components/ui/avatar';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
+import { IconButton } from '../components/ui/icon-button';
 import { formatDateTime } from '../utils/dateTimeUtils';
 import { getToolDisplayName } from '../utils/toolUtils';
 import { Agent } from './types';
@@ -40,27 +41,38 @@ export default function SharedAgentCard({
             imgClassName="size-full object-contain"
           />
         </div>
-        <div className="flex max-h-[92px] flex-1 flex-col gap-px">
-          <h2 className="text-foreground text-base font-semibold sm:text-lg">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <h2 className="text-foreground text-base leading-snug font-semibold wrap-break-word sm:text-lg">
             {agent.name}
           </h2>
-          <p className="text-muted-foreground overflow-y-auto text-xs text-wrap break-all sm:text-sm">
+          <p className="text-muted-foreground line-clamp-3 text-xs leading-relaxed wrap-break-word sm:text-sm">
             {agent.description}
           </p>
         </div>
         {onEdit && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            shape="pill"
-            onClick={onEdit}
-            className="shrink-0"
-            aria-label={t('agents.edit')}
-          >
-            <Pencil />
-            {t('agents.edit')}
-          </Button>
+          <>
+            {/* A phone has no room for a long localised label beside the name. */}
+            <IconButton
+              label={t('agents.edit')}
+              icon={Pencil}
+              variant="outline"
+              size="icon-sm"
+              shape="pill"
+              onClick={onEdit}
+              className="shrink-0 sm:hidden"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              shape="pill"
+              onClick={onEdit}
+              className="hidden shrink-0 sm:inline-flex"
+            >
+              <Pencil />
+              {t('agents.edit')}
+            </Button>
+          </>
         )}
       </div>
       {hasSharedMetadata && (

frontend/src/components/DocumentArtifactView.tsx

@@ -135,7 +135,7 @@ function DownloadCard({
       <div className="border-border flex flex-col items-center gap-3 rounded-xl border p-8 text-center">
         <FileText className="text-muted-foreground size-12" />
         <div>
-          <p className="text-foreground text-sm font-medium break-all">
+          <p className="text-foreground text-sm font-medium wrap-anywhere">
             {filename}
           </p>
           {size != null && (

frontend/src/modals/AgentDetailsModal.tsx

@@ -122,7 +122,7 @@ export default function AgentDetailsModal({
               </div>
               {sharedToken ? (
                 <div className="flex flex-col gap-2">
-                  <p className="text-foreground inline text-sm leading-normal font-medium break-all">
+                  <p className="text-foreground inline text-sm leading-normal font-medium wrap-anywhere">
                     <a
                       href={`${baseURL}/shared/agent/${sharedToken}`}
                       target="_blank"
@@ -173,7 +173,7 @@ export default function AgentDetailsModal({
               {apiKey ? (
                 <div className="flex flex-col gap-2">
                   <div className="flex items-center gap-2">
-                    <div className="text-foreground text-sm leading-normal font-medium break-all">
+                    <div className="text-foreground text-sm leading-normal font-medium wrap-anywhere">
                       {apiKey}
                       {!apiKey.includes('...') && (
                         <CopyButton
@@ -232,7 +232,7 @@ export default function AgentDetailsModal({
               </div>
               {webhookUrl ? (
                 <div className="flex flex-col gap-2">
-                  <p className="text-foreground text-sm leading-normal font-medium break-all">
+                  <p className="text-foreground text-sm leading-normal font-medium wrap-anywhere">
                     <a href={webhookUrl} target="_blank" rel="noreferrer">
                       {webhookUrl}
                     </a>

frontend/src/settings/RemoteDeviceConfig.tsx

@@ -387,7 +387,7 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
                         key={entry.id}
                         className="bg-muted flex flex-col gap-1 rounded-md px-3 py-2 text-xs"
                       >
-                        <code className="text-foreground block font-mono break-all whitespace-pre-wrap">
+                        <code className="text-foreground block font-mono wrap-anywhere whitespace-pre-wrap">
                           {entry.command}
                         </code>
                         <div className="text-muted-foreground flex flex-wrap gap-3">