modalのサイズとか色とか修正

maretol · Jan 14, 2025 · 9a491c6 · 9a491c6
1 parent dced4c9
commit 9a491c6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/pages/app/blog/[article_id]/@modal/(.)image/[src]/modal.tsx b/pages/app/blog/[article_id]/@modal/(.)image/[src]/modal.tsx
@@ -17,16 +17,16 @@ export default function Modal({ imageSrc }: { imageSrc: string }) {
   )
   return (
     <Dialog defaultOpen onOpenChange={onClose}>
-      <DialogContent className="w-max h-max m-0 p-0">
+      <DialogContent className="max-w-[96dvw] max-h-[96dvh] h-auto w-auto m-0 py-10 px-0 bg-blue-300 bg-opacity-30 border-0">
         <DialogTitle></DialogTitle>
         <DialogDescription></DialogDescription>
-        <div className="flex justify-center items-center p-0 m-0 overflow-hidden">
+        <div className="p-2 w-max h-max">
           <ClientImage
             src={imageSrc}
             alt=""
-            width={1000}
-            height={1000}
-            className="my-10 w-full max-w-fit h-full max-h-fit shadow-lg"
+            width={100}
+            height={100}
+            className="h-fit w-auto max-h-[95dvh] shadow-lg overflow-contain"
           />
         </div>
       </DialogContent>

diff --git a/pages/components/ui/dialog.tsx b/pages/components/ui/dialog.tsx
@@ -31,14 +31,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] max-h-full max-w-full w-max z-50 flex justify-center items-center translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200',
+        'fixed left-[50%] top-[50%] max-h-full max-w-full h-auto w-auto z-50 flex justify-center items-center translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200',
         className
       )}
       {...props}
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <X className="h-8 w-8" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

diff --git a/pages/lib/api/workers.ts b/pages/lib/api/workers.ts
@@ -44,8 +44,8 @@ async function getOGPDataOrigin(targetURL: string) {
   }
 
   // 成功時はcacheに保存する
-  // 有効期限は3日。devのときは1秒
-  const expirationTtl = dev ? 1 : 60 * 60 * 24 * 3
+  // 有効期限は3日。devのときは60秒
+  const expirationTtl = dev ? 60 : 60 * 60 * 24 * 3
   await env.OGP_FETCHER_CACHE.put(targetURL, JSON.stringify(data), { expirationTtl })
 
   return data