Initial progress towards responsive for mobile

src/client/site/common/inventory/inventory.jade

@@ -9,5 +9,5 @@
     .item_container
     .empty_placeholder nothing
     .buttons
-        .button.item-selector: .bezel: p add an item...
+        .button.item-selector: .bezel: p add<span class="full"> an item</span>...
         .button.clear: .bezel: p clear

src/client/site/common/inventory/inventory.scss

@@ -40,10 +40,22 @@
         .item-selector {
             flex         : 80%;
             margin-right : $size-margin-medium;
+
+            @include screen-size(mobile) {
+                flex: 50%;
+
+                .full {
+                    display: none;
+                }
+            }
         }
 
         .clear {
             flex : 20%;
+
+            @include screen-size(mobile) {
+                flex: 50%;
+            }
         }
     }
 }
@@ -61,8 +73,12 @@
         .quantity {
             padding-right : $size-margin-medium;
             input {
-                width: 3em;
-                font-size   : $font-size-xlarge;
+                width     : 3em;
+                font-size : $font-size-xlarge;
+
+                @include screen-size(mobile) {
+                    width : 2em;
+                }
             }
         }
 

src/client/site/common/item_group/item_group.scss

@@ -14,10 +14,26 @@
         .view__item_tile {
             margin-bottom: $size-margin-medium;
             width: calc(33% - 8px); // $size-margin-xsmall * 2
+        }
+    }
+}
 
-            @include screen-size(tablet) {
+@include screen-size(tablet) {
+    .view__item_group {
+        .panel {
+            .view__item_tile {
                 width: calc(50% - 8px); // $size-margin-xsmall * 2
             }
         }
     }
 }
+
+@include screen-size(mobile) {
+    .view__item_group {
+        .panel {
+            .view__item_tile {
+                width: 100%;
+            }
+        }
+    }
+}

src/client/site/common/item_group/item_tile/item_tile.scss

@@ -10,7 +10,7 @@
         overflow: visible;
 
         display: flex;
-        align-items: center;
+        align-items: flex-start;
 
         img {
             height: $size-minecraft-block;
@@ -22,9 +22,19 @@
             font-family: $font-family-text;
             font-size: $font-size-medium;
             line-height: $size-minecraft-block;
-            overflow-x: hidden;
+            overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
     }
 }
+
+@include screen-size(mobile) {
+    .view__item_tile {
+        a {
+            p {
+                white-space: normal;
+            }
+        }
+    }
+}

src/client/site/common/item_selector/item_selector.scss

@@ -9,8 +9,14 @@
 }
 
 .view__item_selector_popup {
+    max-width: $size-minecraft-block * 20;
     height : 66%;
 
+    @include screen-size(mobile) {
+        max-width: 98%;
+        height: 80%;
+    }
+
     background : $color-background-panel;
     border     : 1px solid $color-gray-medium;
 
@@ -35,6 +41,7 @@
 
         input {
             flex: 1 1 100%;
+            min-width: $font-size-large * 10;
 
             background: none;
             border: 0;