From 56175aaf8661b21788cc6d6f88454aa019e534cc Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 11 Mar 2026 02:13:41 +0800
Subject: [PATCH] Fix calendar popover, dropdown clipping, and header spacing
 across all tabs

Add dark-themed FullCalendar "+more" popover with CSS X close button
(replaces broken font icon). Add pr-8 to all mobile Select dropdowns
to prevent text clipping under chevron. Normalize header gap to
gap-2 md:gap-4 across all page headers for tighter mobile layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/locations/LocationsPage.tsx    |  2 +-
 frontend/src/components/people/PeoplePage.tsx |  2 +-
 .../src/components/projects/ProjectsPage.tsx  |  4 +-
 .../components/reminders/RemindersPage.tsx    | 10 +--
 frontend/src/components/todos/TodosPage.tsx   |  4 +-
 frontend/src/index.css                        | 68 +++++++++++++++++++
 6 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/locations/LocationsPage.tsx b/frontend/src/components/locations/LocationsPage.tsx
index 00bee6a..0c9cfae 100644
--- a/frontend/src/components/locations/LocationsPage.tsx
+++ b/frontend/src/components/locations/LocationsPage.tsx
@@ -285,7 +285,7 @@ export default function LocationsPage() {
   return (
     <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
-      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
+      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
         <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Locations</h1>
 
         <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
diff --git a/frontend/src/components/people/PeoplePage.tsx b/frontend/src/components/people/PeoplePage.tsx
index 3484b55..93a7058 100644
--- a/frontend/src/components/people/PeoplePage.tsx
+++ b/frontend/src/components/people/PeoplePage.tsx
@@ -555,7 +555,7 @@ export default function PeoplePage() {
   return (
     <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
-      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
+      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
         <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">People</h1>
         <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
           <CategoryFilterBar
diff --git a/frontend/src/components/projects/ProjectsPage.tsx b/frontend/src/components/projects/ProjectsPage.tsx
index 823d397..8980863 100644
--- a/frontend/src/components/projects/ProjectsPage.tsx
+++ b/frontend/src/components/projects/ProjectsPage.tsx
@@ -71,13 +71,13 @@ export default function ProjectsPage() {
   return (
     <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
-      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
+      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
         <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Projects</h1>
 
         <Select
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
-          className="h-8 text-sm w-auto md:hidden"
+          className="h-8 text-sm w-auto pr-8 md:hidden"
         >
           {statusFilters.map((sf) => (
             <option key={sf.value} value={sf.value}>{sf.label}</option>
diff --git a/frontend/src/components/reminders/RemindersPage.tsx b/frontend/src/components/reminders/RemindersPage.tsx
index 6cdd1e9..781d80f 100644
--- a/frontend/src/components/reminders/RemindersPage.tsx
+++ b/frontend/src/components/reminders/RemindersPage.tsx
@@ -100,13 +100,13 @@ export default function RemindersPage() {
   return (
     <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
-      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
+      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
         <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Reminders</h1>
 
         <Select
           value={filter}
           onChange={(e) => setFilter(e.target.value as typeof filter)}
-          className="h-8 text-sm w-auto md:hidden"
+          className="h-8 text-sm w-auto pr-8 md:hidden"
         >
           {statusFilters.map((sf) => (
             <option key={sf.value} value={sf.value}>{sf.label}</option>
@@ -135,17 +135,17 @@ export default function RemindersPage() {
 
         <div className="flex-1" />
 
-        <div className="relative">
+        <div className="relative shrink-0">
           <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
           <Input
             placeholder="Search..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-32 sm:w-52 h-8 pl-8 text-sm ring-inset"
+            className="w-28 sm:w-52 h-8 pl-8 text-sm ring-inset"
           />
         </div>
 
-        <Button onClick={handleCreateNew} size="sm">
+        <Button onClick={handleCreateNew} size="sm" className="shrink-0">
           <Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Reminder</span>
         </Button>
       </div>
diff --git a/frontend/src/components/todos/TodosPage.tsx b/frontend/src/components/todos/TodosPage.tsx
index 36ed396..cfbdec3 100644
--- a/frontend/src/components/todos/TodosPage.tsx
+++ b/frontend/src/components/todos/TodosPage.tsx
@@ -129,14 +129,14 @@ export default function TodosPage() {
   return (
     <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
-      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
+      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
         <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Todos</h1>
 
         {/* Priority filter */}
         <Select
           value={priorityFilter}
           onChange={(e) => setPriorityFilter(e.target.value as typeof priorityFilter)}
-          className="h-8 text-sm w-auto md:hidden"
+          className="h-8 text-sm w-auto pr-8 md:hidden"
         >
           {priorityFilters.map((pf) => (
             <option key={pf.value} value={pf.value}>{pf.label}</option>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b0a5089..4f4526f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -193,6 +193,74 @@
   font-weight: 600;
 }
 
+/* ── FullCalendar "+more" popover fixes ── */
+.fc .fc-more-popover {
+  background-color: hsl(0 0% 5%);
+  border-color: hsl(0 0% 14.9%);
+  border-radius: 0.5rem;
+  min-width: 220px;
+  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.5);
+}
+
+.fc .fc-more-popover .fc-popover-header {
+  background-color: hsl(0 0% 7%);
+  color: hsl(0 0% 98%);
+  padding: 8px 12px;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.fc .fc-more-popover .fc-popover-body {
+  padding: 8px;
+}
+
+/* Fix broken close icon — replace font icon with a CSS X */
+.fc .fc-more-popover .fc-popover-close {
+  font-size: 0;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.fc .fc-more-popover .fc-popover-close:hover {
+  opacity: 1;
+}
+
+.fc .fc-more-popover .fc-popover-close::before,
+.fc .fc-more-popover .fc-popover-close::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px;
+  height: 2px;
+  background-color: hsl(0 0% 98%);
+  border-radius: 1px;
+}
+
+.fc .fc-more-popover .fc-popover-close::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.fc .fc-more-popover .fc-popover-close::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+@media (max-width: 767px) {
+  .fc .fc-more-popover {
+    min-width: 200px;
+  }
+  .fc .fc-more-popover .fc-popover-body {
+    padding: 6px;
+  }
+  .fc .fc-more-popover .fc-daygrid-event {
+    font-size: 0.7rem;
+    padding: 2px 6px;
+    margin-bottom: 2px;
+  }
+}
+
 /* ── Chromium native date picker icon fix (safety net) ── */
 input[type="date"]::-webkit-calendar-picker-indicator,
 input[type="datetime-local"]::-webkit-calendar-picker-indicator {