fixing issue comment: (#656)

https://github.com/keycloak/keycloak-admin-ui/issues/396#issuecomment-846901717

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={
+            <ContextSelectorItem key="add">
+              <AddRealm />
+            </ContextSelectorItem>
+          }
         >
           {(filteredItems || all).map((item) => (
             <ContextSelectorItem key={item.name}>
@@ -140,9 +146,6 @@ export const RealmSelector = () => {
               {item.used && <Label>{t("recent")}</Label>}
             </ContextSelectorItem>
           ))}
-          <ContextSelectorItem key="add">
-            <AddRealm />
-          </ContextSelectorItem>
         </ContextSelector>
       )}
       {realms.length <= 5 && (

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);

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