Fix #52 (part. 2) : meilleure adaptation de la taille du sélecteur de calculettes en mode écroulé

src/app/app.component.html

@@ -12,7 +12,7 @@
     <a class="navbar-brand"></a>
 
     <!-- calculators list as a dropdown menu-->
-    <div [hidden]="tabsFitInNavbar">
+    <div [hidden]="tabsFitInNavbar" id="dropdown-calc-container">
 
         <button *ngIf="! currentCalc" mat-button [matMenuTriggerFor]="menu" color="primary" class="calculators-menu-title">
           <mat-icon class="dropdown-icon">arrow_drop_down</mat-icon>
@@ -103,12 +103,6 @@
     </mat-sidenav>
 
     <mat-sidenav-content class="sidenav-content" fxFlexFill>
-      <!-- chargement des calculettes -->
-      <div appLoadCalcDialogAnchor></div>
-    
-      <!-- sauvegarde des calculettes -->
-      <div appSaveCalcDialogAnchor></div>
-    
       <div class="container-fluid">
         <div class="row">
           <div class="col-12">

src/app/app.component.scss

@@ -37,6 +37,11 @@ button:focus {
     width: 100%;
 }
 
+#dropdown-calc-container {
+    width: 100%;
+    padding-right: 42px;
+}
+
 .calculator-button, .calculators-menu-title, .calculator-menu-item {
 
     .calc-name {
@@ -90,8 +95,9 @@ button:focus {
 
 .calculators-menu-title {
     background-color: white;
-    width: 360px; // minimal screen width supported: 480
     margin-top: 8px;
+    width: 100%; // adapts to small screens
+    max-width: 400px;
 
     .dropdown-icon {
         float: right;