fix: Add max widths to debug page message states

Author: mike-plummer

cli/CHANGELOG.md

@@ -10,6 +10,7 @@ _Released 02/14/2023 (PENDING)_
 **Misc:**
 
 - Improved the layout of the Debug Page on smaller viewports when there is a pending run. Addresses [#25664](https://github.com/cypress-io/cypress/issues/25664).
+- Improved the layout of the Debug Page when displaying informational messages. Addresses [#25669](https://github.com/cypress-io/cypress/issues/25669).
 - Icons in Debug page will no longer shrink at small viewports. Addresses [#25665](https://github.com/cypress-io/cypress/issues/25665).
 
 ## 12.5.1

packages/app/src/debug/DebugOverLimit.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col items-center"
+    class="flex flex-col max-w-440px items-center"
   >
     <LockedProject :class="iconClasses" />
     <span class="font-medium mt-24px text-gray-900">

packages/app/src/debug/empty/DebugEmptyView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col my-45px items-center">
+  <div class="flex flex-col mx-auto my-45px max-w-640px items-center">
     <div class="flex flex-col items-center justify-evenly">
       <div><i-cy-box-open_x48 class="icon-dark-gray-500 icon-light-indigo-100" /></div>
       <div class="flex flex-col mx-[20%] mt-25px mb-20px items-center">