Fix proposal card pill overflow

src/components/Chip.tsx

@@ -5,17 +5,24 @@ import { cn } from "@/lib/utils";
 type ChipProps = {
   children: ReactNode;
   className?: string;
+  title?: string;
 };
 
-export function Chip({ children, className }: ChipProps) {
+export function Chip({ children, className, title }: ChipProps) {
+  const resolvedTitle =
+    title ?? (typeof children === "string" ? children : undefined);
+
   return (
     <span
+      title={resolvedTitle}
       className={cn(
-        "inline-flex min-h-7 items-center rounded-full px-3.5 py-1 text-xs leading-none font-semibold tracking-wide",
+        "inline-flex min-h-7 max-w-full min-w-0 items-center justify-center overflow-hidden rounded-full px-3.5 py-1 text-xs leading-none font-semibold tracking-wide",
         className,
       )}
     >
-      {children}
+      <span className="block max-w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
+        {children}
+      </span>
     </span>
   );
 }

src/components/GlassyRecordCard.css

@@ -87,7 +87,7 @@
 .glassy-record-card__button {
   display: grid;
   width: 100%;
-  grid-template-columns: minmax(0, 1fr) 30rem;
+  grid-template-columns: minmax(0, 1fr) minmax(28rem, 31rem);
   gap: 1rem;
   border: 0;
   background: transparent;
@@ -117,7 +117,9 @@
 
 .glassy-record-card__aside {
   display: grid;
-  grid-template-columns: 8.75rem 8.75rem 8.75rem 1.25rem;
+  grid-template-columns:
+    minmax(0, 10rem) minmax(0, 8.75rem) minmax(0, 7.75rem)
+    1.25rem;
   align-items: center;
   justify-content: end;
   gap: 0.65rem;
@@ -128,6 +130,7 @@
 }
 
 .glassy-record-card__metaPill {
+  min-width: 0;
   width: 100%;
   justify-content: center;
   color: var(--record-meta-text);
@@ -157,12 +160,16 @@
 }
 
 .glassy-record-card__stage {
+  min-width: 0;
   width: 100%;
   justify-content: center;
   white-space: nowrap;
 }
 
 .glassy-record-card__time {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--record-time-text);
   font-size: 0.72rem;
   white-space: nowrap;

src/components/StageChip.css

@@ -1,9 +1,22 @@
 .stage-chip {
+  max-width: 100%;
+  min-width: 0;
   border: 1px solid var(--stage-chip-border);
   background: var(--stage-chip-bg);
   color: var(--stage-chip-text);
 }
 
+.stage-chip .hint-trigger,
+.stage-chip .hint-trigger > span,
+.stage-chip .hint-underline {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .stage-chip--proposal-pool {
   --stage-chip-bg: #fff1dc;
   --stage-chip-border: rgba(176, 102, 25, 0.2);

src/components/StageChip.tsx

@@ -41,9 +41,14 @@ export function StageChip({ stage, label, className }: StageChipProps) {
   const kind: StageChipKind = stageChipKindForStage(stage);
   const termId = hintByKind[kind];
   const content = label ?? stageLabelForStage(stage);
+  const title =
+    typeof content === "string" ? content : stageLabelForStage(stage);
 
   return (
-    <Chip className={cn("stage-chip", chipClasses[kind], className)}>
+    <Chip
+      className={cn("stage-chip", chipClasses[kind], className)}
+      title={title}
+    >
       {termId ? <HintLabel termId={termId}>{content}</HintLabel> : content}
     </Chip>
   );