BLOG-166 Fix image rendering on post preview (#174)

### Description

- Fix the issue by adding `w-full`, `h-full`, and `object-cover`

### Package Changes

```json
{
  "prettier-plugin-tailwindcss": "^0.7.1"
}
```

### Screenshots

|Original Image|Preview|
|-|-|
|![截圖 2025-10-20 17.47.35.png](/attachments/a21373d2-5a38-48aa-a6e2-64aa056919d9)|![截圖 2025-10-20 17.52.59.png](/attachments/d3766376-ac1a-4b73-ad9f-b71f1c521378)|

### Reference

Resolves #173.

### Checklist

- [x] A milestone is set
- [x] The related issuse has been linked to this branch

Reviewed-on: #174
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "typescript.preferences.importModuleSpecifier": "non-relative"
-}
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+}

frontend/package.json

@@ -42,7 +42,7 @@
 		"mode-watcher": "^1.1.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
+		"prettier-plugin-tailwindcss": "^0.7.1",
 		"sanitize-html": "^2.17.0",
 		"svelte": "^5.39.13",
 		"svelte-check": "^4.0.0",

frontend/pnpm-lock.yaml

@@ -88,8 +88,8 @@ importers:
         specifier: ^3.3.3
         version: 3.4.0(prettier@3.6.2)(svelte@5.40.1)
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.11
-        version: 0.6.14(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.40.1))(prettier@3.6.2)
+        specifier: ^0.7.1
+        version: 0.7.1(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.40.1))(prettier@3.6.2)
       sanitize-html:
         specifier: ^2.17.0
         version: 2.17.0
@@ -1995,9 +1995,9 @@ packages:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
 
-  prettier-plugin-tailwindcss@0.6.14:
-    resolution: {integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==}
-    engines: {node: '>=14.21.3'}
+  prettier-plugin-tailwindcss@0.7.1:
+    resolution: {integrity: sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==}
+    engines: {node: '>=20.19'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
       '@prettier/plugin-hermes': '*'
@@ -2009,14 +2009,12 @@ packages:
       prettier: ^3.0
       prettier-plugin-astro: '*'
       prettier-plugin-css-order: '*'
-      prettier-plugin-import-sort: '*'
       prettier-plugin-jsdoc: '*'
       prettier-plugin-marko: '*'
       prettier-plugin-multiline-arrays: '*'
       prettier-plugin-organize-attributes: '*'
       prettier-plugin-organize-imports: '*'
       prettier-plugin-sort-imports: '*'
-      prettier-plugin-style-order: '*'
       prettier-plugin-svelte: '*'
     peerDependenciesMeta:
       '@ianvs/prettier-plugin-sort-imports':
@@ -2037,8 +2035,6 @@ packages:
         optional: true
       prettier-plugin-css-order:
         optional: true
-      prettier-plugin-import-sort:
-        optional: true
       prettier-plugin-jsdoc:
         optional: true
       prettier-plugin-marko:
@@ -2051,8 +2047,6 @@ packages:
         optional: true
       prettier-plugin-sort-imports:
         optional: true
-      prettier-plugin-style-order:
-        optional: true
       prettier-plugin-svelte:
         optional: true
 
@@ -4305,7 +4299,7 @@ snapshots:
       prettier: 3.6.2
       svelte: 5.40.1
 
-  prettier-plugin-tailwindcss@0.6.14(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.40.1))(prettier@3.6.2):
+  prettier-plugin-tailwindcss@0.7.1(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.40.1))(prettier@3.6.2):
     dependencies:
       prettier: 3.6.2
     optionalDependencies:

frontend/src/app.css

@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @plugin '@tailwindcss/typography';
-@config "../tailwind.config.js";
+@config '../tailwind.config.js';
 
 @custom-variant dark (&:is(.dark *));
 

frontend/src/lib/post/adapter/gateway/postInfoResponseDto.ts

@@ -7,7 +7,7 @@ export const postInfoResponseSchema = z.object({
 	semantic_id: z.string(),
 	title: z.string(),
 	description: z.string(),
-	preview_image_url: z.httpUrl().nullable(),
+	preview_image_url: z.url().nullable(),
 	labels: z.array(labelResponseSchema),
 	published_time: z.iso.datetime({ offset: true }).nullable(),
 });

frontend/src/lib/post/framework/ui/EditPostDialog.svelte

@@ -15,7 +15,7 @@
 		content: z.string(),
 		labelIds: z.array(z.number()),
 		previewImageUrl: z
-			.httpUrl()
+			.url()
 			.nullable()
 			.transform((s) => (s ? new URL(s) : null)),
 		publishedTime: z

frontend/src/lib/post/framework/ui/PostPreview.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from '$lib/common/framework/components/utils';
 	import { LabelViewModel } from '$lib/label/adapter/presenter/labelViewModel';
 	import PostLabel from '$lib/label/framework/ui/PostLabel.svelte';
 	import type { PostInfoViewModel } from '$lib/post/adapter/presenter/postInfoViewModel';
@@ -25,9 +26,11 @@
 >
 	<div class="relative aspect-video overflow-hidden rounded-2xl bg-gray-200">
 		<img
-			class="rounded-2xl object-cover transition-opacity duration-300
-                {isImageLoading ? 'opacity-0' : 'opacity-100'}
-                {isImageError ? 'hidden' : ''}"
+			class={cn(
+				'h-full w-full rounded-2xl object-cover object-center transition-opacity duration-300',
+				isImageLoading ? 'opacity-0' : 'opacity-100',
+				isImageError ? 'hidden' : ''
+			)}
 			src={postInfo.previewImageUrl?.href}
 			alt={postInfo.title}
 			onload={onImageLoad}