chore: Update history container styling

This commit updates the styling of the history container in the app component. The max-height property is adjusted to ensure that the container does not exceed the viewport height minus 200 pixels. Additionally, the overflow-y property is set to "auto" to enable vertical scrolling when the content exceeds the container's height. Note: The commit message follows the established convention of using a prefix (chore) to indicate a non-functional change or maintenance task.
EdiWang · Jul 5, 2024 · e2fe986 · e2fe986
1 parent 97b5cda
commit e2fe986
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/web/src/app/app.component.css b/web/src/app/app.component.css
@@ -90,6 +90,11 @@ fluent-text-area {
     color: #666;
 }
 
+.history-container {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+}
+
 footer {
     display: flex;
     justify-content: center;

diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
@@ -73,29 +73,32 @@ <h1>
       <h3>History</h3>
 
       <div *ngIf="translations.length > 0; else noHistory">
-        <ul class="translation-list">
-          <li *ngFor="let translation of translations">
-            <fluent-card class="translation-item mb-3">
-              <div class="hs-date mb-2">{{ translation.Date | date:'short' }}, {{ translation.Provider.Name }}</div>
+        <div class="history-container mb-3">
+          <ul class="translation-list">
+            <li *ngFor="let translation of translations">
+              <fluent-card class="translation-item mb-3">
+                <div class="hs-date mb-2">{{ translation.Date | date:'short' }}, {{ translation.Provider.Name }}</div>
 
-              <div>
-                <strong>{{ translation.SourceLanguage.Name }}</strong>
-              </div>
-              <div class="mb-2">{{ translation.SourceText }}</div>
+                <div>
+                  <strong>{{ translation.SourceLanguage.Name }}</strong>
+                </div>
+                <div class="mb-2">{{ translation.SourceText }}</div>
 
-              <div>
-                <strong>{{ translation.TargetLanguage.Name }}</strong>
-              </div>
-              <div class="mb-2">{{ translation.TranslatedText }}</div>
+                <div>
+                  <strong>{{ translation.TargetLanguage.Name }}</strong>
+                </div>
+                <div class="mb-2">{{ translation.TranslatedText }}</div>
+
+                <fluent-button appearance="outline" class="me-2"
+                  (click)="loadTranslation(translation); $event.stopPropagation()">Load</fluent-button>
 
-              <fluent-button appearance="outline" class="me-2"
-                (click)="loadTranslation(translation); $event.stopPropagation()">Load</fluent-button>
+                <fluent-button appearance="outline"
+                  (click)="deleteTranslation(translation.Id); $event.stopPropagation()">Delete</fluent-button>
+              </fluent-card>
+            </li>
+          </ul>
+        </div>
 
-              <fluent-button appearance="outline"
-                (click)="deleteTranslation(translation.Id); $event.stopPropagation()">Delete</fluent-button>
-            </fluent-card>
-          </li>
-        </ul>
         <fluent-button appearance="neutral" (click)="clearTranslations()">Clear All History</fluent-button>
       </div>