fix styling issues

frontend/src/components/AnnouncementsDisplay.tsx

@@ -82,6 +82,7 @@ export function AnnouncementsDisplay() {
 
   return (
     <PanelSection>
+      <Focusable style={{display: "flex", flexDirection: "column", gap: "0.5rem"}}>
         {currentlyDisplayingAnnouncements.map((announcement) => (
           <Announcement
             key={announcement.id}
@@ -89,6 +90,7 @@ export function AnnouncementsDisplay() {
             onHide={() => hideAnnouncement(announcement.id)}
           />
         ))}
+      </Focusable>
     </PanelSection>
   );
 }
@@ -107,12 +109,12 @@ function Announcement({ announcement, onHide }: { announcement: Announcement; on
         borderStyle: 'solid',
         padding: '0.7rem',
         display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
+        alignItems: "center",
+        justifyContent: "space-between"
       }}
     >
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <span style={{ fontWeight: 'bold' }}>{announcement.title}</span>
+        <Focusable style={{display: "flex", alignItems: "center", gap: "0.5rem"}}>
           <DialogButton
             style={{
               width: '1rem',
@@ -158,7 +160,7 @@ function Announcement({ announcement, onHide }: { announcement: Announcement; on
               }}
             />
           </DialogButton>
-      </div>
+        </Focusable>
     </Focusable>
   );
 }