diff --git a/src/components/realm-selector/RealmSelector.tsx b/src/components/realm-selector/RealmSelector.tsx index 3849cd4b79..12664f235f 100644 --- a/src/components/realm-selector/RealmSelector.tsx +++ b/src/components/realm-selector/RealmSelector.tsx @@ -37,6 +37,7 @@ export const RealmSelector = () => { const { t } = useTranslation("common"); const recentUsed = new RecentUsed(); const all = recentUsed.used + .filter((r) => r !== realm) .map((name) => { return { name, used: true }; }) @@ -133,6 +134,11 @@ export const RealmSelector = () => { searchInputValue={search} onSearchInputChange={(value) => setSearch(value)} className="keycloak__realm_selector__context_selector" + footer={ + + + + } > {(filteredItems || all).map((item) => ( @@ -140,9 +146,6 @@ export const RealmSelector = () => { {item.used && } ))} - - - )} {realms.length <= 5 && ( diff --git a/src/components/realm-selector/realm-selector.css b/src/components/realm-selector/realm-selector.css index 0df592c6bd..40fd0473f1 100644 --- a/src/components/realm-selector/realm-selector.css +++ b/src/components/realm-selector/realm-selector.css @@ -31,13 +31,6 @@ text-align: left; } -/* the last child is the realm selector button, and this is the only way to style the li around it */ -.keycloak__realm_selector__context_selector li:last-child { - position: sticky; - bottom: 0; - background-color: var(--pf-c-context-selector__menu--BackgroundColor); -} - .keycloak__page_nav__nav_item__realm-selector { margin-top: var(--pf-c-nav__link--PaddingTop); padding-right: var(--pf-c-nav__link--PaddingRight); diff --git a/src/components/realm-selector/recent-used.ts b/src/components/realm-selector/recent-used.ts index be49955821..8fb1961de7 100644 --- a/src/components/realm-selector/recent-used.ts +++ b/src/components/realm-selector/recent-used.ts @@ -1,5 +1,5 @@ export class RecentUsed { - private readonly MAX_NUM = 3; + private readonly MAX_NUM = 4; // 3 plus current realm private readonly KEY = "recent-used-realms"; private recentUsedRealms: string[];