Some extra work on the styling of some components

frontend/delta/css/clipperz.css

@@ -1484,7 +1484,8 @@ div.dialogBox {
     font-size: 18pt;
     padding: 0px 30px;
     margin: 0px 5px;
-    width: 290px; }
+    width: 290px;
+    vertical-align: middle; }
   #selections .search form label {
     font-family: 'clipperz-icons';
     -webkit-font-feature-settings: "$foo","$bar";
@@ -1498,7 +1499,8 @@ div.dialogBox {
     font-size: 18pt;
     padding-left: 5px;
     margin-left: -295px;
-    color: #666; }
+    color: #666;
+    vertical-align: sub; }
   #selections .search form .searchClear {
     font-family: 'clipperz-icons';
     -webkit-font-feature-settings: "$foo","$bar";
@@ -1559,15 +1561,22 @@ div.dialogBox {
       padding-right: 8px;
       font-size: 14pt; }
   #selections .showArchivedCards {
+    padding: 10px;
     font-size: 12pt; }
-    #selections .showArchivedCards span.count {
+    #selections .showArchivedCards .label {
+      padding-left: 5px; }
+
+span.count {
   background-color: gray;
   font-size: 10pt;
   margin-left: 10px;
   padding: 0px 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
-      border-radius: 4px; }
+  border-radius: 4px;
+  color: white;
+  font-weight: 300;
+  vertical-align: middle; }
 
 #selections.ALL li.allCards {
   color: #ff9900; }
@@ -1712,7 +1721,10 @@ div.cardList ul {
       padding-left: 8px;
       padding-right: 8px; }
 
-div.cardList.narrow.loadingCard li.selected:after {
+div.cardList.narrow {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; }
+  div.cardList.narrow.loadingCard li.selected:after {
     color: white;
     margin-right: 10px;
     content: "loading";
@@ -1741,7 +1753,7 @@ div.cardList.narrow.loadingCard li.selected:after {
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-fill-mode: none; }
-div.cardList.narrow ul li:after {
+  div.cardList.narrow ul li:after {
     content: "show detail";
     -webkit-box-flex: none;
     -webkit-flex: none;
@@ -1762,7 +1774,7 @@ div.cardList.narrow ul li:after {
     font-size: 24pt;
     line-height: 48px;
     margin-right: 25px; }
-div.cardList.narrow.EXPIRED ul li:after {
+  div.cardList.narrow.EXPIRED ul li:after {
     content: ""; }
 
 #cardDetailPage .view.archived, .cardDetail .view.archived {

frontend/delta/scss/style/card.scss

@@ -83,6 +83,8 @@ div.cardList {
 }
 
 div.cardList.narrow {
+	@include overflow-scroll;
+	
 	&.loadingCard {
 		li.selected {
 //			background-color: gray;

frontend/delta/scss/style/selectionPanel.scss

@@ -38,6 +38,7 @@
 				margin: 0px 5px;
 //				width: $selectionPanelWidth - $iconColumnWidth - 10px;
 				width: $selectionPanelWidth - ($spacing * 2);
+				vertical-align: middle;
 			}
 
 			label {
@@ -47,6 +48,7 @@
 //				padding-right:5px;
 				margin-left: -$selectionPanelWidth + $spacing;
 				color: #666;
+				vertical-align: sub;
 			}
 		
 			.searchClear {
@@ -117,16 +119,26 @@
 	}
 	
 	.showArchivedCards {
+		padding: 10px;
 		font-size: 12pt;
 		
-		span.count {
+		.label {
+			padding-left: 5px;
+		}
+
+	}
+}
+
+span.count {
 	background-color: gray;
 	font-size: 10pt;
 	margin-left: 10px;
 	padding: 0px 4px;
 	@include border-radius(4px);
-		}
-	}
+
+	color: white;
+	font-weight: 300;
+	vertical-align: middle;
 }