539/careers-section-styling-fix

src/app/components/elements/CareersBanner.tsx

@@ -30,7 +30,7 @@ interface CareerCardProps {
 }
 
 const CareerCard = ({ imgSrc, imgAlt, title, text, linkTo, linkText, children }: CareerCardProps) => (
-  <Card className="career-card h-100">
+  <Card className="career-card h-100 w-100">
     {imgSrc && <CardImg variant="top" src={imgSrc} alt={imgAlt} className="career-media-row-image" />}
     <CardBody className="career-card-body d-flex flex-wrap flex-column">
       {children}
@@ -50,12 +50,12 @@ const videoId = careerVideos[0].video;
 export const CareersBanner = () => {
   const user = useAppSelector(selectors.user.orNull);
   return (
-    <Container className="py-4 py-lg-5">
+    <Container className="pt-4 pb-5">
       <div className="career-background-img">
         <Container className="career-section">
           <h4 className="career-title mb-4">Careers</h4>
-          <Row className="career-media-row gy-4 justify-content-center">
-            <Col xs={12} sm={10} md={10} lg={5}>
+          <Row className="career-media-row justify-content-center">
+            <Col xs={12} sm={10} lg={6}>
               <CareerCard
                 imgSrc="/assets/cs_journeys.png"
                 imgAlt="cs journeys"
@@ -65,7 +65,7 @@ export const CareersBanner = () => {
                 linkText="Read our interviews"
               />
             </Col>
-            <Col xs={12} sm={10} md={10} lg={5}>
+            <Col className="mt-4 mt-lg-0" xs={12} sm={10} lg={6}>
               <CareerCard
                 title={isStudent(user) ? "Linking computer science to the real world" : "Computer Science at work"}
                 text={<CsAtWorkDescription />}

src/app/components/elements/cards/NewsCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { Card, CardBody, CardImg, CardText } from "reactstrap";
+import { Card, CardBody, CardImg, CardTitle, CardText } from "reactstrap";
 import { IsaacPodDTO } from "../../../../IsaacApiTypes";
 import { apiHelper } from "../../../services";
 
@@ -30,11 +30,11 @@ export const NewsCard = ({ newsItem, showTitle, linkText = "Find out more" }: Ne
           <span className="d-block my-2">
             {showTitle ? (
               <div>
-                <h3 className="card-title">{title}</h3>
+                <CardTitle className="card-title">{title}</CardTitle>
                 <p>{value}</p>
               </div>
             ) : (
-              <h3 className="card-title">{value}</h3>
+              <CardTitle className="card-title">{value}</CardTitle>
             )}
           </span>
         </div>

src/app/components/pages/Careers.tsx

@@ -73,7 +73,7 @@ const CareerPanel = ({ video, title, description, name, job, reversed, url }: Ca
 
 export const Careers = () => (
   <Container id="careers-page">
-    <TitleAndBreadcrumb currentPageTitle="Careers in Computer Science" />
+    <TitleAndBreadcrumb currentPageTitle="Careers" />
     <div className="mt-4" />
 
     <section id="careers" className="d-flex justify-content-center flex-column align-items-center pattern-03-reverse">

src/scss/common/careers.scss

@@ -33,19 +33,21 @@
     padding: 10px 30px;
   }
 
-  &-media-row {
-    gap: 100px;
-  }
-
   &-media-row-image,
   &-media-row-video {
     width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 5px 5px 0 0;
+    max-height: 300px;
   }
   &-media-row-video {
-    height: 250px;
+    height: 300px;
+    display: block;
+
+    @media (max-width: 1200px) {
+      height: 250px;
+    }
   }
 
   &-link-column {

src/test/pages/Careers.test.tsx

@@ -13,7 +13,7 @@ const renderCareers = () => {
 describe("Careers", () => {
   it("displays the page title correctly", () => {
     renderCareers();
-    const pageTitle = screen.getByRole("heading", { name: "Careers in Computer Science" });
+    const pageTitle = screen.getByRole("heading", { name: "Careers" });
     expect(pageTitle).toBeInTheDocument();
   });