fix: mobile style error

src/components/ClubDetailModal.tsx

@@ -12,18 +12,19 @@ const ClubDetailModal: React.FC<ClubDetailModalProps> = ({ isOpen, onClose, club
     return null;
   }
 
-  // Helper to format semester cost
+  // Helper to display string fields that might be null or empty
-  const formatSemesterCost = (cost: number | null): string => {
+  const displayOptionalString = (value: string | null | undefined, labelIfEmpty: string = 'N/A'): string => {
-    if (cost === null) {
+    if (value === null || value === undefined || value.trim() === "") {
-      return 'N/A';
+      return labelIfEmpty;
     }
-    if (cost === 0) {
+    // Check for specific string values like "Free" for semesterCost, case-insensitive
+    if (value.toLowerCase() === 'free') {
         return 'Free';
     }
-    // Assuming the cost is a simple number, you might want to add currency formatting
+    if (value === "0") { // If cost is "0" string
-    // e.g., using Intl.NumberFormat if it's a monetary value with a specific currency.
+        return 'Free'; // Or display "0" if that's preferred
-    // For now, just displaying the number.
+    }
-    return String(cost); // Or `cost.toFixed(2)` if it's meant to be currency-like
+    return value;
   };
 
   return (
@@ -33,36 +34,38 @@ const ClubDetailModal: React.FC<ClubDetailModalProps> = ({ isOpen, onClose, club
         <h2>{clubDetail.name}</h2>
         <div className="modal-scrollable-content">
           <img src={clubDetail.photo} alt={clubDetail.name} className="modal-photo" />
+          <h3>Meta Information</h3>
           <p><strong>ID:</strong> {clubDetail.id}</p>
           <p><strong>Academic Year:</strong> {clubDetail.academicYear}</p>
           <p><strong>Category:</strong> {clubDetail.category}</p>
           <p><strong>Grades:</strong> G{clubDetail.grades.min} - G{clubDetail.grades.max}</p>
           <p><strong>Schedule:</strong> {clubDetail.schedule}</p>
 
-          <h4>Meeting Information</h4>
+          <h3>Meeting Information</h3>
           <p><strong>Day:</strong> {clubDetail.meeting.day}</p>
           <p><strong>Time:</strong> {clubDetail.meeting.startTime} - {clubDetail.meeting.endTime}</p>
           <p><strong>Location:</strong> {clubDetail.meeting.location.room} ({clubDetail.meeting.location.block}, {clubDetail.meeting.location.site})</p>
           <p><strong>Duration:</strong> {clubDetail.duration.startDate} to {clubDetail.duration.endDate} ({clubDetail.duration.isRecurringWeekly ? "Recurring Weekly" : "Fixed Duration"})</p>
 
-          <h4>Description</h4>
+          <h3>Description</h3>
           <p style={{ whiteSpace: 'pre-wrap' }}>{clubDetail.description}</p>
 
-          {/* Display Semester Cost if it's not null */}
+          <p><strong>Semester Cost:</strong> {displayOptionalString(clubDetail.semesterCost)}</p>
-          {/* The API defines semesterCost as 'null' or a number */}
-          <p><strong>Semester Cost:</strong> {formatSemesterCost(clubDetail.semesterCost)}</p>
 
-          {/* Display Poor Weather Plan if it's not an empty string */}
+          {/* Display Poor Weather Plan - display the section only if there's content */}
-          {clubDetail.poorWeatherPlan && clubDetail.poorWeatherPlan.trim() !== '' && (
+          {clubDetail.poorWeatherPlan && clubDetail.poorWeatherPlan.trim() !== '' ? (
             <>
-              <h4>Poor Weather Plan</h4>
+              <h3>Poor Weather Plan</h3>
               <p style={{ whiteSpace: 'pre-wrap' }}>{clubDetail.poorWeatherPlan}</p>
             </>
+          ) : (
+            <p><strong>Poor Weather Plan:</strong> N/A</p>
           )}
 
+
           {clubDetail.requirements && clubDetail.requirements.length > 0 && (
             <>
-              <h4>Requirements</h4>
+              <h3>Requirements</h3>
               <ul>
                 {clubDetail.requirements.map((req, index) => <li key={`req-${index}`}>{req}</li>)}
               </ul>
@@ -71,7 +74,7 @@ const ClubDetailModal: React.FC<ClubDetailModalProps> = ({ isOpen, onClose, club
 
           {clubDetail.materials && clubDetail.materials.length > 0 && (
             <>
-              <h4>Materials Needed</h4>
+              <h3>Materials Needed</h3>
               <ul>
                 {clubDetail.materials.map((mat, index) => <li key={`mat-${index}`}>{mat}</li>)}
               </ul>

src/styles/global.css

@@ -5,6 +5,11 @@ body {
   background-color: #f4f7f6;
   color: #333;
   line-height: 1.6;
+  box-sizing: border-box; /* Add to body and inherit */
+}
+
+*, *::before, *::after {
+  box-sizing: inherit; /* Ensure all elements use the same box model */
 }
 
 header {
@@ -47,7 +52,7 @@ footer {
   margin-top: 2rem;
 }
 
-/* Search Bar Styles */
+/* Search Bar Styles - Desktop First */
 .search-bar-container {
   background-color: #ffffff;
   padding: 1.5rem;
@@ -55,9 +60,9 @@ footer {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 2rem;
   display: flex;
-  flex-wrap: wrap; /* Allow wrapping on smaller screens */
+  flex-wrap: wrap;
   gap: 1rem;
-  align-items: center;
+  align-items: center; /* Aligns items vertically if they have different heights on one line */
 }
 
 .search-bar-container input[type="text"],
@@ -67,12 +72,60 @@ footer {
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 1rem;
-  flex-grow: 1; /* Allow text input to take more space */
+  line-height: 1.4; /* Ensure consistent line height */
-  min-width: 150px; /* Minimum width for inputs/selects */
+  flex-grow: 1;
+  flex-shrink: 1;
+  /* min-width helps with wrapping on desktop */
 }
 
 .search-bar-container input[type="text"] {
- flex-basis: 300px; /* Give more base width to search text */
+  flex-basis: 300px; /* Ideal width on desktop */
+  min-width: 250px; /* Minimum it should shrink to on desktop before wrapping */
+}
+
+.search-bar-container select,
+.search-bar-container input[type="number"] {
+  flex-basis: 200px; /* Ideal width for these filters on desktop */
+  min-width: 150px; /* Minimum they should shrink to */
+}
+
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  header nav {
+    margin-top: 0.5rem;
+  }
+  header nav a {
+    margin-left: 0;
+    margin-right: 1rem;
+  }
+
+  /* === Search Bar Mobile Styles === */
+  .search-bar-container {
+    flex-direction: column; /* Stack items vertically */
+    align-items: stretch;   /* Make items take up full available width */
+    padding: 1rem;          /* Adjust padding for mobile */
+    gap: 0.75rem;           /* Adjust gap between stacked items */
+  }
+
+  .search-bar-container input[type="text"],
+  .search-bar-container input[type="number"],
+  .search-bar-container select {
+    width: 100%;            /* Make each item take full width */
+    font-size: 0.9rem;      /* Slightly smaller font for better fit */
+    padding: 0.65rem 0.75rem; /* Adjust padding (vertical, horizontal) */
+    /* Remove flex-basis, min-width for mobile as width: 100% takes precedence */
+    flex-basis: auto;
+    min-width: 0;
+    flex-grow: 0; /* Not needed when width is 100% in a column */
+    flex-shrink: 0; /* Not needed when width is 100% in a column */
+  }
+  /* No specific overrides needed for input[type="text"] or input[type="number"] here
+     as they will follow the general rule above for mobile. */
 }
 
 
@@ -101,40 +154,47 @@ footer {
 
 .card-photo-container {
   width: 100%;
-  /* aspect-ratio: 16 / 9; /* Example: Adjust ratio (width / height) as needed, e.g., 4 / 3, 3 / 2, 1 / 1 */
-  /* Common CCA photo ratios might be closer to 4:3 or 16:9. Let's try 16:9 */
   aspect-ratio: 16 / 9;
-  background-color: #e0e0e0; /* Placeholder background */
+  background-color: #e0e0e0;
-  overflow: hidden; /* Ensures image stays within bounds */
+  overflow: hidden;
-  display: block; /* Or flex if alignment inside is needed, but block is simpler */
+  display: block;
 }
 
 .card-photo {
-  display: block; /* Removes potential extra space sometimes added below images */
+  display: block;
   width: 100%;
-  height: 100%; /* Make image fill the container */
+  height: 100%;
-  object-fit: cover; /* Cover the container, cropping if necessary, maintaining aspect ratio */
+  object-fit: cover;
 }
 
 .card-content {
   padding: 1rem;
-  flex-grow: 1; /* Allows content to fill remaining space */
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
 .card-content h3 {
   margin-top: 0;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.33rem;
-  font-size: 1.4rem;
+  font-size: 1.33rem;
   color: #333;
 }
 
+.card-content p {
+  margin-top: 0.33rem;
+  margin-bottom: 0.33rem;
+  margin-left: 0;
+  margin-right: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
 .card-info-placeholder {
   font-style: italic;
   color: #888;
   font-size: 0.9rem;
-  min-height: 1.2em; /* Reserve space to reduce layout shift */
+  min-height: 1.2em;
 }
 
 .card-details-section {
@@ -161,7 +221,7 @@ footer {
   cursor: pointer;
   text-align: center;
   font-size: 0.9rem;
-  margin-top: 1rem; /* Pushes button to bottom if card content is short */
+  margin-top: 1rem;
   transition: background-color 0.2s ease-in-out;
 }
 
@@ -193,30 +253,6 @@ footer {
   color: #555;
 }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  header nav {
-    margin-top: 0.5rem;
-  }
-  header nav a {
-    margin-left: 0;
-    margin-right: 1rem;
-  }
-  .search-bar-container {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .search-bar-container input[type="text"],
-  .search-bar-container input[type="number"],
-  .search-bar-container select {
-    width: 100%;
-  }
-}
-
 /* Modal Styles */
 .modal-overlay {
   position: fixed;
@@ -228,7 +264,7 @@ footer {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000; /* Ensure it's on top */
+  z-index: 1000;
   padding: 1rem;
 }
 
@@ -238,17 +274,17 @@ footer {
   border-radius: 8px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.3);
   width: 90%;
-  max-width: 700px; /* Max width of modal */
+  max-width: 700px;
-  max-height: 90vh; /* Max height of modal */
+  max-height: 90vh;
   position: relative;
   display: flex;
   flex-direction: column;
 }
 
 .modal-scrollable-content {
-  overflow-y: auto; /* Makes content scrollable if it exceeds max-height */
+  overflow-y: auto;
-  flex-grow: 1; /* Allows this section to take available space and scroll */
+  flex-grow: 1;
-  padding-right: 1rem; /* For scrollbar spacing */
+  padding-right: 1rem;
 }
 
 .modal-content h2 {
@@ -259,14 +295,18 @@ footer {
   border-bottom: 1px solid #eee;
 }
 
-.modal-content h4 {
+.modal-content h3 {
-    margin-top: 1.5rem;
+  margin-top: 1rem;
   margin-bottom: 0.5rem;
   color: #1abc9c;
 }
 .modal-content p, .modal-content li {
-    margin-bottom: 0.5rem;
+  margin-top: 0.33rem;
-    line-height: 1.6;
+  margin-bottom: 0.33rem;
+  margin-left: 0;
+  margin-right: 0;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 .modal-content ul {
   padding-left: 20px;

src/types/index.ts

@@ -39,10 +39,10 @@ export interface ClubDetail {
   meeting: ClubMeeting;
   name: string;
   photo: string;
-  poorWeatherPlan: string;
+  poorWeatherPlan: string | null; // Can be string or null
   requirements: string[];
   schedule: string;
-  semesterCost: number | null;
+  semesterCost: string | null;    // Can be string or null
   staff: string[];
   staffForReports: string[];
   studentLeaders: string[];