diff --git a/apps/tasks/app/globals.css b/apps/tasks/app/globals.css
index f7b7539..3674ad5 100644
--- a/apps/tasks/app/globals.css
+++ b/apps/tasks/app/globals.css
@@ -252,3 +252,107 @@ main {
 ::selection {
   background: rgba(59, 130, 246, 0.3);
 }
+
+/* ============================
+   FullCalendar Mobile Layout Fix
+   ============================ */
+
+/* Base toolbar styles - compact */
+.fc .fc-toolbar {
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  row-gap: 6px;
+  font-size: 14px;
+}
+
+/* Title: prevent vertical text wrapping */
+.fc .fc-toolbar-title {
+  font-size: 18px !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Compact buttons */
+.fc .fc-button {
+  padding: 4px 10px !important;
+  font-size: 13px !important;
+  line-height: 1.4 !important;
+}
+
+/* Button group: no extra gaps */
+.fc .fc-button-group {
+  gap: 0;
+}
+
+/* Mobile breakpoint: stack toolbar rows */
+@media (max-width: 640px) {
+  .fc .fc-toolbar {
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .fc .fc-toolbar-chunk {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+  }
+
+  /* Title on its own row, centered, smaller */
+  .fc .fc-toolbar-title {
+    font-size: 15px !important;
+    text-align: center;
+    width: 100%;
+    order: -1;
+  }
+
+  /* Smaller buttons on mobile */
+  .fc .fc-button {
+    padding: 3px 8px !important;
+    font-size: 12px !important;
+    min-height: 32px !important;
+  }
+
+  /* View switcher as pill buttons */
+  .fc .fc-button-group .fc-button {
+    border-radius: 0 !important;
+  }
+  .fc .fc-button-group .fc-button:first-child {
+    border-radius: 9999px 0 0 9999px !important;
+  }
+  .fc .fc-button-group .fc-button:last-child {
+    border-radius: 0 9999px 9999px 0 !important;
+  }
+
+  /* Reduce page padding */
+  .fc {
+    font-size: 12px;
+  }
+
+  /* Time grid slot labels smaller */
+  .fc .fc-timegrid-slot-label {
+    font-size: 10px;
+  }
+
+  /* Day header smaller */
+  .fc .fc-col-header-cell-cushion {
+    font-size: 12px;
+    padding: 4px 2px;
+  }
+}
+
+/* Small mobile (< 400px) - even tighter */
+@media (max-width: 400px) {
+  .fc .fc-toolbar-title {
+    font-size: 13px !important;
+  }
+
+  .fc .fc-button {
+    padding: 2px 6px !important;
+    font-size: 11px !important;
+    min-height: 28px !important;
+  }
+}