ui(mcp): stop Revoke button from stretching across the API Keys row

The base .btn { flex: 1 } class (intentional for hero CTA pairs and
similar even-split layouts) was bleeding into the API Keys list,
where the destructive Revoke button took up most of the row instead
of sitting compact next to the key name and metadata.

Scoped override (.mcp-key-item .btn { flex: 0 0 auto }) opts the
button out of the flex-fill behavior in this specific context only.
Other .btn placements that genuinely want even-split layout are
unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Sbussiso

frontend/src/index.css

@@ -3738,6 +3738,16 @@ body {
     border-radius: 8px;
 }
 
+/* Override the base .btn { flex: 1 } so the Revoke button sizes to
+   its content instead of stretching across the row.  The base flex:1
+   is intentional for hero CTA pairs ("Get Started" / "Learn More")
+   and similar even-split layouts, but bleeds into every .btn placed
+   in a flex container.  Scoped override here keeps both use cases
+   happy without ripping the global rule out. */
+.mcp-key-item .btn {
+    flex: 0 0 auto;
+}
+
 .mcp-key-info {
     display: flex;
     flex-direction: column;