diff --git a/frontend/src/features/announcement/views/AnnouncementDetailView.vue b/frontend/src/features/announcement/views/AnnouncementDetailView.vue index d6439c5..084f05e 100644 --- a/frontend/src/features/announcement/views/AnnouncementDetailView.vue +++ b/frontend/src/features/announcement/views/AnnouncementDetailView.vue @@ -103,8 +103,6 @@ function getCategoryLabel(category: string) { .announcement-detail-page { display: grid; gap: 20px; - max-width: 900px; - margin: 0 auto; } .detail-header { @@ -190,9 +188,12 @@ function getCategoryLabel(category: string) { } .detail-content { + max-width: 100%; color: #334155; font-size: 16px; line-height: 1.8; + word-wrap: break-word; + overflow-wrap: break-word; } .detail-content :deep(h1), @@ -279,10 +280,32 @@ function getCategoryLabel(category: string) { .detail-content :deep(img) { max-width: 100%; + height: auto; margin: 20px 0; border-radius: 8px; } +.detail-content :deep(table) { + width: 100%; + max-width: 100%; + border-collapse: collapse; + margin: 20px 0; + overflow-x: auto; + display: block; +} + +.detail-content :deep(table th), +.detail-content :deep(table td) { + padding: 12px; + border: 1px solid #e6eaf2; + text-align: left; +} + +.detail-content :deep(table th) { + background: #f8fafc; + font-weight: 700; +} + @media (max-width: 720px) { .announcement-detail-card { padding: 24px 20px;