Recipe List: Improve UI for small devices

recipes/src/containers/Recipes/List/index.tsx

@@ -218,7 +218,7 @@ class RecipeList extends Component<RecipeListProps, RecipeListState> {
                 avatarList
                 onAction={({ detail }) => { this.openRecipe(data[detail.index]._id)}}
                 items={data.map((recipe) => ({
-                  text: recipe.name,
+                  text: (<div className="cbk-list__item__name">{recipe.name}</div>),
                   img: recipe.image ? `${API}/${recipe.image}` : undefined,
                   meta: (<div>
                     <Button icon='add_shopping_cart' onClick={this.handleAddToShopping(recipe)}/>

recipes/src/containers/Recipes/List/styles.scss

@@ -1,13 +1,19 @@
 @import 'styles/_variables.scss';
 
 .cbk-recipes-list {
+  .cbk-navbar {
+    padding: $spacing-small $spacing-large;
+  }
   &__search {
     flex-basis: 30%;
     padding-right: $spacing-regular;
   }
-
+  
   .cbk-recipes-list__results {
     padding: 0 $spacing-large;
+    @media #{$small-device} {
+      padding: 0;
+    }
   }
 
   &__list {
@@ -16,8 +22,15 @@
     li.cbk-list__item.mdc-list-item {
       font-weight: 600;
       font-family: $font-family-display;
+      .cbk-list__item__name {
+        flex: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       .mdc-list-item__meta {
         color: $black;
+        display: flex;
       }
     }
   }
@@ -34,4 +47,8 @@
       flex: 1;
     }
   }
+
+  @media #{$small-device} {
+
+  }
 }