Add failing test case for conatiner width change

Author: gwak

test-app/app/controllers/index.js

@@ -15,6 +15,8 @@ export default class ModifierController extends Controller {
     { fruit: 'lemon', day: 'Sunday' },
   ];
 
+  @tracked mutableRecords = ['Zero', 'One', 'Two', 'Three', 'Four'];
+
   @action handleDragChange(reordered) {
     this.records = reordered;
   }
@@ -76,4 +78,24 @@ export default class ModifierController extends Controller {
     set(this, 'model.itemsGrid2', newOrder);
     set(this, 'model.dragged', draggedModel);
   }
+
+  @action
+  updateMutable(newOrder, draggedMode) {
+    this.mutableRecords = newOrder;
+  }
+
+  @action
+  removeItemHorizontal(item) {
+    this.mutableRecords = this.mutableRecords.filter(
+      (record) => record !== item,
+    );
+  }
+
+  @action
+  addItemToHorizontal() {
+    this.mutableRecords = [
+      ...this.mutableRecords,
+      `Item ${this.mutableRecords.length + 1}`,
+    ];
+  }
 }

test-app/app/styles/app.css

@@ -295,3 +295,39 @@
 .word-break {
   word-wrap: break-word;
 }
+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.mr-5 {
+  margin-right: 5px;
+}