fix : warning from tailwindcss

components/public/constellation-image.tsx

@@ -22,7 +22,7 @@ export function ConstellationImage({
   const footer = group.note;
 
   return (
-    <div className="relative isolate size-[1500px] overflow-hidden bg-[#070b20] font-heading text-white">
+    <div className="relative isolate size-375 overflow-hidden bg-[#070b20] font-heading text-white">
       <GuideExportBranding backgroundUrl={background} variant="constellation" />
 
       <div className="absolute inset-x-20 top-7 z-10 flex items-start justify-center gap-5">
@@ -45,14 +45,14 @@ export function ConstellationImage({
           >
             {`${guide.character.name}’s Constellations`}
           </h2>
-            <p className="mt-3 line-clamp-2 max-w-[1100px] whitespace-pre-line text-[42px] leading-tight font-bold text-[#f1badd]">
+            <p className="mt-3 line-clamp-2 max-w-275 whitespace-pre-line text-[42px] leading-tight font-bold text-[#f1badd]">
               <ExportText th="ดาเมจทั้งทีม" en="Team Damage" />
             </p>
         </div>
       </div>
 
-      <div className="absolute top-[160px] bottom-[115px] left-[154px] z-20 w-1 bg-black/90" />
-      <div className="absolute inset-x-14 top-[205px] bottom-[145px] z-20 flex flex-col justify-between">
+      <div className="absolute top-40 bottom-28.75 left-38.5 z-20 w-1 bg-black/90" />
+      <div className="absolute inset-x-14 top-51.25 bottom-36.25 z-20 flex flex-col justify-between">
         {rows.map((row) => (
           <div
             key={row.level}
@@ -61,7 +61,7 @@ export function ConstellationImage({
             <div className="text-right text-[58px] leading-none font-bold drop-shadow-[0_5px_4px_rgba(0,0,0,0.9)]">
               C{row.level}
             </div>
-            <div className="flex h-[100px] items-center">
+            <div className="flex h-25 items-center">
               <div
                 className={cn(
                   "h-full shrink-0 rounded-r-xl",
@@ -83,7 +83,7 @@ export function ConstellationImage({
       </div>
 
       {footer ? (
-        <p data-export-note className="absolute bottom-10 left-[154px] z-30 max-w-[1000px] truncate text-[28px] font-semibold drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
+        <p data-export-note className="absolute bottom-10 left-38.5 z-30 max-w-275 truncate text-[28px] font-semibold drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
           {footer}
         </p>
       ) : null}

components/public/directory-skeleton.tsx

@@ -6,7 +6,7 @@ export function DirectorySkeleton() {
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {Array.from({ length: 8 }, (_, index) => (
         <Card key={index} className="gap-0 py-0">
-          <Skeleton className="aspect-[4/3] rounded-b-none" />
+          <Skeleton className="aspect-4/3 rounded-b-none" />
           <CardHeader className="pt-4">
             <Skeleton className="h-5 w-2/3" />
             <Skeleton className="h-4 w-1/2" />

components/public/guide-export-branding.tsx

@@ -28,8 +28,8 @@ export function GuideExportBranding({
         loading="eager"
         className={
           constellation
-            ? "guide-export-watermark absolute right-4 bottom-0 z-30 h-auto w-[280px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-            : "guide-export-watermark absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+            ? "guide-export-watermark absolute right-4 bottom-0 z-30 h-auto w-70 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+            : "guide-export-watermark absolute top-4 right-4 z-30 h-auto w-45 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
         }
       />
     </>

components/public/guide-image-export.tsx

@@ -254,7 +254,7 @@ export function GuideImageExport({
         ? createPortal(
             <div
               aria-hidden="true"
-              className="pointer-events-none fixed top-0 -left-[10000px]"
+              className="pointer-events-none fixed top-0 left-[-10000px]"
             >
               <div
                 ref={captureRef}

components/public/material-poster.tsx

@@ -120,7 +120,7 @@ export function MaterialPoster({
 
   return (
     <div
-      className={cn("@container relative aspect-[4/5] w-full select-none overflow-hidden bg-black text-white", interactive && characterArtUrl && "cursor-move", className)}
+      className={cn("@container relative aspect-4/5 w-full select-none overflow-hidden bg-black text-white", interactive && characterArtUrl && "cursor-move", className)}
       style={{ backgroundImage: background }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
@@ -178,7 +178,7 @@ export function MaterialPoster({
         className="pointer-events-none object-cover opacity-50"
         priority={!interactive}
       />
-      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/80" />
+      <div className="pointer-events-none absolute inset-0 bg-linear-to-b from-black/10 via-transparent to-black/80" />
       <div
         className="pointer-events-none absolute inset-x-0 top-0 h-[1.35cqw]"
         style={{ backgroundImage: accentGradient(...topColors) }}

components/public/site-footer.tsx

@@ -14,14 +14,14 @@ export function SiteFooter() {
           guide.sudloh.com is not affiliated with HoYoverse. Game content and
           materials are trademarks and copyrights of HoYoverse. With sincere
           thanks to{" "}
-          <a
+          <Link
             href="https://lunaris.moe/"
             target="_blank"
             rel="noreferrer"
             className="underline underline-offset-2 hover:text-foreground"
           >
             Lunaris
-          </a>{" "}
+          </Link>{" "}
           for generously providing the data that helps make these guides
           possible.
         </p>

components/public/structured-guide.tsx

@@ -1359,7 +1359,7 @@ function ExtraSectionContent({
               <CardContent
                 className={cn(
                   "pb-5",
-                  exporting && "[&_[data-slot=table-container]]:overflow-visible",
+                  exporting && "**:data-[slot=table-container]:overflow-visible",
                 )}
               >
                 <Table

components/public/visitor-presence.tsx

@@ -23,7 +23,7 @@ export function VisitorPresence({ guideId }: { guideId?: string }) {
           className=" tabular-nums"
           title="ผู้เข้าชม Guide นี้ที่กำลังออนไลน์"
         >
-          Guide นี้ {counts?.guide ?? "-"}
+          ไกด์นี้ {counts?.guide ?? "-"}
         </Badge>
       ) : null}
     </div>