Amélioration responsive design

src/app/components/field-set/field-set.component.html

@@ -2,7 +2,7 @@
     <div class="col fieldset_title">
         {{title}}
     </div>
-    <div *ngIf="_showButtons" class="col-3 fa-stack fa-2x hyd-window-btns">
+    <div *ngIf="_showButtons" class="col-sm-4 fa-stack fa-2x hyd-window-btns">
         <i class="fa fa-plus" (click)='onAddClick()'></i>
         <i class="fa fa-trash" [style.color]='removeButtonColor' (click)='onRemoveClick()'></i>
         <i class="fa fa-arrow-up" [style.color]='upButtonColor' (click)='onMoveUpClick()'></i>

src/app/components/field-set/field-set.component.scss

+.fieldset_title {
+    font-weight: bold;
+}
+.radio_param_header {
+    width: 10em;
+}
+.fieldset_backgrd {
+    background-color: #eeeeee;
+}
+.hyd-window-btns {
+    text-align: right;
+}

src/app/components/field-set/field-set.component.ts

@@ -11,17 +11,7 @@ import { CheckField } from "../../formulaire/check-field";
 @Component({
     selector: "field-set",
     templateUrl: "./field-set.component.html",
-    styles: [`.fieldset_title {
-        font-weight: bold;
-        padding: 0.3em;
-        }`,
-        `.radio_param_header {
-        width: 10em;
-        }`,
-        `.fieldset_backgrd {
-            background-color: #eeeeee;
-        }`
-    ]
+    styleUrls: ["./field-set.component.scss"]
 })
 export class FieldSetComponent implements DoCheck {
     /**

src/app/components/fieldset-container/fieldset-container.component.html

-<div class="container-fluid" style="border-style:solid; border-color: lightgray">
+<div class="container-fluid" style="border-style:solid; border-color: lightgray; border-radius: 10px; margin-bottom: 10px;">
     <div class="row">
-        <h4>{{title}}</h4>
+        <h4 class="col">{{title}}</h4>
     </div>
 
     <field-set *ngFor="let fs of fieldsets" [fieldSet]=fs (onRadio)=onRadioClick($event) (onValid)=onFieldsetValid() (inputChange)=onInputChange()

src/app/components/generic-calculator/calculator.component.html

@@ -5,7 +5,7 @@
         <h1 [innerHTML]="uitextTitre"></h1>
     </div>
 
-    <div class="col-3 px-0 mx-0 fa-stack fa-2x hyd-window-btns">
+    <div class="col-sm-3 px-0 mx-0 fa-stack fa-2x hyd-window-btns">
         <!-- bouton d'aide -->
         <i *ngIf="enableHelpButton" class="fa fa-question-circle" style="color:blue" (click)="openHelp()"></i>
         <!-- bouton de sauvegarde -->
@@ -17,7 +17,7 @@
 
 <!-- nom de la calculette -->
 <div class="row">
-    <div class="col-6">
+    <div class="col-md-6">
         <calc-name title="Nom de la calculette"></calc-name>
     </div>
 </div>