Fixed home, calendar, and mobile elements

client/src/components/Calendar.tsx

@@ -16,13 +16,11 @@ export const formatDateRange = (startDate: string, startTime: string, endDate: s
   const end = parseISO(`${endDate}T${endTime}`);
 
   if (isSameDay(start, end)) {
-    return `${format(start, 'MMMM d, yyyy')} ${formatTime(startDate, startTime)} - ${formatTime(endDate, endTime)}`;
+    return `${format(start, 'MMMM d, yyyy')}\n${formatTime(startDate, startTime)} - ${formatTime(endDate, endTime)}`;
   } else {
-    return `${format(start, 'MMMM d, yyyy h:mm a')} - ${format(end, 'MMMM d, yyyy h:mm a')}`;
+    return `${format(start, 'MMMM d, yyyy')}\n${formatTime(startDate, startTime)} - ${format(end, 'MMMM d, yyyy')}\n${formatTime(endDate, endTime)}`;
   }
-};
+};const EventPopup: React.FC<{ event: Event; position: { top: number; left: number }; onClose: () => void }> = ({ event, position, onClose }) => (
-
-const EventPopup: React.FC<{ event: Event; position: { top: number; left: number }; onClose: () => void }> = ({ event, position, onClose }) => (
   <motion.div
     initial={{ opacity: 0, y: -20 }}
     animate={{ opacity: 1, y: 0 }}
@@ -35,7 +33,7 @@ const EventPopup: React.FC<{ event: Event; position: { top: number; left: number
       onClick={(e) => e.stopPropagation()}
     >
       <h3 className="font-bold text-lg">{event.title}</h3>
-      <p className="text-sm">{formatDateRange(event.date, event.startTime, event.date, event.endTime)}</p>
+      <p className="text-sm whitespace-pre-line">{formatDateRange(event.date, event.startTime, event.date, event.endTime)}</p>
       <p className="text-sm mt-2">{event.description}</p>
       <p className="text-sm mt-2">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p>
     </motion.div>

client/src/components/EventCard.tsx

@@ -15,7 +15,7 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
       className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs"
     >
       <h3 className="font-bold text-lg text-[#8C1D40] mb-2">{event.title}</h3>
-      <p className="text-sm text-gray-600 mb-2">{event.formattedDateRange}</p>
+      <p className="text-sm text-gray-600 mb-2 whitespace-pre-line">{event.formattedDateRange}</p>
       <p className="text-sm mb-2">{event.description}</p>
       <p className="text-sm">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p>
     </motion.div>

client/src/components/Home.tsx

@@ -34,9 +34,8 @@ const Home: React.FC = () => {
         <h1 className="text-3xl md:text-4xl font-bold text-[#8C1D40] mb-8 text-center">Welcome to MCDi</h1>
         
         <ImageCarousel />
-        
+        <div className="flex flex-col lg:flex-row gap-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="lg:w-1/2 flex flex-col gap-8">
-          <div className="space-y-8">
             <InfoCard
               title="Empowering Deaf Culture and Community"
               content="We're proud to be the Missoula Council of the Deaf, Inc. (MCDi) in the heart of Missoula, Montana. Our organization is dedicated to promoting Deaf culture, community, and systematic change in our beautiful state."
@@ -46,7 +45,7 @@ const Home: React.FC = () => {
               content="Just as Montana's vast landscapes showcase breathtaking vistas, our Deaf community brings unique perspectives and experiences to the table. We're proud to celebrate Deaf culture, language, and traditions that enrich our human kaleidoscope."
             />
           </div>
-          <div>
+          <div className="lg:w-1/2">
             <h2 className="text-2xl font-semibold text-[#8C1D40] mb-4">Upcoming Events</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               {upcomingEvents.map((event, index) => (
@@ -91,4 +90,4 @@ const InfoCard: React.FC<{ title: string; content: string }> = ({ title, content
   </motion.div>
 );
 
-export default Home;
+export default Home;