Make modals work better at small screen sizes

Flexbox the modal action buttons
Replace "col8" CSS class

css/80_app.css

@@ -227,7 +227,6 @@ table.tags, table.tags td, table.tags th {
 /* Grid
 ------------------------------------------------------- */
 .col6  { float: left; width: 50.0000%; max-width: 600px; }
-.col8  { float: left; width: 66.6666%; }
 .col12 { float: left; width: 100.0000%; }
 
 
@@ -4357,6 +4356,9 @@ img.tile-debug {
     right: 0;
     margin: auto;
     z-index: 50;
+    width: 50%;
+    min-width: 200px;
+    max-width: 600px;
 }
 
 .modal .loader {
@@ -4422,7 +4424,9 @@ img.tile-debug {
 .loading-modal {
     text-align: center;
 }
-
+.modal-actions {
+    display: flex;
+}
 .modal-actions button {
     font-weight: normal;
     color: #7092ff;
@@ -4430,7 +4434,7 @@ img.tile-debug {
     border-radius: 0;
     height: 160px;
     text-align: center;
-    display: inline-block;
+    width: 100%;
 }
 .modal-actions button:hover {
     background-color: #ececec;
@@ -5331,8 +5335,8 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     padding: 10px 20px 0 20px;
 }
 
-[dir='rtl'] .curtain-tooltip .tooltip-inner .button-section button.col8 {
-    float: right;
+.curtain-tooltip .tooltip-inner .button-section button {
+    width: 66.6666%;
 }
 
 .curtain-tooltip .tooltip-inner .instruction:only-child {

modules/ui/curtain.js

@@ -106,7 +106,7 @@ export function uiCurtain() {
 
             if (options.buttonText && options.buttonCallback) {
                 html += '<div class="button-section">' +
-                    '<button href="#" class="button action col8">' + options.buttonText + '</button></div>';
+                    '<button href="#" class="button action">' + options.buttonText + '</button></div>';
             }
 
             var classes = 'curtain-tooltip tooltip in ' + (options.tooltipClass || '');

modules/ui/modal.js

@@ -41,7 +41,7 @@ export function uiModal(selection, blocking) {
 
     var modal = shaded
         .append('div')
-        .attr('class', 'modal fillL col6');
+        .attr('class', 'modal fillL');
 
     if (!blocking) {
         shaded.on('click.remove-modal', function() {

modules/ui/restore.js

@@ -11,13 +11,10 @@ export function uiRestore(context) {
         var modalSelection = uiModal(selection, true);
 
         modalSelection.select('.modal')
-            .attr('class', 'modal fillL col6');
+            .attr('class', 'modal fillL');
 
         var introModal = modalSelection.select('.content');
 
-        introModal
-            .attr('class','cf');
-
         introModal
             .append('div')
             .attr('class', 'modal-section')
@@ -32,11 +29,11 @@ export function uiRestore(context) {
 
         var buttonWrap = introModal
             .append('div')
-            .attr('class', 'modal-actions cf');
+            .attr('class', 'modal-actions');
 
         var restore = buttonWrap
             .append('button')
-            .attr('class', 'restore col6')
+            .attr('class', 'restore')
             .on('click', function() {
                 context.history().restore();
                 modalSelection.remove();
@@ -54,7 +51,7 @@ export function uiRestore(context) {
 
         var reset = buttonWrap
             .append('button')
-            .attr('class', 'reset col6')
+            .attr('class', 'reset')
             .on('click', function() {
                 context.history().clearSaved();
                 modalSelection.remove();

modules/ui/splash.js

@@ -14,7 +14,7 @@ export function uiSplash(context) {
         var modalSelection = uiModal(selection);
 
         modalSelection.select('.modal')
-            .attr('class', 'modal-splash modal col6');
+            .attr('class', 'modal-splash modal');
 
         var introModal = modalSelection.select('.content')
             .append('div')
@@ -22,7 +22,7 @@ export function uiSplash(context) {
 
         introModal
             .append('div')
-            .attr('class','modal-section cf')
+            .attr('class','modal-section')
             .append('h3').text(t('splash.welcome'));
 
         introModal
@@ -37,11 +37,11 @@ export function uiSplash(context) {
 
         var buttonWrap = introModal
             .append('div')
-            .attr('class', 'modal-actions cf');
+            .attr('class', 'modal-actions');
 
         var walkthrough = buttonWrap
             .append('button')
-            .attr('class', 'walkthrough col6')
+            .attr('class', 'walkthrough')
             .on('click', function() {
                 context.container().call(uiIntro(context));
                 modalSelection.close();
@@ -59,7 +59,7 @@ export function uiSplash(context) {
 
         var startEditing = buttonWrap
             .append('button')
-            .attr('class', 'start-editing col6')
+            .attr('class', 'start-editing')
             .on('click', modalSelection.close);
 
         startEditing