Merge branch 'main' into jms/con-cant-win

app/globals.scss

@@ -295,15 +295,16 @@ footer ul svg:hover {
 }
 
 /* NAVBAR */
+/* Note, the below is not in Josh's CSS file, but required to avoid the navbar spilling in the X-axis on small devices */
 /* Below 360px, the Navigation component won't naturally fit, so start to scale down the text */
-/* Not In Josh CSS
 .brand-text {
   @media (max-width: 359.98px) {
     font-size: 5.25vw;
   }
 }
 
 /* Below 385px, the NavWithHamburger component won't naturally fit, so start to scale down the text */
+/* NOTE: Hamburger navbar currently unused, but keep this around in case we want/need it in future */
 /*
 .hamburger-brand-text {
   @media (max-width: 384.98px) {

components/navigation/NavWithHamburger.tsx

@@ -14,7 +14,9 @@ import logo from "@/assets/stop-the-tories-logo-transparent.png";
 import { rubik } from "@/utils/Fonts";
 import { FaBoltLightning, FaMagnifyingGlass } from "react-icons/fa6";
 
-import styles from "./styles.module.css";
+/* NOTE: Currently unused, if we want to use again, uncomment the .hamburger-brand-text
+ * style in globals.scss!
+ */
 
 // Navbar with a hamburger menu which is never expanded, and is populated via Storyblok
 // so non-dev users can add items to the hamburger menu easily.

components/navigation/Navigation.tsx

@@ -16,8 +16,8 @@ import { FaBoltLightning, FaMagnifyingGlass } from "react-icons/fa6";
 // menu. Users need to scroll to the footer to see links to non-primary pages.
 const Navigation = () => {
   return (
-    <Container fluid className="bg-light sticky-top">
-      <Navbar className={"py-3 " + rubik.className}>
+    <Container fluid className="bg-light sticky-top px-2">
+      <Navbar className={`${rubik.className} py-2 py-sm-3`}>
         <Container className="px-0">
           {/* Branding section - left-aligned */}
           <Navbar.Brand href="/" className="d-flex align-items-center">
@@ -37,12 +37,12 @@ const Navigation = () => {
           <Navbar.Collapse>
             {/* pushes the buttons to the right */}
             <Nav as="ul" className="ms-auto"></Nav>
-            <Button variant="dark" href="/">
+            <Button href="/" variant="dark" className="px-2 px-sm-3">
               <FaMagnifyingGlass className="me-0 me-sm-2" />
               <span className="d-none d-sm-inline-block">Search</span>
             </Button>
-            <Button href="/join" className="ms-2">
-              <FaBoltLightning className="d-none d-md-inline-block" />
+            <Button href="/join" className="px-2 px-sm-3 ms-1 ms-sm-2 ms-lg-3 ">
+              <FaBoltLightning className="d-none d-sm-inline-block" />
               Join
             </Button>
           </Navbar.Collapse>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stt-next",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "engines": {
     "npm": ">=9.0.0 <10.0.0",
     "node": ">=18.0.0 <19.0.0"