fix: nesting and height issues.

(#772)
Esri · Jan 17, 2020 · 2111987 · 2111987
1 parent 1099cfe
commit 2111987
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 1 deletion.
diff --git a/src/components/calcite-block/calcite-block.scss b/src/components/calcite-block/calcite-block.scss
@@ -1,7 +1,7 @@
 :host {
   @extend %component-host;
   display: flex;
-  flex: 1 0 auto;
+  flex: 0 0 auto;
   flex-direction: column;
   border-radius: var(--calcite-app-border-radius);
   margin: var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) 0;

diff --git a/src/components/calcite-flow-item/calcite-flow-item.scss b/src/components/calcite-flow-item/calcite-flow-item.scss
@@ -10,6 +10,7 @@
 
 calcite-panel {
   width: 100%;
+  height: 100%;
 }
 
 .header-content {

diff --git a/src/components/calcite-flow/calcite-flow.scss b/src/components/calcite-flow/calcite-flow.scss
@@ -5,6 +5,7 @@ $start-alpha: 0.5;
   align-items: stretch;
   display: flex;
   width: 100%;
+  height: 100%;
   overflow: hidden;
   position: relative;
 

diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.scss b/src/components/calcite-shell-panel/calcite-shell-panel.scss
@@ -9,6 +9,7 @@
   --calcite-app-shell-panel-width: 20vw;
   --calcite-app-shell-panel-min-width: 240px;
   --calcite-app-shell-panel-max-width: 360px;
+  --calcite-app-shell-panel-min-height: 4rem;
   --calcite-app-shell-panel-max-height-small: 35vh;
   --calcite-app-shell-panel-max-height-medium: 55vh;
   --calcite-app-shell-panel-max-height-large: 85vh;
@@ -25,6 +26,7 @@
   width: var(--calcite-app-shell-panel-width);
   min-width: var(--calcite-app-shell-panel-min-width);
   max-width: var(--calcite-app-shell-panel-max-width);
+  min-height: var(--calcite-app-shell-panel-min-height);
   border-left: 1px solid var(--calcite-app-border);
   border-right: 1px solid var(--calcite-app-border);
   padding: 0;