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[];