Avoid reconnection modal taking up entire screen, not being able to i… (

dotnet#3189)

* Avoid reconnection modal taking up entire screen, not being able to interact with page

* add slight padding, shadow

---------

Co-authored-by: Adam Ratzman <adamratzman@microsoft.com>
(cherry picked from commit 87fab1e)

src/Aspire.Dashboard/wwwroot/css/app.css

@@ -97,6 +97,23 @@ h1 {
  }
 
  #components-reconnect-modal {
+     /* avoid making modal take the entire screen dimensions */
+     inset: unset !important;
+
+     /* force modal to be compact, centered, slightly padded, and towards the top */
+     top: 5% !important;
+     left: 30% !important;
+     right: 30% !important;
+     height: 105px;
+     padding: 2px;
+
+     /* add a slight shadow */
+     box-shadow: 2px 2px 2px var(--neutral-fill-secondary-rest);
+
+     /* avoid modal being see-through */
+     opacity: 1 !important;
+
+     /* ensure sufficient contrast between all elements in the modal and its background */
      background-color: var(--reconnection-ui-bg) !important;
  }