Change plan breakpoint to 1150px

The calendar view is fixed width - this is the size required to display it and the sidebar next to each other
alex9smith · Nov 20, 2024 · fcb8361 · fcb8361
1 parent 282b071
commit fcb8361
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 17 deletions.
diff --git a/frontend/src/components/Calendar/Calendar.css b/frontend/src/components/Calendar/Calendar.css
@@ -6,40 +6,46 @@
 
 /* note this is min width - I don't understand why it didn't 
 work like the rest with max-width */
-@media (min-width: 768px) {
+@media (min-width: 1150px) {
   .calendar {
     grid-template-columns: repeat(7, 105px);
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1150px) {
   .placeholder {
     display: none;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1150px) {
   .day-of-week {
     display: none;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1150px) {
   div.day {
     width: 100%;
     font-size: 28px;
     border-radius: 5px;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1150px) {
   .day-of-month {
     color: #57606a;
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1150px) {
   .day-name {
     display: none;
   }
 }
+
+@media (max-width: 1150px) {
+  .sidebar {
+    display: none;
+  }
+}
diff --git a/frontend/src/components/Plan/Plan.jsx b/frontend/src/components/Plan/Plan.jsx
@@ -1,4 +1,4 @@
-import { PageLayout } from "@primer/react";
+import { Box, PageLayout } from "@primer/react";
 import { useLoaderData } from "react-router";
 import { useState, useEffect } from "react";
 import { apiClient } from "../../services/apiClient";
@@ -33,17 +33,22 @@ function NewPlan() {
       <PageLayout.Content width={"full"} padding={"normal"}>
         <Calendar plan={plan} setPlan={setPlan} recipes={data.recipes} />
       </PageLayout.Content>
-      <PageLayout.Pane
-        position="start"
-        resizable
-        padding="normal"
-        divider="line"
-        sticky="true"
-        aria-label="recipe-list"
-        hidden={{ narrow: true, regular: false, wide: false }}
+      <Box
+        className="sidebar"
+        sx={{ borderRight: "solid", borderColor: "border.default" }}
       >
-        <FilterableRecipeList recipes={data.recipes} />
-      </PageLayout.Pane>
+        <PageLayout.Pane
+          position="start"
+          resizable
+          padding="normal"
+          divider="none"
+          sticky="true"
+          aria-label="recipe-list"
+          hidden={{ narrow: true, regular: false, wide: false }}
+        >
+          <FilterableRecipeList recipes={data.recipes} />
+        </PageLayout.Pane>
+      </Box>
     </PageLayout>
   );
 }