fix: fix min height for #84

phodal · Apr 23, 2020 · 474b7bf · 474b7bf
1 parent 4a2cc42
commit 474b7bf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/app/presentation/design/path/path.component.scss b/src/app/presentation/design/path/path.component.scss
@@ -24,6 +24,7 @@
     margin-top: 12px;
     background-color: rgba(255, 255, 255, 0.2);
     max-width: 100%;
+    max-height: 180px;
     width: 100%;
     color: #fff;
     line-height: 1.3em;

diff --git a/src/app/presentation/design/path/path.component.ts b/src/app/presentation/design/path/path.component.ts
@@ -156,8 +156,9 @@ export class PathComponent implements OnInit {
   private getContainerHeightWidth() {
     const innerWidth = window.innerWidth;
     let itemWidth = (innerWidth - 200) / this.maxLength - 20;
-    if (itemWidth < 100) {
-      itemWidth = 100;
+    const minHeight = 100;
+    if (itemWidth < minHeight) {
+      itemWidth = minHeight;
     }
 
     const itemHeightPx = itemWidth + 'px';
@@ -174,8 +175,15 @@ export class PathComponent implements OnInit {
   }
 
   getHeaderHeight() {
+    const paddingOffset = 20 + 12;
+    let height = this.getContainerHeightWidth().itemWidth + paddingOffset;
+    const maxHeaderHeight = 180 + 20 + 12;
+    if (height >= maxHeaderHeight) {
+      height = maxHeaderHeight;
+    }
+
     return {
-      height: this.getContainerHeightWidth().itemWidth + 20 + 12 + 'px',
+      height: height + 'px',
     };
   }