fix(ui): chrome bug: grid element overflow

https://bugs.chromium.org/p/chromium/issues/detail?id=833837
vuejs · Jul 3, 2018 · c167797 · c167797
1 parent d601441
commit c167797
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/packages/@vue/cli-ui/src/App.vue b/packages/@vue/cli-ui/src/App.vue
@@ -37,21 +37,18 @@ export default {
 @import "~@/style/imports"
 
 .app
- display grid
- grid-template-columns 1fr
- grid-template-rows auto 1fr auto
- grid-template-areas "connection" "content" "status"
+ display flex
+ flex-direction column
 
-.connection-status
- grid-area connection
+.connection-status,
+.status-bar
+ flex auto 0 0
 
 .content
- grid-area content
+ flex auto 1 1
+ height 100%
  overflow hidden
 
-.status-bar
- grid-area status
-
 .app-init-loading
  z-index 100000
 </style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectHome.vue b/packages/@vue/cli-ui/src/views/ProjectHome.vue
@@ -6,10 +6,13 @@
  }"
  >
  <TopBar />
- <ProjectNav/>
 
- <div v-if="ready" class="content">
- <router-view/>
+ <div class="panes">
+ <ProjectNav/>
+
+ <div v-if="ready" class="content vue-ui-disable-scroll">
+ <router-view/>
+ </div>
  </div>
 
  <ProgressScreen progress-id="__plugins__"/>
@@ -41,22 +44,28 @@ export default {
 @import "~@/style/imports"
 
 .project-home
- display grid
- grid-template-columns 46px 1fr
- grid-template-rows auto 1fr
- grid-template-areas "topbar topbar" "side-left content"
+ display flex
+ flex-direction column
 
  &.wide
- grid-template-columns 180px 1fr
+ .project-nav
+ width 180px
+
+.panes
+ flex auto 1 1
+ height 100%
+ display flex
 
-.top-bar
- grid-area topbar
+.top-bar,
+.project-nav
+ flex auto 0 0
 
 .project-nav
- grid-area side-left
+ width 46px
 
 .content
- grid-area content
+ flex auto 1 1
+ width 0
  overflow-x hidden
  overflow-y auto