From 2a3dbe53f4f5ef90703d3fadc370fb932140ac4b Mon Sep 17 00:00:00 2001
From: Eric Jimenez <eric.jimenez.dev@gmail.com>
Date: Thu, 17 Nov 2016 12:37:14 -0500
Subject: [PATCH] replace clearfix with a wrapping flexbox (#2819)

---
 public/resources/css/layout/_layout.scss   | 7 ++++++-
 public/resources/js/directives/api-list.js | 6 +++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 9ed82abf1a..f1de07e456 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -290,4 +290,9 @@ button.verbose.on {display: none}
   font-size: $unit * 2;
   margin-bottom: $unit;
   margin-top: $unit * 4;
-}
\ No newline at end of file
+}
+
+.l-flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/public/resources/js/directives/api-list.js b/public/resources/js/directives/api-list.js
index 02fe0dbf13..837a50e7ee 100644
--- a/public/resources/js/directives/api-list.js
+++ b/public/resources/js/directives/api-list.js
@@ -17,7 +17,7 @@ angularIO.directive('apiList', function () {
   return {
     restrict: 'E',
     template:
-      '<div ng-cloak="ng-cloak" class="banner is-plain api-filter clearfix">' +
+      '<div ng-cloak="ng-cloak" class="l-flex-wrap banner is-plain api-filter">' +
       '  <div class="form-select-menu">' +
       '    <button ng-repeat="type in $ctrl.types" ng-if="$ctrl.type === type.matches[0]" class="form-select-button has-symbol" ng-click="$ctrl.toggleMenu(\'type\')"><strong>Type:</strong><span class="symbol {{type.cssClass}}" ng-if="type.cssClass !== \'stable\'" ></span>{{type.title}}</button>'+
       '    <button class="form-select-button is-default" ng-if="$ctrl.type === null" ng-click="$ctrl.toggleMenu(\'type\')"><strong>Type: All</strong></button>'+
@@ -44,7 +44,7 @@ angularIO.directive('apiList', function () {
       '  </div>' +
       '</div>' +
       '      ' +
-      '<article class="l-content-small grid-fluid docs-content">' +
+      '<article class="l-content-small docs-content">' +
       '  <div ng-repeat="section in $ctrl.groupedSections" ng-if="$ctrl.filterSections(section)" ng-cloak="ng-cloak">' +
       '    <h2>{{ section.title }}</h2>' +
       '    <ul class="api-list">' +
@@ -266,4 +266,4 @@ angularIO.directive('apiList', function () {
       };
     }
   };
-});
\ No newline at end of file
+});