fixed character data input height

src/app/journal/journal-character/general/general.component.html

@@ -97,45 +97,51 @@
       <mat-form-field appearance="outline" class="personality-wrapper">
         <textarea
           matInput
+          id="personality"
           class="personality-input"
           [(ngModel)]="data.personalityTraits"
           (change)="updateData()"
         ></textarea>
       </mat-form-field>
-      <label class="personality-label">Persönlichkeitsmerkmale</label>
+      <label for="personality" class="personality-label"
+        >Persönlichkeitsmerkmale</label
+      >
     </div>
     <div class="personality-box">
       <mat-form-field appearance="outline" class="personality-wrapper">
         <textarea
           matInput
+          id="ideals"
           class="personality-input"
           [(ngModel)]="data.ideals"
           (change)="updateData()"
         ></textarea>
       </mat-form-field>
-      <label class="personality-label">Ideale</label>
+      <label for="ideals" class="personality-label">Ideale</label>
     </div>
     <div class="personality-box">
       <mat-form-field appearance="outline" class="personality-wrapper">
         <textarea
           matInput
+          id="bonds"
           class="personality-input"
           [(ngModel)]="data.bonds"
           (change)="updateData()"
         ></textarea>
       </mat-form-field>
-      <label class="personality-label">Bindungen</label>
+      <label for="bonds" class="personality-label">Bindungen</label>
     </div>
     <div class="personality-box">
       <mat-form-field appearance="outline" class="personality-wrapper">
         <textarea
           matInput
+          id="flaws"
           class="personality-input"
           [(ngModel)]="data.flaws"
           (change)="updateData()"
         ></textarea>
       </mat-form-field>
-      <label class="personality-label">Makel</label>
+      <label for="flaws" class="personality-label">Makel</label>
     </div>
   </div>
 </div>

src/app/journal/journal-character/general/general.component.scss

@@ -86,13 +86,6 @@
     display: flex;
     justify-content: space-between;
 
-    // .looks-input {
-    //     border-radius: 4px;
-    //     border: 1px solid var(--border-color);
-    //     box-shadow: var(--shadow);
-    //     padding-left: 1rem;
-    // }
-
     .looks-field {
       width: 12.5rem;
       height: 1.75rem;
@@ -130,8 +123,8 @@
 
   .description-input {
     resize: none;
-    height: 90%;
-    width: 20rem;
+    height: 20rem !important;
+    width: 18.75rem;
   }
 
   .description-wrapper {
@@ -172,7 +165,10 @@
 
     .personality-input {
       resize: none;
-      height: 100%;
+      height: 15rem;
+      @media (height < 930px) {
+        height: 10rem;
+      }
     }
 
     .personality-area {