Pull in upstream changes via Develop (#11)

* Upgrade dependency to [email protected] * v3.94.0-rc.0 * Handle up/down as well as left/right for horizontal toolbars for improved a11y (matrix-org#12305) Signed-off-by: Michael Telatynski <[email protected]> * Remove references to internal js-sdk type `CryptoBackend` (matrix-org#12321) * Remove references to internal js-sdk type `CryptoBackend` * Use `Paramteters` to avoid `ts-ignore` * Use `strong` element to semantically denote visually emphasised content (matrix-org#12320) * Use `strong` element to semantically denote visually emphasised content Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Add comment Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]> * Remove unused slider component (matrix-org#12303) It is unused as of matrix-org#12246. I noticed this while working on matrix-org#12299. * Update matrix-org (matrix-org#11966) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update all non-major dependencies (matrix-org#12322) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency stylelint-scss to v6.2.0 (matrix-org#12323) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @vector-im/compound-web to v3.1.3 (matrix-org#12281) * Update dependency @vector-im/compound-web to v3.1.3 * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Fix TAC width due to compound update (matrix-org#12326) --------- Signed-off-by: Michael Telatynski <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Telatynski <[email protected]> Co-authored-by: Florian Duros <[email protected]> * Call guest access link creation to join calls as a non registered user via the EC SPA (matrix-org#12259) * Add externall call link button if in public call room Signed-off-by: Timo K <[email protected]> * Allow configuring a spa homeserver url. Signed-off-by: Timo K <[email protected]> * temp Signed-off-by: Timo K <[email protected]> * remove homeserver url Signed-off-by: Timo K <[email protected]> * Add custom title to share dialog. So that we can use it as a "share call" dialog. Signed-off-by: Timo K <[email protected]> * - rename config options - only show link button if a guest url is provided - share dialog custom Title - rename call share labels Signed-off-by: Timo K <[email protected]> * rename to title_link Signed-off-by: Timo K <[email protected]> * add tests for ShareDialog Signed-off-by: Timo K <[email protected]> * add tests for share call button Signed-off-by: Timo K <[email protected]> * review Signed-off-by: Timo K <[email protected]> * remove comment Signed-off-by: Timo K <[email protected]> * Update src/components/views/dialogs/ShareDialog.tsx Co-authored-by: David Baker <[email protected]> --------- Signed-off-by: Timo K <[email protected]> Co-authored-by: David Baker <[email protected]> * Fix spotlight opening in TAC (matrix-org#12315) * Fix spotlight opening in TAC * Add tests * Remove `RovingTabIndexProvider` * Reset power selector on API failure to prevent state mismatch (matrix-org#12319) * Reset power selector on API failure to prevent state mismatch Signed-off-by: Michael Telatynski <[email protected]> * Allow onChange to be sync or async Signed-off-by: Michael Telatynski <[email protected]> * Add unmounted check Signed-off-by: Michael Telatynski <[email protected]> * Improve coverage Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]> * Use correct push rule to evaluate room-wide mentions (matrix-org#12318) Signed-off-by: Michael Telatynski <[email protected]> * Improve Forward Dialog a11y by switching to roving tab index interactions (matrix-org#12306) * Improve Forward Dialog a11y by switching to roving tab index interactions Signed-off-by: Michael Telatynski <[email protected]> * Improve screen reader readout Signed-off-by: Michael Telatynski <[email protected]> * Improve screen reader readout Signed-off-by: Michael Telatynski <[email protected]> * Add tests Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]> * [create-pull-request] automated change (matrix-org#12330) Co-authored-by: github-merge-queue <[email protected]> * Reuse media content/info types from the js-sdk (matrix-org#12308) * TAC: Fix CSS & component typos (matrix-org#12333) * Fix CSS & component typo * Update snapshots * Element Call: fix widget shown while its still loading (`waitForIframeLoad=false`) (matrix-org#12292) * show loading spinner also if waitForIframeLoad = false Configure EC so it waits for the content loaded action !WARNING This breaks compatibility with the full mesh branch. I would like to discuss here if/when we can do that. Signed-off-by: Timo K <[email protected]> * stop show loading screen on widget ready (instead of preparing) Signed-off-by: Timo K <[email protected]> * wait until widget loading is over before comparing screenshots Signed-off-by: Timo K <[email protected]> * fix waitForIFrame=true widgets Signed-off-by: Timo K <[email protected]> * test Signed-off-by: Timo K <[email protected]> * always start with loading true. + cleanup Signed-off-by: Timo K <[email protected]> * simplify loading Signed-off-by: Timo K <[email protected]> * update snapshots (start not in loading state for waitForIframe = true widgets) Signed-off-by: Timo K <[email protected]> --------- Signed-off-by: Timo K <[email protected]> * Upgrade dependency to [email protected] * v3.94.0 * Resetting package fields for development * Reset matrix-js-sdk back to develop branch * Refine styles of menus, toasts, popovers, and modals (matrix-org#12332) * Refine styles of menus, toasts, popovers, and modals This is a reintroduction of matrix-org#12247, with the difference that modal styles have now been refreshed as well. * Restore the fixed heights of some dialogs * Fix formatting and flaky screenshot * Make EC widget theme reactive - Update widget url when the theme changes (matrix-org#12295) * update widget url when the theme changes Signed-off-by: Timo K <[email protected]> * quick "make it EC specific" workaround proposal. Signed-off-by: Timo K <[email protected]> * use `matches` Signed-off-by: Timo K <[email protected]> * test coverage Signed-off-by: Timo K <[email protected]> * more test coverage Signed-off-by: Timo K <[email protected]> * fix jest Signed-off-by: Timo K <[email protected]> * add tests for theme changes Signed-off-by: Timo K <[email protected]> * update snapshots Signed-off-by: Timo K <[email protected]> * test for theme update with non ec widget Signed-off-by: Timo K <[email protected]> * add dark custom theme widget url Signed-off-by: Timo K <[email protected]> * trigger conditions for theme cleanup Signed-off-by: Timo K <[email protected]> * update tests using testId Signed-off-by: Timo K <[email protected]> * use typed event emitter for theme watcher Signed-off-by: Timo K <[email protected]> * simplify condition Signed-off-by: Timo K <[email protected]> --------- Signed-off-by: Timo K <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]> Signed-off-by: Timo K <[email protected]> Co-authored-by: RiotRobot <[email protected]> Co-authored-by: Michael Telatynski <[email protected]> Co-authored-by: Richard van der Hoff <[email protected]> Co-authored-by: Robin <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Florian Duros <[email protected]> Co-authored-by: Timo <[email protected]> Co-authored-by: David Baker <[email protected]> Co-authored-by: github-merge-queue <[email protected]>
verji · Mar 14, 2024 · 1a31c8c · 1a31c8c
1 parent 1054d61
commit 1a31c8c
Show file tree

Hide file tree

Showing 72 changed files with 497 additions and 439 deletions.
diff --git a/...c.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png b/...c.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
diff --git a/...ec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png b/...ec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
diff --git a/...spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png b/...spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
diff --git a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png
diff --git a/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
diff --git a/.../snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/.../snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
diff --git a/...pshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png b/...pshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png
diff --git a/...napshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png b/...napshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png
diff --git a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png
diff --git a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
diff --git a/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
diff --git a/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png
diff --git a/...s-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/...s-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
diff --git a/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
diff --git a/...-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png b/...-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
diff --git a/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/...shots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png
diff --git a/...onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png b/...onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -329,16 +329,21 @@ legend {
     justify-content: center;
 }
 
+.mx_Dialog_border {
+    z-index: var(--dialog-zIndex-standard);
+    position: relative;
+    max-height: calc(100% - var(--cpd-space-12x));
+    display: flex;
+    flex-direction: column;
+}
+
 .mx_Dialog {
     background-color: $background;
     color: $light-fg-color;
-    z-index: var(--dialog-zIndex-standard);
     font-size: $font-15px;
     position: relative;
-    padding: 24px;
-    max-height: 80%;
-    box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
-    border-radius: 8px;
+    padding: var(--cpd-space-8x) var(--cpd-space-10x);
+    box-sizing: border-box;
     overflow-y: auto;
 
     .mx_Dialog_staticWrapper & {
@@ -439,7 +444,6 @@ legend {
     width: 100%;
     height: 100%;
     background-color: $dialog-backdrop-color;
-    opacity: 0.8;
     z-index: var(--dialog-zIndex-standard-background);
 
     &.mx_Dialog_staticBackground {
@@ -483,21 +487,13 @@ legend {
 
 .mx_Dialog_header {
     position: relative;
-    padding: 3px 0;
-    margin-bottom: 10px;
+    padding: 0;
+    padding-inline-end: 20px; /* Reserve room for the close button */
+    margin-bottom: var(--cpd-space-2x);
 
     &.mx_Dialog_headerWithButton > .mx_Dialog_title {
         text-align: center;
     }
-
-    &.mx_Dialog_headerWithCancel {
-        padding-right: 20px; /* leave space for the 'X' cancel button */
-    }
-
-    &.mx_Dialog_headerWithCancelOnly {
-        padding: 0 20px 0 0;
-        margin: 0;
-    }
 }
 
 @define-mixin customisedCancelButton {
@@ -528,8 +524,8 @@ legend {
 .mx_Dialog_cancelButton {
     @mixin customisedCancelButton;
     position: absolute;
-    top: 4px;
-    right: 0;
+    top: var(--cpd-space-4x);
+    right: var(--cpd-space-4x);
 }
 
 .mx_Dialog_content {

diff --git a/res/css/structures/_ContextualMenu.pcss b/res/css/structures/_ContextualMenu.pcss
@@ -30,9 +30,10 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border-radius: 8px;
-    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
-    background-color: $menu-bg-color;
+    border-radius: 12px;
+    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
     color: $primary-content;
     position: absolute;
     z-index: 5001;

diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss
@@ -62,7 +62,7 @@ limitations under the License.
         font-weight: var(--cpd-font-weight-semibold);
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $primary-content;
+        color: var(--cpd-color-text-secondary);
         margin: 0 0 16px;
     }
 
@@ -76,7 +76,7 @@ limitations under the License.
         font-size: $font-12px;
         line-height: $font-15px;
         text-transform: uppercase;
-        color: $tertiary-content;
+        color: var(--cpd-color-text-secondary);
         margin: 20px 0 12px;
     }
 
@@ -97,7 +97,7 @@ limitations under the License.
             margin-left: 6px;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $secondary-content;
+            color: var(--cpd-color-text-primary);
         }
     }
 
@@ -106,7 +106,7 @@ limitations under the License.
         margin-left: 22px;
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $secondary-content;
+        color: var(--cpd-color-text-primary);
         position: relative;
         margin-bottom: 16px;
     }

diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss
@@ -18,7 +18,7 @@ limitations under the License.
 
 .mx_TabbedView {
     margin: 0;
-    padding: 0 0 0 16px;
+    padding: 0 0 0 var(--cpd-space-8x);
     display: flex;
     flex-direction: column;
     inset: 0;

diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss
@@ -36,16 +36,17 @@ limitations under the License.
     .mx_Toast_toast {
         grid-row: 1 / 3;
         grid-column: 1;
-        background-color: $system;
+        background-color: var(--cpd-color-bg-canvas-default);
         color: $primary-content;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
-        border-radius: 8px;
+        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+        border-radius: 12px;
         overflow: hidden;
         display: grid;
         grid-template-columns: 22px 1fr;
         column-gap: 8px;
         row-gap: 4px;
-        padding: 8px;
+        padding: var(--cpd-space-3x);
 
         &.mx_Toast_hasIcon {
             &::before,

diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss
@@ -36,26 +36,7 @@ limitations under the License.
         /* the notFirst class is for cases where the optionList might be under a header of sorts. */
         &:nth-child(n + 2),
         .mx_IconizedContextMenu_optionList_notFirst {
-            /* This is a bit of a hack when we could just use a simple border-top property, */
-            /* however we have a (kinda) good reason for doing it this way: we need opacity. */
-            /* To get the right color, we need an opacity modifier which means we have to work */
-            /* around the problem. PostCSS doesn't support the opacity() function, and if we */
-            /* use something like postcss-functions we quickly run into an issue where the */
-            /* function we would define gets passed a CSS variable for custom themes, which */
-            /* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
-            //
-            /* Therefore, we just hack in a line and border the thing ourselves */
-            &::before {
-                border-top: 1px solid $primary-content;
-                opacity: 0.1;
-                content: "";
-
-                /* Counteract the padding problems (width: 100% ignores the 40px padding, */
-                /* unless we position it absolutely then it does the right thing). */
-                width: 100%;
-                position: absolute;
-                left: 0;
-            }
+            border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
         }
 
         /* round the top corners of the top button for the hover effect to be bounded */
@@ -87,7 +68,7 @@ limitations under the License.
 
             &:hover,
             &:focus-visible {
-                background-color: $menu-selected-color;
+                background-color: var(--cpd-color-bg-action-secondary-hovered);
             }
 
             &.mx_AccessibleButton_disabled {
@@ -137,7 +118,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background-color: $icon-button-color;
+            background-color: var(--cpd-color-icon-primary);
         }
     }
 
@@ -147,7 +128,7 @@ limitations under the License.
         }
 
         .mx_IconizedContextMenu_icon::before {
-            background-color: $alert;
+            background-color: var(--cpd-color-icon-critical-primary);
         }
     }
 
@@ -172,7 +153,7 @@ limitations under the License.
 
     &.mx_IconizedContextMenu_compact {
         .mx_IconizedContextMenu_optionList > * {
-            padding: 8px 16px 8px 11px;
+            padding: 8px 16px 8px 12px;
         }
     }
 

diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -29,7 +29,6 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $icon-button-color;
         }
     }
 

diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss
@@ -21,7 +21,7 @@ limitations under the License.
 /* -------------------------------------------------------------------------------- */
 
 /* Override legacy/default styles for dialogs */
-.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
+.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
     padding: 0; /* we'll manage it ourselves */
     color: $primary-content;
 }
@@ -41,14 +41,14 @@ limitations under the License.
             font-size: $font-24px;
             margin: 0; /* managed by header class */
         }
+    }
 
-        .mx_CompoundDialog_cancelButton {
-            @mixin customisedCancelButton;
-            /* Align with middle of title, 30px from right edge */
-            position: absolute;
-            top: 30px;
-            right: 30px;
-        }
+    .mx_CompoundDialog_cancelButton {
+        @mixin customisedCancelButton;
+        /* Align with corner radius of dialog */
+        position: absolute;
+        top: var(--cpd-space-4x);
+        right: var(--cpd-space-4x);
     }
 
     .mx_CompoundDialog_form {

diff --git a/res/css/views/dialogs/_LocationViewDialog.pcss b/res/css/views/dialogs/_LocationViewDialog.pcss
@@ -16,11 +16,6 @@ limitations under the License.
 
 .mx_LocationViewDialog_wrapper .mx_Dialog {
     padding: 0px;
-
-    /* Unset contain and position to allow the close button
-    to appear outside the dialog */
-    contain: unset;
-    position: unset;
 }
 
 .mx_LocationViewDialog {
@@ -37,16 +32,13 @@ limitations under the License.
         .mx_Dialog_title {
             display: none;
         }
+    }
 
-        .mx_Dialog_cancelButton {
-            z-index: 4010;
-            position: absolute;
-            right: 5vw;
-            top: 5vh;
-            width: 20px;
-            height: 20px;
-            background-color: $dialog-close-external-color;
-        }
+    .mx_Dialog_cancelButton {
+        z-index: 4010;
+        position: absolute;
+        left: var(--cpd-space-4x);
+        top: var(--cpd-space-4x);
     }
 }
 

diff --git a/res/css/views/dialogs/_SettingsDialog.pcss b/res/css/views/dialogs/_SettingsDialog.pcss
@@ -20,12 +20,12 @@ limitations under the License.
 .mx_SpaceSettingsDialog,
 .mx_SpacePreferencesDialog {
     width: 90vw;
-    max-width: 1000px;
+    max-width: 980px;
     /* set the height too since tabbed view scrolls itself. */
     height: 80vh;
 
     .mx_TabbedView {
-        top: 65px;
+        top: 90px;
     }
 
     .mx_TabbedView .mx_SettingsTab {

diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -14,38 +14,46 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SpotlightDialog_wrapper .mx_Dialog {
-    border-radius: 8px;
-    overflow-y: initial;
-    position: relative;
-    height: 60%;
-    padding: 0;
-    contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
-
-    #mx_SpotlightDialog_keyboardPrompt {
-        position: absolute;
-        padding: $spacing-8;
+.mx_SpotlightDialog_wrapper {
+    .mx_Dialog_border {
+        /* Disable the glass border as this dialog wasn't designed with it in mind */
+        display: contents;
+    }
+
+    .mx_Dialog {
+        width: fit-content;
         border-radius: 8px;
-        background-color: $background;
-        top: -60px; /* relative to the top of the modal */
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: $font-12px;
-        line-height: $font-15px;
-        color: $secondary-content;
-
-        kbd {
-            display: inline-block;
-            padding: 2px $spacing-4;
-            margin: 0 $spacing-4;
-            border-radius: 6px;
-            background-color: $quinary-content;
-            vertical-align: middle;
-            color: $tertiary-content;
-            /* To avoid any styling inherent with <kbd> elements */
-            font-family: inherit;
-            font-weight: inherit;
-            font-size: inherit;
+        overflow-y: initial;
+        position: relative;
+        height: 60%;
+        padding: 0;
+        contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
+
+        #mx_SpotlightDialog_keyboardPrompt {
+            position: absolute;
+            padding: $spacing-8;
+            border-radius: 8px;
+            background-color: $background;
+            top: -60px; /* relative to the top of the modal */
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+
+            kbd {
+                display: inline-block;
+                padding: 2px $spacing-4;
+                margin: 0 $spacing-4;
+                border-radius: 6px;
+                background-color: $quinary-content;
+                vertical-align: middle;
+                color: $tertiary-content;
+                /* To avoid any styling inherent with <kbd> elements */
+                font-family: inherit;
+                font-weight: inherit;
+                font-size: inherit;
+            }
         }
     }
 }

diff --git a/res/css/views/dialogs/_TermsDialog.pcss b/res/css/views/dialogs/_TermsDialog.pcss
@@ -19,7 +19,7 @@ limitations under the License.
  * terms dialog sizing when it will appear for the integration manager so that
  * it gets the same basic size as the IM's own modal.
  */
-.mx_TermsDialog_forIntegrationManager .mx_Dialog {
+.mx_TermsDialog_forIntegrationManager .mx_Dialog_border {
     width: 60%;
     height: 70%;
     box-sizing: border-box;