Add scrollable widget, expand/collapse toggle, inline name editing

- Fix overflow by making card body scrollable with thin custom scrollbar
- Add expand/collapse chevron button toggling row-span-1 to row-span-2
- Add inline name editing on hover (pencil icon) with Enter/Escape/blur
- Add PATCH /api/services endpoint for renaming with log history update
- Add rename button in detail modal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/api/services/route.ts

@@ -43,6 +43,39 @@ export async function POST(request: Request) {
     }
 }
 
+export async function PATCH(request: Request) {
+    try {
+        const { id, name } = await request.json();
+
+        if (!id || !name) {
+            return NextResponse.json({ error: 'ID and new name are required' }, { status: 400 });
+        }
+
+        const db = await getDb();
+
+        const service = await db.get('SELECT name FROM monitored_services WHERE id = ?', id);
+        if (!service) {
+            return NextResponse.json({ error: 'Service not found' }, { status: 404 });
+        }
+
+        const oldName = service.name;
+        const newName = name.trim();
+
+        await db.run('UPDATE monitored_services SET name = ? WHERE id = ?', newName, id);
+        // Update existing logs to match the new name
+        await db.run('UPDATE uptime_logs SET service_name = ? WHERE service_name = ?', newName, oldName);
+
+        return NextResponse.json({ success: true });
+    } catch (error: unknown) {
+        const msg = error instanceof Error ? error.message : 'Unknown error';
+        if (msg.includes('UNIQUE constraint')) {
+            return NextResponse.json({ error: 'A service with that name already exists' }, { status: 409 });
+        }
+        console.error('Service rename error:', error);
+        return NextResponse.json({ error: 'Failed to rename service' }, { status: 500 });
+    }
+}
+
 export async function DELETE(request: Request) {
     try {
         const { id } = await request.json();

app/globals.css

@@ -24,3 +24,22 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Thin scrollbar for widget overflow areas */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: #404040 transparent;
+}
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: #404040;
+  border-radius: 2px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: #525252;
+}