Fixing layout.

Signed-off-by: Cliff Hill <xlorep@darkhelm.org>

frontend/src/__tests__/pages/LandingPage.test.tsx

@@ -105,9 +105,7 @@ describe("LandingPage", () => {
     // Wait for bookings for Room B
     await screen.findByText("Meeting B");
 
-    expect(
-      screen.getByRole("button", { name: /navigate to booking page/i })
-    ).toBeInTheDocument();
+    expect(screen.getByTestId("desktop-book-btn")).toBeInTheDocument();
   });
 
   test("displays error message and retry button on API failure", async () => {

frontend/src/components/BookingList.tsx

@@ -99,31 +99,34 @@ const BookingList: FC<BookingListProps> = ({
   }, [roomId, date, enableSSE]);
 
   return (
-    <Card>
-      <CardContent>
+    <Card sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <CardContent sx={{ flex: "0 0 auto" }}>
         <Typography variant="h6" gutterBottom>
           <EventIcon sx={{ verticalAlign: "middle", mr: 1 }} />
           Today's Bookings
         </Typography>
-        <List aria-label="Today's bookings">
-          {liveBookings.length > 0 ? (
-            liveBookings.map((booking) => (
-              <ListItem key={booking.id}>
-                <ListItemText
-                  primary={booking.title || "Untitled Booking"}
-                  secondary={`Room ID: ${booking.roomId} | ${new Date(
-                    booking.startTime
-                  ).toLocaleTimeString()} - ${new Date(
-                    booking.endTime
-                  ).toLocaleTimeString()}`}
-                />
-              </ListItem>
-            ))
-          ) : (
-            <Typography>No bookings for today.</Typography>
-          )}
-        </List>
       </CardContent>
+      <List
+        aria-label="Today's bookings"
+        sx={{ flex: "1 1 auto", overflowY: "auto", minHeight: 0, px: 2, pb: 2 }}
+      >
+        {liveBookings.length > 0 ? (
+          liveBookings.map((booking) => (
+            <ListItem key={booking.id}>
+              <ListItemText
+                primary={booking.title || "Untitled Booking"}
+                secondary={`Room ID: ${booking.roomId} | ${new Date(
+                  booking.startTime
+                ).toLocaleTimeString()} - ${new Date(
+                  booking.endTime
+                ).toLocaleTimeString()}`}
+              />
+            </ListItem>
+          ))
+        ) : (
+          <Typography>No bookings for today.</Typography>
+        )}
+      </List>
     </Card>
   );
 };

frontend/src/components/RoomList.tsx

@@ -65,46 +65,49 @@ const RoomList: FC<RoomListProps> = ({
   onSelectRoom,
 }) => {
   return (
-    <Card>
-      <CardContent>
+    <Card sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <CardContent sx={{ flex: "0 0 auto" }}>
         <Typography variant="h6" gutterBottom>
           <MeetingRoomIcon sx={{ verticalAlign: "middle", mr: 1 }} />
           Available Rooms
         </Typography>
-        <List aria-label="Available conference rooms">
-          {rooms.length > 0 ? (
-            rooms.map((room) =>
-              onSelectRoom ? (
-                <ListItemButton
-                  key={room.id}
-                  selected={room.id === selectedRoomId}
-                  onClick={() => onSelectRoom(room.id)}
-                  aria-label={`Select room ${room.name}`}
-                  data-testid={`room-item-${room.id}`}
-                >
-                  <ListItemText
-                    primary={room.name}
-                    secondary={`Location: ${room.location} | Capacity: ${room.capacity} | Equipment: ${room.equipment}`}
-                  />
-                </ListItemButton>
-              ) : (
-                <ListItem
-                  key={room.id}
-                  aria-label={`Select room ${room.name}`}
-                  data-testid={`room-item-${room.id}`}
-                >
-                  <ListItemText
-                    primary={room.name}
-                    secondary={`Location: ${room.location} | Capacity: ${room.capacity} | Equipment: ${room.equipment}`}
-                  />
-                </ListItem>
-              )
-            )
-          ) : (
-            <Typography>No rooms available.</Typography>
-          )}
-        </List>
       </CardContent>
+      <List
+        aria-label="Available conference rooms"
+        sx={{ flex: "1 1 auto", overflowY: "auto", minHeight: 0 }}
+      >
+        {rooms.length > 0 ? (
+          rooms.map((room) =>
+            onSelectRoom ? (
+              <ListItemButton
+                key={room.id}
+                selected={room.id === selectedRoomId}
+                onClick={() => onSelectRoom(room.id)}
+                aria-label={`Select room ${room.name}`}
+                data-testid={`room-item-${room.id}`}
+              >
+                <ListItemText
+                  primary={room.name}
+                  secondary={`Location: ${room.location} | Capacity: ${room.capacity} | Equipment: ${room.equipment}`}
+                />
+              </ListItemButton>
+            ) : (
+              <ListItem
+                key={room.id}
+                aria-label={`Select room ${room.name}`}
+                data-testid={`room-item-${room.id}`}
+              >
+                <ListItemText
+                  primary={room.name}
+                  secondary={`Location: ${room.location} | Capacity: ${room.capacity} | Equipment: ${room.equipment}`}
+                />
+              </ListItem>
+            )
+          )
+        ) : (
+          <Typography>No rooms available.</Typography>
+        )}
+      </List>
     </Card>
   );
 };

frontend/src/pages/LandingPage.css

@@ -0,0 +1,262 @@
+/* Responsive layout for LandingPage */
+
+.landing-root {
+  min-height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.landing-header {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  padding-top: 2.5rem;
+  padding-bottom: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.landing-main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+}
+
+.landing-main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 0;
+  width: 100vw;
+}
+
+.landing-columns-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+  gap: 10vw;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 0 0 0;
+  min-height: 60vh;
+}
+
+.landing-section {
+  flex: 1 1 0;
+  min-width: 320px;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+/* Make both columns the same width to avoid line wrapping and for consistency */
+.landing-columns-row > .landing-section {
+  min-width: 420px;
+  max-width: 540px;
+}
+.landing-card {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e0e0e0;
+  padding: 2rem 1.5rem 1.5rem 1.5rem;
+  margin-bottom: 0;
+  transition: box-shadow 0.2s;
+}
+
+.landing-card:focus-within,
+.landing-card:hover {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
+}
+
+.landing-card {
+  background: #23272f;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.13);
+  border: 1px solid #22242a;
+  padding: 2rem 1.5rem 1.5rem 1.5rem;
+  margin-bottom: 0;
+  transition: box-shadow 0.2s;
+  color: #f5f6fa;
+  flex: 1 1 0;
+  height: 60vh;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.landing-card:focus-within,
+.landing-card:hover {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
+}
+.landing-card-dark {
+  background: #23272f;
+  border: 1px solid #22242a;
+  color: #f5f6fa;
+}
+
+.landing-book-btn-desktop-wide {
+  width: 100vw;
+  text-align: center;
+  margin: 2.5rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.2rem;
+}
+
+.landing-hr-wide {
+  width: 420px;
+  border: none;
+  border-top: 2px solid #444;
+  margin: 0.5rem auto 1.5rem auto;
+  background: none;
+}
+
+.landing-book-btn-desktop {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100vw;
+  text-align: center;
+  padding-bottom: 2rem;
+  background: linear-gradient(to top, #fff 80%, rgba(255, 255, 255, 0));
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.landing-book-btn-mobile {
+  display: none;
+}
+
+.landing-hr {
+  width: 220px;
+  border: none;
+  border-top: 2px solid #e0e0e0;
+  margin: 0.5rem auto 1.5rem auto;
+  background: none;
+}
+
+@media (max-width: 900px), (orientation: portrait) {
+  .landing-root {
+    flex-direction: column;
+    min-height: 100vh;
+    width: 100vw;
+    overflow: visible;
+    position: static;
+  }
+  .landing-header {
+    position: static;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+    box-shadow: none;
+  }
+  .landing-main {
+    padding: 0;
+  }
+  .landing-components-row {
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100vw;
+    max-width: 100vw;
+    padding: 0;
+  }
+  .landing-section {
+    min-width: 0;
+    max-width: 100vw;
+    width: 100vw;
+    padding: 0;
+  }
+  .landing-card {
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+    background: #fff;
+    padding: 1.2rem 0.5rem 1.5rem 0.5rem;
+  }
+  .landing-book-btn-desktop {
+    display: none;
+  }
+  .landing-book-btn-mobile {
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .landing-hr {
+    width: 80vw;
+    margin: 0.5rem auto 1.5rem auto;
+  }
+  .landing-main {
+    padding: 0;
+  }
+  .landing-columns-row {
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100vw;
+    max-width: 100vw;
+    padding: 0;
+    min-height: unset;
+  }
+  .landing-section {
+    min-width: 0;
+    max-width: 100vw;
+    width: 100vw;
+    padding: 0;
+    height: auto;
+    overflow: visible;
+  }
+  .landing-card,
+  .landing-card-dark {
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+    background: #fff;
+    color: #23272f;
+    padding: 1.2rem 0.5rem 1.5rem 0.5rem;
+  }
+  .landing-book-btn-desktop-wide {
+    display: none;
+  }
+  .landing-book-btn-mobile {
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+  .landing-hr,
+  .landing-hr-wide {
+    width: 80vw;
+    margin: 0.5rem auto 1.5rem auto;
+    border-top: 2px solid #e0e0e0;
+  }
+}

frontend/src/pages/LandingPage.tsx

@@ -9,14 +9,8 @@
  *
  * @component
  */
-import {
-  Container,
-  Grid,
-  Typography,
-  Button,
-  Skeleton,
-  Box,
-} from "@mui/material";
+import { Typography, Button, Skeleton, Box } from "@mui/material";
+import "./LandingPage.css";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
@@ -78,110 +72,133 @@ const LandingPage: FC = () => {
   // Display skeleton loaders during data fetching
   if (roomsLoading || bookingsLoading) {
     return (
-      <Container maxWidth="lg" sx={{ mt: 4 }}>
-        <Grid container spacing={4}>
-          <Grid size={{ xs: 12, md: 6 }}>
-            <Box sx={{ p: 2 }}>
+      <div className="landing-root">
+        <div className="landing-section">
+          <Box sx={{ p: 2 }}>
+            <Skeleton
+              variant="text"
+              width="50%"
+              data-testid="skeleton-loader"
+            />
+            {[...Array(3)].map((_, i) => (
               <Skeleton
-                variant="text"
-                width="50%"
+                key={i}
+                variant="rectangular"
+                height={60}
+                sx={{ mb: 1 }}
                 data-testid="skeleton-loader"
               />
-              {[...Array(3)].map((_, i) => (
-                <Skeleton
-                  key={i}
-                  variant="rectangular"
-                  height={60}
-                  sx={{ mb: 1 }}
-                  data-testid="skeleton-loader"
-                />
-              ))}
-            </Box>
-          </Grid>
-          <Grid size={{ xs: 12, md: 6 }}>
-            <Box sx={{ p: 2 }}>
+            ))}
+          </Box>
+        </div>
+        <div className="landing-section">
+          <Box sx={{ p: 2 }}>
+            <Skeleton
+              variant="text"
+              width="50%"
+              data-testid="skeleton-loader"
+            />
+            {[...Array(3)].map((_, i) => (
               <Skeleton
-                variant="text"
-                width="50%"
+                key={i}
+                variant="rectangular"
+                height={60}
+                sx={{ mb: 1 }}
                 data-testid="skeleton-loader"
               />
-              {[...Array(3)].map((_, i) => (
-                <Skeleton
-                  key={i}
-                  variant="rectangular"
-                  height={60}
-                  sx={{ mb: 1 }}
-                  data-testid="skeleton-loader"
-                />
-              ))}
-            </Box>
-          </Grid>
-        </Grid>
-      </Container>
+            ))}
+          </Box>
+        </div>
+      </div>
     );
   }
 
   // Display error message with retry option
   if (roomsError || bookingsError) {
     return (
-      <Container maxWidth="lg" sx={{ mt: 4, textAlign: "center" }}>
-        <Typography color="error" data-testid="error-message">
-          {roomsError?.message ||
-            bookingsError?.message ||
-            "Failed to fetch data."}
-        </Typography>
-        <Button
-          variant="contained"
-          onClick={() => {
-            refetchRooms();
-            refetchBookings();
-          }}
-          sx={{ mt: 2 }}
-          aria-label="Retry fetching data"
-        >
-          Retry
-        </Button>
-      </Container>
+      <div
+        className="landing-root"
+        style={{ alignItems: "center", justifyContent: "center" }}
+      >
+        <div style={{ width: "100%", textAlign: "center" }}>
+          <Typography color="error" data-testid="error-message">
+            {roomsError?.message ||
+              bookingsError?.message ||
+              "Failed to fetch data."}
+          </Typography>
+          <Button
+            variant="contained"
+            onClick={() => {
+              refetchRooms();
+              refetchBookings();
+            }}
+            sx={{ mt: 2 }}
+            aria-label="Retry fetching data"
+          >
+            Retry
+          </Button>
+        </div>
+      </div>
     );
   }
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Typography
-        variant="h4"
-        gutterBottom
-        align="center"
-        sx={{ fontSize: { xs: "1.5rem", md: "2.25rem" } }}
-      >
-        Conference Room Booking System
-      </Typography>
-      <Grid container spacing={4}>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <RoomList
-            rooms={rooms}
-            selectedRoomId={selectedRoomId}
-            onSelectRoom={setSelectedRoomId}
-          />
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <BookingList
-            bookings={bookings}
-            roomId={selectedRoomId}
-            date={today}
-          />
-        </Grid>
-      </Grid>
-      <Box sx={{ mt: 4, textAlign: "center" }}>
+    <div className="landing-root">
+      <header className="landing-header">
+        <Typography
+          variant="h4"
+          gutterBottom
+          align="center"
+          sx={{ fontSize: { xs: "1.5rem", md: "2.25rem" } }}
+        >
+          Conference Room Booking System
+        </Typography>
+      </header>
+      <main className="landing-main">
+        <div className="landing-columns-row">
+          <div className="landing-section landing-card landing-card-dark">
+            <RoomList
+              rooms={rooms}
+              selectedRoomId={selectedRoomId}
+              onSelectRoom={setSelectedRoomId}
+            />
+          </div>
+          <div className="landing-section landing-card landing-card-dark">
+            <BookingList
+              bookings={bookings}
+              roomId={selectedRoomId}
+              date={today}
+            />
+          </div>
+        </div>
+        {/* Desktop/landscape Book a Room button and HR */}
+        <div className="landing-book-btn-desktop-wide">
+          <hr className="landing-hr-wide" />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate("/booking")}
+            aria-label="Navigate to booking page"
+            data-testid="desktop-book-btn"
+          >
+            Book a Room
+          </Button>
+        </div>
+      </main>
+      {/* Mobile/portrait Book a Room button and HR */}
+      <div className="landing-book-btn-mobile">
+        <hr className="landing-hr" />
         <Button
           variant="contained"
           color="primary"
           onClick={() => navigate("/booking")}
           aria-label="Navigate to booking page"
+          data-testid="mobile-book-btn"
         >
           Book a Room
         </Button>
-      </Box>
-    </Container>
+      </div>
+    </div>
   );
 };