From 0a809f021c6a8293ad99dd118424161c7a45bdff Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 3 Apr 2024 16:30:02 -0400 Subject: [PATCH] =?UTF-8?q?Avoid=20reconnection=20modal=20taking=20up=20en?= =?UTF-8?q?tire=20screen,=20not=20being=20able=20to=20i=E2=80=A6=20(#3189)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Avoid reconnection modal taking up entire screen, not being able to interact with page * add slight padding, shadow --------- Co-authored-by: Adam Ratzman (cherry picked from commit 87fab1eadc79256df25ba4436ad8c3bfd7ab3ce2) --- src/Aspire.Dashboard/wwwroot/css/app.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css index 9c00a62cd7..4afe927ca6 100644 --- a/src/Aspire.Dashboard/wwwroot/css/app.css +++ b/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; }