From ba0de5e1c7fd49f58bb2f06dc19c8dcbd6f16180 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sun, 17 Aug 2025 12:13:30 +0000
Subject: [PATCH] Show the full text of announcements to improve readability

Update AnnouncementCard component to display the entire announcement content without truncation, using `whitespace-pre-wrap` and `break-words` for proper formatting.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce/g53hZO6
---
 client/src/components/AnnouncementCard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/AnnouncementCard.tsx b/client/src/components/AnnouncementCard.tsx
index d04e6b1..c4fa820 100644
--- a/client/src/components/AnnouncementCard.tsx
+++ b/client/src/components/AnnouncementCard.tsx
@@ -293,13 +293,13 @@ export default function AnnouncementCard() {
               const priorityConfig = getPriorityConfig(announcement.type);
               
               return (
-                <div key={announcement.id} className="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors border-l-3 border-blue-500">
-                  <div className="flex items-center space-x-3">
-                    <div className="h-2 w-2 bg-blue-500"></div>
-                    <div>
+                <div key={announcement.id} className="flex items-start justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors border-l-3 border-blue-500">
+                  <div className="flex items-start space-x-3 flex-1 min-w-0">
+                    <div className="h-2 w-2 bg-blue-500 mt-2 flex-shrink-0"></div>
+                    <div className="min-w-0 flex-1">
                       <p className="font-medium text-gray-900">{announcement.title}</p>
                       {announcement.content && (
-                        <p className="text-sm text-gray-600 truncate max-w-60">{announcement.content}</p>
+                        <p className="text-sm text-gray-600 leading-relaxed whitespace-pre-wrap break-words">{announcement.content}</p>
                       )}
                       <p className="text-xs text-gray-500 mt-1">
                         {announcement.author?.firstName} {announcement.author?.lastName}