fix(e2e): make server-time element fill width for consistent mask

- Add flex layout to .action p to make server-time stretch
- Add #server-time flex: 1 rule across all basic-server variants
- Update golden screenshots with full-width masked time field

This ensures the Playwright mask covers a consistent width regardless
of the timestamp content, fixing screenshot comparison flakiness.

Author: ochafik

examples/basic-server-preact/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-preact/src/mcp-app.module.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {

examples/basic-server-react/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-react/src/mcp-app.module.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {

examples/basic-server-solid/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-solid/src/mcp-app.module.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {

examples/basic-server-svelte/src/App.svelte

@@ -162,6 +162,13 @@ async function handleOpenLink() {
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   textarea,
   input {
     font-family: inherit;
@@ -196,4 +203,10 @@ async function handleOpenLink() {
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+:global(#server-time) {
+  flex: 1;
+  min-width: 0;
+}
 </style>

examples/basic-server-vanillajs/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-vanillajs/src/mcp-app.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {

examples/basic-server-vue/src/App.vue

@@ -170,6 +170,13 @@ async function handleOpenLink() {
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   textarea,
   input {
     font-family: inherit;
@@ -204,4 +211,10 @@ async function handleOpenLink() {
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+:deep(#server-time) {
+  flex: 1;
+  min-width: 0;
+}
 </style>