fix test

src/components/EventCalendar/EventCalendar.tsx

@@ -363,12 +363,6 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                   Events Created by Organization
                 </span>
               </div>
-              {/* <div className={styles.eventsLegend}>
-                <span className={styles.userEvents__color}></span>
-                <span className={styles.legendText}>
-                  Events Created by User
-                </span>
-              </div> */}
               <div className={styles.list_container_holidays}>
                 <span className={styles.holidayIndicator}></span>
                 <span className={styles.holidayText}>Holidays</span>

src/components/HolidayCards/HolidayCard.spec.tsx

@@ -12,11 +12,21 @@ vi.mock('./../../style/app.module.css', () => ({
 describe('HolidayCard Component', () => {
   it('renders correctly with the given holiday name', () => {
     const holidayName = 'Christmas';
-
     render(<HolidayCard holidayName={holidayName} />);
-
-    // Assert that the holiday name is displayed
     const cardElement = screen.getByText(holidayName);
     expect(cardElement).toBeInTheDocument();
   });
+
+  it('handles empty holiday name gracefully', () => {
+    render(<HolidayCard holidayName="" />);
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement).toBeInTheDocument();
+  });
+
+  it('handles long holiday names appropriately', () => {
+    const longName = 'Very Long Holiday Name That Might Cause Wrapping Issues';
+    render(<HolidayCard holidayName={longName} />);
+    const cardElement = screen.getByText(longName);
+    expect(cardElement).toBeInTheDocument();
+  });
 });

src/components/HolidayCards/HolidayCard.tsx

@@ -13,7 +13,11 @@ interface InterfaceHolidayList {
  * @returns JSX element representing a card with the holiday name.
  */
 const HolidayCard = (props: InterfaceHolidayList): JSX.Element => {
-  return <div className={styles.holidayCard}>{props?.holidayName}</div>;
+  return (
+    <div className={styles.holidayCard} data-testid="holiday-card">
+      {props?.holidayName}
+    </div>
+  );
 };
 
 export default HolidayCard;

src/style/app.module.css

@@ -5811,34 +5811,6 @@ button[data-testid='createPostBtn'] {
   } */
 }
 
-@media (max-width: 520px) {
-  .calendar__header {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-  }
-
-  .space {
-    display: block !important;
-    text-align: center;
-  }
-
-  .space > * {
-    width: 100%;
-    margin-bottom: 10px;
-  }
-
-  /* .input {
-    width: 100%;
-  }
-
-  .createButton {
-    margin: 0 auto;
-    width: 100%;
-  } */
-}
-
 /* EventListCardModals.tsx */
 
 .dispflexEventListCardModals {