create spread rollup class for absolute top left bottom right atomic classes

frontend/src/admin/settings/settings.module.js

@@ -5,7 +5,7 @@ var SettingsAdmin = angular.module('metabase.admin.settings', [
 
 SettingsAdmin.config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/admin/settings/', {
-        template: '<div class="flex flex-column flex-full" mb-react-component="SettingsEditor"></div>',
+        template: '<div mb-react-component="SettingsEditor" class="spread"></div>',
         controller: 'SettingsEditor',
         resolve: {
             settings: ['Settings', async function(Settings) {

frontend/src/css/core/layout.css

@@ -80,3 +80,12 @@
         max-width: var(--sm-width);
     }
 }
+
+/* fully fit the parent element - use as a base for app-y pages like QB or settings */
+.spread {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

resources/frontend_client/app/card/partials/card_detail.html

-<div class="QueryBuilder flex flex-column bg-white absolute top left bottom right" ng-class="{ 'QueryBuilder--showDataReference': isShowingDataReference }">
+<div class="QueryBuilder flex flex-column bg-white spread" ng-class="{ 'QueryBuilder--showDataReference': isShowingDataReference }">
     <div id="react_qb_header"></div>
     <div id="react_qb_editor" class="z2"></div>
     <div id="react_qb_viz" class="flex z1"></div>