Make visits look nicer

app/assets/stylesheets/application.tailwind.css

@@ -78,7 +78,7 @@
   position: absolute;
   top: 10px;
   right: 70px; /* Position to the left of the control buttons with margin */
-  width: 338px;
+  width: 24rem;
   max-height: calc(100% - 20px);
   background: rgba(255, 255, 255, 0.5);
   border-radius: 8px;
@@ -89,6 +89,18 @@
   z-index: 450;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   height: auto; /* Make height fit content */
+  cursor: default; /* Override map cursor */
+}
+
+.leaflet-drawer * {
+  cursor: default; /* Ensure all children have default cursor */
+}
+
+.leaflet-drawer a,
+.leaflet-drawer button,
+.leaflet-drawer .btn,
+.leaflet-drawer input[type="checkbox"] {
+  cursor: pointer; /* Interactive elements get pointer cursor */
 }
 
 .leaflet-drawer.open {
@@ -128,6 +140,5 @@
 
 /* Cancel Selection Button */
 #cancel-selection-button {
-  margin-bottom: 1rem;
   width: 100%;
 }

app/javascript/maps/visits.js

@@ -369,7 +369,7 @@ export class VisitsManager {
       const visitsCount = dateGroups[dateStr].count || 0;
 
       return `
-        <div class="flex justify-between items-center py-1 border-b border-base-300 last:border-0 my-2 hover:bg-accent hover:text-accent-content transition-colors">
+        <div class="flex justify-between items-center py-1 border-b border-base-300 last:border-0 my-2 hover:bg-accent hover:text-accent-content transition-colors border-radius-md">
           <div class="font-medium">${dateStr}</div>
           <div class="flex gap-2">
             ${pointsCount > 0 ? `<div class="badge badge-secondary">${pointsCount} pts</div>` : ''}
@@ -379,14 +379,18 @@ export class VisitsManager {
       `;
     }).join('');
 
-    // Create the whole panel
+    // Create the whole panel with collapsible content
     return `
-      <div class="bg-base-100 rounded-lg p-3 mb-4 shadow-sm">
+      <details class="collapse collapse-arrow bg-base-100 rounded-lg mb-4 shadow-sm">
-        <h3 class="text-lg font-bold mb-2">Data in Selected Area</h3>
+        <summary class="collapse-title text-lg font-bold">
+          Data in Selected Area
+        </summary>
+        <div class="collapse-content">
           <div class="divide-y divide-base-300">
             ${dateItems}
           </div>
         </div>
+      </details>
     `;
   }
 
@@ -411,20 +415,20 @@ export class VisitsManager {
 
     // Create a button container
     const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'flex gap-2 mb-4';
+    buttonContainer.className = 'flex flex-col gap-2 mb-4';
     buttonContainer.id = 'selection-button-container';
 
     // Cancel button
     const cancelButton = document.createElement('button');
     cancelButton.id = 'cancel-selection-button';
-    cancelButton.className = 'btn btn-sm btn-warning flex-1';
+    cancelButton.className = 'btn btn-sm btn-warning w-full';
     cancelButton.textContent = 'Cancel Selection';
     cancelButton.onclick = () => this.clearSelection();
 
     // Delete all selected points button
     const deleteButton = document.createElement('button');
     deleteButton.id = 'delete-selection-button';
-    deleteButton.className = 'btn btn-sm btn-error flex-1';
+    deleteButton.className = 'btn btn-sm btn-error w-full';
     deleteButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline mr-1"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>Delete Points';
     deleteButton.onclick = () => this.deleteSelectedPoints();
 
@@ -655,9 +659,9 @@ export class VisitsManager {
     drawer.style.overflowY = 'auto';
 
     drawer.innerHTML = `
-      <div class="p-3 drawer flex flex-col items-center">
+      <div class="p-2 my-2 drawer flex flex-col items-center">
         <h2 class="text-xl font-bold mb-4 text-accent-content w-full">Recent Visits</h2>
-        <div id="visits-list" class="space-y-2 w-64">
+        <div id="visits-list" class="space-y-2 w-full">
           <p class="text-gray-500">Loading visits...</p>
         </div>
       </div>
@@ -890,7 +894,7 @@ export class VisitsManager {
         const visitStyle = visit.status === 'suggested' ? 'border: 2px dashed #60a5fa;' : '';
 
         return `
-          <div class="w-full p-3 m-2 rounded-lg hover:bg-base-300 transition-colors visit-item relative ${bgClass}"
+          <div class="w-full p-3 mt-2 rounded-lg hover:bg-base-300 transition-colors visit-item relative ${bgClass}"
                style="${visitStyle}"
                data-lat="${visit.place?.latitude || ''}"
                data-lng="${visit.place?.longitude || ''}"
@@ -918,8 +922,20 @@ export class VisitsManager {
         `;
       }).join('');
 
+    // Wrap visits in a collapsible section
+    const visitsSection = visits && visits.length > 0 ? `
+      <details class="collapse collapse-arrow bg-base-100 rounded-lg mb-4 shadow-sm">
+        <summary class="collapse-title text-lg font-bold">
+          Visits (${visits.filter(v => v.status !== 'declined').length})
+        </summary>
+        <div class="collapse-content">
+          ${visitsHtml}
+        </div>
+      </details>
+    ` : '';
+
     // Combine date summary and visits HTML
-    container.innerHTML = dateGroupsHtml + visitsHtml;
+    container.innerHTML = dateGroupsHtml + visitsSection;
 
     // Add the circles layer to the map
     this.visitCircles.addTo(this.map);

e2e/map/map-side-panel.spec.js

@@ -142,7 +142,6 @@ test.describe('Side Panel', () => {
     const visitCount = await visitItems.count();
 
     const noVisitsMessage = page.locator('#visits-list p.text-gray-500');
-    const hasNoVisitsMessage = await noVisitsMessage.count() > 0;
 
     // Either we have visits OR we have a "no visits" message (not "Loading...")
     if (visitCount > 0) {