fixed icon positioning and pagination CSS on <320px screens

css/extensions.css

@@ -642,6 +642,13 @@ html body .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > * {
   margin: 0 !important;
   max-height: 2em;
 }
+/* prevent controlgroup buttons from collapsing on small displays */
+@media (max-width: 18em) {
+  html body .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > * {
+    padding-left: .75em;
+    padding-right: .75em;
+  }
+}
 html body .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > .ui-select {
   padding: 0;
 }

css/themes.css

@@ -851,6 +851,29 @@ html .ui-header .ui-last-wrap .ui-controlgroup-controls .ui-btn {
   border-left: 1px solid rgb(232, 232, 232);
   border-left: 1px solid rgba(232, 232, 232, 0.5);
 }
+
+@media (max-width: 40em) {
+  /* hide button text on small screens */
+  .responsive.ui-btn,
+  .ui-select span.responsive /*,
+ .responsive .ui-btn */ {
+    text-indent: -9999px;
+    white-space: nowrap !important;
+  }
+  .responsive.ui-btn:after /*,
+  .responsive .ui-btn:after*/ {
+    text-indent: 0px;
+    left: .6em;
+  }
+  /* center select(!) icons on response layouts */
+  .ui-mini.ui-btn-icon-left:after,
+  .ui-mini .ui-btn-icon-left:after,
+  .ui-header .ui-btn-icon-left:after,
+  .ui-footer .ui-btn-icon-left:after {
+    left: .6em;
+  }
+}
+
 /* form & fieldcontain */
 /* set label/input width on large screens */
 /* TODO: form fields should auto-expand to full width */
@@ -1409,20 +1432,7 @@ html .ui-filterable {
 }
 
 /* ============================== RESPONSIVE ============================== */
-/* hide button text on small screens */
-@media (max-width: 40em) {
-  .responsive.ui-btn,
-  .ui-select span.responsive /*,
- .responsive .ui-btn */ {
-    text-indent: -9999px;
-    white-space: nowrap !important;
-  }
-  .responsive.ui-btn:after /*,
-  .responsive .ui-btn:after*/ {
-    text-indent: 0px;
-    left: 10px;
-  }
-}
+
 
 /* responsive listview */
 .ui-listview.responsive > li.ui-first-child:only-child {