Dashboard Calendar Month/Year Spacing Issue

src/app/(main)/dashboard/components/Calendar/Calendar.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { format } from "date-fns";
+import Calendar from "./Calendar";
+import { rootReducer } from "@/store/store";
+
+describe("Calendar Component", () => {
+  // not the best test. maybe refactor to e2e test later
+  it("displays the month and year on a single line", () => {
+    const store = configureStore({
+      reducer: rootReducer,
+    });
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <Calendar />
+      </Provider>,
+    );
+
+    const currentDate = new Date();
+    const formattedDate = format(currentDate, "MMMM y");
+    const monthYearElement = getByText(formattedDate);
+
+    expect(monthYearElement.closest("div")).toHaveClass("whitespace-nowrap");
+  });
+});

src/app/(main)/dashboard/components/Calendar/Calendar.tsx

@@ -50,7 +50,7 @@ export default function Calendar({
       {/* CALENDAR */}
       <div className="flex h-full min-w-[400px] max-w-[400px] flex-col items-center border-base-100 p-6 min-[1200px]:min-w-[600px] min-[1200px]:border-r-2 min-[1200px]:px-28 min-[1470px]:min-w-[400px] min-[1470px]:px-6">
         <div className="flex w-full items-center">
-          <div className="flex w-full items-center justify-between gap-10 min-[1200px]:relative">
+          <div className="flex w-full items-center justify-between whitespace-nowrap min-[1200px]:relative">
             {/* CALENDAR CONTROLS */}
             <button
               type="button"

src/store/store.ts

@@ -34,7 +34,8 @@ const persistConfig = {
   whitelist: ["ideation", "sprint"],
 };
 
-const rootReducer = combineReducers({
+// Root reducer should be used as import directly only for tests
+export const rootReducer = combineReducers({
   modal: modalReducer,
   auth: authReducer,
   user: userReducer,