Fix flex shrink

_config.yml

@@ -14,7 +14,7 @@ url:           "http://bulma.io"
 # Variables
 
 baseurl:       ""
-cssurl:        "/styles/bulma-website.css"
+cssurl:        "/css/bulma-docs.css"
 documentation: "/documentation/overview/start/"
 download:      "https://github.com/jgthms/bulma/archive/0.1.2.zip"
 github:        "https://github.com/jgthms/bulma"

package.json

@@ -27,12 +27,16 @@
     "postcss-cli": "^2.5.1"
   },
   "scripts": {
-    "autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css",
-    "build": "npm run clean && npm run build-sass && npm run autoprefix",
+    "build": "npm run build-clean && npm run build-sass && npm run build-autoprefix",
+    "build-autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css",
+    "build-clean": "rm -rf css",
     "build-sass": "node-sass --output-style expanded --source-map true --output css/ bulma.sass --outFile css/bulma.css",
-    "clean": "rm -rf css",
+    "docs": "npm run docs-sass && npm run docs-autoprefix",
+    "docs-autoprefix": "postcss --use autoprefixer --output docs/css/bulma-docs.css docs/css/bulma-docs.css",
+    "docs-sass": "node-sass --output-style expanded --output docs/css/ docs/bulma-docs.sass --outFile docs/css/bulma-docs.css",
     "pre-push": "npm run build && git add css && git commit --amend --no-edit",
-    "start": "npm run build-sass -- --watch"
+    "start": "npm run build-sass -- --watch",
+    "start-docs": "npm run docs-sass -- --watch"
   },
   "files": [
     "css",

sass/components/media.sass

@@ -23,7 +23,7 @@
 
 .media-content
   flex-grow: 1
-  flex-shrink: 0
+  flex-shrink: 1
   text-align: left
 
 .media

sass/components/modal.sass

@@ -25,8 +25,6 @@
 
 .modal-card
   @extend .modal-content
-  background-color: $white
-  border-radius: $radius-large
   display: flex
   flex-direction: column
   max-height: calc(100vh - 40px)
@@ -44,6 +42,8 @@
 
 .modal-card-head
   border-bottom: 1px solid $border
+  border-top-left-radius: $radius-large
+  border-top-right-radius: $radius-large
 
 .modal-card-title
   color: $text-strong
@@ -53,14 +53,17 @@
   line-height: 1
 
 .modal-card-foot
+  border-bottom-left-radius: $radius-large
+  border-bottom-right-radius: $radius-large
   border-top: 1px solid $border
   .button
     &:not(:last-child)
       margin-right: 10px
 
 .modal-card-body
+  background-color: $white
   flex-grow: 1
-  flex-shrink: 0
+  flex-shrink: 1
   overflow: auto
   padding: 20px
 

sass/elements/form.sass

@@ -127,6 +127,7 @@
   +mobile
     margin-bottom: 5px
   +tablet
+    flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
     margin-right: 20px
@@ -247,8 +248,9 @@
       display: flex
       & > .control
         display: flex
+        flex-basis: 0
         flex-grow: 5
-        flex-shrink: 0
+        flex-shrink: 1
   &.is-loading
     &:after
       @extend .loader