fix(admin) : fit save panel text and remove unwanted scrollbars

components/admin/save-status.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { AlertCircleIcon, CheckIcon, ClockIcon, SaveIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import type { SaveState } from "@/hooks/use-manual-save";
+import { cn } from "@/lib/utils";
 import { FloatingSavePanel } from "./floating-save-panel";
 
 interface SaveFeedbackProps {
@@ -19,6 +20,37 @@ interface SaveFeedbackProps {
   onOverwrite?: () => void;
 }
 
+function SaveText({ children }: { children: string }) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const text = ref.current;
+    if (!text) return;
+    let active = true;
+    const fit = () => {
+      if (!active) return;
+      text.style.removeProperty("font-size");
+      const width = text.clientWidth;
+      if (width > 0 && text.scrollWidth > width) {
+        const fontSize = Number.parseFloat(window.getComputedStyle(text).fontSize);
+        text.style.fontSize = `${Math.floor(fontSize * width / text.scrollWidth * 10) / 10}px`;
+      }
+    };
+    fit();
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(fit) : null;
+    if (text.parentElement) observer?.observe(text.parentElement);
+    window.addEventListener("resize", fit);
+    void document.fonts?.ready.then(fit);
+    return () => {
+      active = false;
+      observer?.disconnect();
+      window.removeEventListener("resize", fit);
+    };
+  }, [children]);
+
+  return <span ref={ref} className="block min-w-0">{children}</span>;
+}
+
 function SaveFeedback({
   state,
   issues = [],
@@ -31,16 +63,16 @@ function SaveFeedback({
 
   if (state === "saving")
     return (
-      <Badge variant="secondary">
+      <Badge variant="secondary" className="max-w-full">
         <Spinner data-icon="inline-start" />
-        กำลังบันทึก…
+        <SaveText>กำลังบันทึก…</SaveText>
       </Badge>
     );
   if (state === "unsaved")
     return (
-      <Badge variant="outline">
+      <Badge variant="outline" className="max-w-full">
         <ClockIcon data-icon="inline-start" />
-        ยังไม่ได้บันทึก
+        <SaveText>ยังไม่ได้บันทึก</SaveText>
       </Badge>
     );
   if (state === "incomplete")
@@ -123,17 +155,17 @@ function SaveFeedback({
     );
   if (state === "error")
     return (
-      <div className="flex items-center gap-2">
+      <div className="flex max-w-full items-center gap-2">
-        <Badge variant="destructive">
+        <Badge variant="destructive" className="max-w-full">
           <AlertCircleIcon data-icon="inline-start" />
-          บันทึกไม่สำเร็จ
+          <SaveText>บันทึกไม่สำเร็จ</SaveText>
         </Badge>
       </div>
     );
   return (
-    <Badge variant="secondary">
+    <Badge variant="secondary" className="max-w-full">
       <CheckIcon data-icon="inline-start" />
-      บันทึกแล้ว
+      <SaveText>บันทึกแล้ว</SaveText>
     </Badge>
   );
 }
@@ -146,7 +178,16 @@ export function SaveStatus({
   return (
     <>
       <FloatingSavePanel>
-        <div role="status" aria-live="polite" className="min-h-0 max-w-full shrink touch-pan-y overflow-y-auto">
+        <div
+          role="status"
+          aria-live="polite"
+          className={cn(
+            "flex min-h-0 w-full max-w-full flex-col items-end",
+            props.state === "incomplete" || props.state === "conflict"
+              ? "shrink touch-pan-y overflow-x-hidden overflow-y-auto"
+              : "shrink-0 overflow-hidden",
+          )}
+        >
           <SaveFeedback {...props} />
         </div>
         <Button
@@ -157,7 +198,7 @@ export function SaveStatus({
           onClick={onSave}
         >
           {props.state === "saving" ? <Spinner data-icon="inline-start" /> : <SaveIcon data-icon="inline-start" />}
-          {props.state === "saving" ? "กำลังบันทึก…" : props.state === "error" ? "ลองบันทึกอีกครั้ง" : "บันทึก"}
+          <SaveText>{props.state === "saving" ? "กำลังบันทึก…" : props.state === "error" ? "ลองบันทึกอีกครั้ง" : "บันทึก"}</SaveText>
         </Button>
       </FloatingSavePanel>
     </>