From ca99ae4c8a1e21117f308ef4fca6e7150199906a Mon Sep 17 00:00:00 2001
From: Felix van Hove <fvanhove@gmx.de>
Date: Sun, 20 Jul 2025 21:56:48 +0200
Subject: [PATCH] fix: fix rendering of server dropdown on login page

On regular screen sizes, the server dropdown stays inside of the login
bar now.

FIXES: WEB-206
---
 src/app/login/login.component.html                    |  6 +++---
 src/app/login/login.component.scss                    | 10 +++++++++-
 .../server-selector/server-selector.component.html    | 11 +++++++----
 .../server-selector/server-selector.component.scss    | 10 ----------
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ef5b92df5..fe047bf56 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -40,9 +40,9 @@
 
   <div class="layout-column flex-gt-sm-30 login-container">
     <!-- Language Selector to the extreme right -->
-    <div class="layout-row-reverse flex-auto">
-      <mifosx-language-selector class="p-r-10 p-t-10"></mifosx-language-selector>
-      <mifosx-theme-toggle class="p-r-10 p-t-10"></mifosx-theme-toggle>
+    <div class="layout-row-reverse">
+      <mifosx-language-selector class="p-t-10 p-r-10 width-40"></mifosx-language-selector>
+      <mifosx-theme-toggle class="p-t-10"></mifosx-theme-toggle>
       <mifosx-server-selector
         class="p-t-10"
         *ngIf="!environment.production && environment.allowServerSwitch"
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index 19695fbf1..28567a63e 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -1,6 +1,6 @@
 mifosx-server-selector {
   padding-left: 5px;
-  width: 300px;
+  width: 40%;
 }
 
 .cover {
@@ -23,6 +23,10 @@ mifosx-server-selector {
     position: absolute;
   }
 
+  .width-40 {
+    width: 40%;
+  }
+
   .cover-content {
     display: block;
     max-width: 80%;
@@ -94,6 +98,10 @@ mifosx-server-selector {
   padding-top: 0;
 }
 
+.p-r-10 {
+  padding-right: 10px;
+}
+
 ::ng-deep .login-container mifosx-footer .divider {
   margin: 0 !important;
   width: 14rem !important;
diff --git a/src/app/shared/server-selector/server-selector.component.html b/src/app/shared/server-selector/server-selector.component.html
index fee67acf6..a9ff7558a 100644
--- a/src/app/shared/server-selector/server-selector.component.html
+++ b/src/app/shared/server-selector/server-selector.component.html
@@ -1,13 +1,16 @@
 <mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
   <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
-  <mat-select [formControl]="serverSelector" (selectionChange)="setServer()" panelClass="server-panel">
+  <mat-select
+    [formControl]="serverSelector"
+    (selectionChange)="setServer()"
+    panelClass="server-panel"
+    panelWidth="null"
+  >
     <div class="sticky">
       <form [formGroup]="form" (ngSubmit)="addNewServer()">
         <div class="actions">
           <mat-form-field class="ml align-start">
-            <span matPrefix
-              ><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span
-            >
+            <span matPrefix><mat-icon>language</mat-icon></span>
             <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
             <input matInput type="text" autocomplete="off" formControlName="url" />
             <mat-error *ngIf="form.controls.url.hasError('required')">
diff --git a/src/app/shared/server-selector/server-selector.component.scss b/src/app/shared/server-selector/server-selector.component.scss
index c14b391c7..11e235677 100644
--- a/src/app/shared/server-selector/server-selector.component.scss
+++ b/src/app/shared/server-selector/server-selector.component.scss
@@ -4,20 +4,10 @@
   justify-content: space-evenly;
 }
 
-.rg {
-  float: right;
-}
-
 .ml {
   margin-left: 10px;
 }
 
-/* .pba {
-    width: 80%;
-    left: 10%;
-    margin: 12px;
-} */
-
 .sticky {
   position: sticky;
   z-index: 1; // appear above mat-option