Task/improve layout of user account settings on mobile (#8229)

* Improve layout on mobile

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the layout of the user account settings on mobile
 - Improved the usability of the activities page by eliminating the reload on canceling the import activities dialog
 - Improved the loading state of the file drop area component
 - Improved the accessibility of the _Buy me a coffee_ button on the about page

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -5,14 +5,15 @@
       <div class="d-flex py-1">
         <div class="w-100">
           <div
-            class="d-flex"
-            [class.mb-2]="!hasImpersonationId"
+            class="align-items-sm-baseline g-0 row"
+            [class.mb-3]="!hasImpersonationId"
             [class.mb-4]="hasImpersonationId"
+            [class.mb-sm-2]="!hasImpersonationId"
           >
-            <div class="align-items-center d-flex pe-1 pt-1 w-50">
+            <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
               <ng-container i18n>Base Currency</ng-container>
             </div>
-            <div class="ps-1 w-50" [formGroup]="baseCurrencyForm">
+            <div class="col-sm-6 ps-sm-1" [formGroup]="baseCurrencyForm">
               <mat-form-field
                 appearance="outline"
                 class="w-100"
@@ -31,11 +32,11 @@
             </div>
           </div>
           @if (user?.settings?.isExperimentalFeatures) {
-            <div class="d-flex mb-2">
-              <div class="align-items-center d-flex pe-1 pt-1 w-50">
+            <div class="align-items-sm-baseline g-0 mb-3 mb-sm-2 row">
+              <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
                 <ng-container i18n>Performance Calculation</ng-container>
               </div>
-              <div class="ps-1 w-50">
+              <div class="col-sm-6 ps-sm-1">
                 <mat-form-field appearance="outline" class="w-100 without-hint">
                   <mat-select
                     name="performanceCalculationType"
@@ -61,8 +62,8 @@
               </div>
             </div>
           }
-          <div class="align-items-center d-flex mb-2">
-            <div class="pe-1 w-50">
+          <div class="align-items-sm-baseline g-0 mb-3 mb-sm-2 row">
+            <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
               <div i18n>Language</div>
               @if (isCommunityLanguage()) {
                 <div class="hint-text text-body-secondary" i18n>
@@ -77,7 +78,7 @@
                 </div>
               }
             </div>
-            <div class="ps-1 w-50">
+            <div class="col-sm-6 ps-sm-1">
               <mat-form-field appearance="outline" class="w-100 without-hint">
                 <mat-select
                   name="language"
@@ -156,14 +157,14 @@
               </mat-form-field>
             </div>
           </div>
-          <div class="align-items-center d-flex mb-4">
-            <div class="pe-1 w-50">
+          <div class="align-items-sm-baseline g-0 mb-3 mb-sm-4 row">
+            <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
               <div i18n>Locale</div>
-              <div class="hint-text text-body-secondary">
+              <div class="d-none d-sm-block hint-text text-body-secondary">
                 <ng-container i18n>Date and number format</ng-container>
               </div>
             </div>
-            <div class="ps-1 w-50">
+            <div class="col-sm-6 ps-sm-1">
               <mat-form-field
                 appearance="outline"
                 class="w-100 with-value-hint"
@@ -181,7 +182,7 @@
                     <mat-option [value]="locale">{{ locale }}</mat-option>
                   }
                 </mat-select>
-                <mat-hint class="d-flex mt-2 text-body-secondary text-truncate">
+                <mat-hint class="d-flex mt-2 text-body-secondary">
                   <gf-value
                     [deviceType]="deviceType()"
                     [isDate]="true"
@@ -201,11 +202,11 @@
               </mat-form-field>
             </div>
           </div>
-          <div class="d-flex">
-            <div class="align-items-center d-flex pe-1 pt-1 w-50">
+          <div class="align-items-sm-baseline g-0 row">
+            <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
               <ng-container i18n>Appearance</ng-container>
             </div>
-            <div class="ps-1 w-50">
+            <div class="col-sm-6 ps-sm-1">
               <mat-form-field appearance="outline" class="w-100 without-hint">
                 <mat-select
                   class="with-placeholder-as-option"
@@ -226,15 +227,15 @@
           </div>
         </div>
       </div>
-      <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pe-1 w-50">
+      <div class="align-items-baseline g-0 mt-4 py-1 row">
+        <div class="col col-sm-6 pe-1">
           <div i18n>Presenter View</div>
           <div class="hint-text text-body-secondary" i18n>
             Protection for sensitive information like absolute performances and
             quantity values
           </div>
         </div>
-        <div class="ps-1 w-50">
+        <div class="col-auto col-sm-6 ps-1">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -244,14 +245,14 @@
           />
         </div>
       </div>
-      <div class="d-flex mt-4 py-1">
-        <div class="pe-1 w-50">
+      <div class="align-items-baseline g-0 mt-4 py-1 row">
+        <div class="col col-sm-6 pe-1">
           <div i18n>Zen Mode</div>
           <div class="hint-text text-body-secondary" i18n>
             Distraction-free experience for turbulent times
           </div>
         </div>
-        <div class="ps-1 w-50">
+        <div class="col-auto col-sm-6 ps-1">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -261,14 +262,14 @@
           />
         </div>
       </div>
-      <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pe-1 w-50">
+      <div class="align-items-baseline g-0 mt-4 py-1 row">
+        <div class="col col-sm-6 pe-1">
           <div i18n>Biometric Authentication</div>
           <div class="hint-text text-body-secondary" i18n>
             Sign in with fingerprint
           </div>
         </div>
-        <div class="ps-1 w-50">
+        <div class="col-auto col-sm-6 ps-1">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -280,14 +281,14 @@
           />
         </div>
       </div>
-      <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pe-1 w-50">
+      <div class="align-items-baseline g-0 mt-4 py-1 row">
+        <div class="col col-sm-6 pe-1">
           <div i18n>Experimental Features</div>
           <div class="hint-text text-body-secondary" i18n>
             Sneak peek at upcoming functionality
           </div>
         </div>
-        <div class="ps-1 w-50">
+        <div class="col-auto col-sm-6 ps-1">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -298,14 +299,14 @@
         </div>
       </div>
       @if (deviceType() !== 'mobile' && hasPermissionToEnableGhostfolioAi) {
-        <div class="align-items-center d-flex mt-4 py-1">
-          <div class="pe-1 w-50">
+        <div class="align-items-baseline g-0 mt-4 py-1 row">
+          <div class="col col-sm-6 pe-1">
             <div>Ghostfolio AI</div>
             <div class="hint-text text-body-secondary" i18n>
               Powered by third-party AI providers
             </div>
           </div>
-          <div class="ps-1 w-50">
+          <div class="col-auto col-sm-6 ps-1">
             <mat-slide-toggle
               color="primary"
               hideIcon="true"