Fixed OTP rendering

frontend/delta/scss/core/layout.scss

@@ -169,28 +169,11 @@ input[type=text] {
 
 }
 
-.mainPage.narrow {
-	#extraFeaturesPanel {
-		&.fullOpen {
-			.extraFeatureIndex {
-				width: 0px;
-			}
-		}
-
-		.extraFeatureContent {
-			.extraFeature {
-//				height: calc(100% - $mainCardToolbarHeight);
-			}
-		}
-		
-	}
-}
+//=============================================================================
 
 #extraFeaturesPanel {
 	@include sliding-panel(right, $settingsPanelWidth);
 
-//	transition: right 0.3s ease-in-out;
-
 	&.open {
 		@include sliding-panel-open(right, $settingsPanelWidth);
 	}
@@ -200,10 +183,11 @@ input[type=text] {
 	}
 
 	&.fullOpen {
-//		right: 0px;
 		width: 100%;
+
 		.extraFeatureContent {
-			display: block;
+			@include flexbox();
+			@include flex-direction(column);
 		}
 	}
 
@@ -224,10 +208,7 @@ input[type=text] {
 	
 		& > div {
 			@include flex(auto);
-		
 			@include overflow-auto();
-//			overflow: auto;
-		
 		}
 
 		footer {
@@ -236,32 +217,62 @@ input[type=text] {
 	}
 
 	.extraFeatureContent {
-//		display: none;
 		@include flex(auto);
-		width: 100%;
-		height: 100%;
-//		background-color: rgba( 0, 0, 0, 0.95);
 		background-color: black;
 
+		header {
+		}
+
 		.extraFeature {
+			@include flex(auto);
+			@include overflow-auto();
+
 			@include flexbox();
 			@include flex-direction(column);
-			height: 100%;
-		
 			.header {
 				@include flex(none);
 				padding: 20px;
 			}
 			.content {
 				@include flex(auto);
-//				height: 100%;
 				padding: 0px 20px 20px 20px;
 				@include overflow-auto();
 			}
 		}
+
+//		footer {
+//			@include flex(none);
+//			height: 48px;
+//			width: 100%;
+//		}
 	}
 }
 
+//.............................................................................
+
+.mainPage.narrow {
+	#extraFeaturesPanel.fullOpen {
+
+		.extraFeatureIndex {
+			width: 0px;
+		}
+
+		.extraFeatureContent {
+			header {
+				@include flex(none);
+				display: block;
+				height: 48px;
+			}
+			
+			.extraFeature {
+				
+			}
+		}
+	}
+}
+
+//=============================================================================
+
 .container {
 	height: 100%;
 	width: 100%;

frontend/delta/scss/style/settingsPanel.scss

@@ -236,7 +236,6 @@ refer to http://www.clipperz.com.
 	.extraFeatureContent {
 		border-right: 1px solid #222;
 		color: white;
-//		padding: 20px;
 
 		header {
 			display: none;
@@ -244,7 +243,6 @@ refer to http://www.clipperz.com.
 		
 		.extraFeature {
 			.header {
-//				padding-bottom: 20px;
 
 				h1 {
 					font-size: 20pt;
@@ -387,10 +385,63 @@ refer to http://www.clipperz.com.
 			}
 		}
 
+		.preferences {
+			h3 {
+				border-bottom: 1px solid white;
+			}
+			
+			.row {
+				$firstColumnWidth: 40px;
+				padding-top: 4px;
+				
+				&.one {
+					padding-left: $firstColumnWidth;
+				}
+				
+				&.two {
+					@include flexbox();
+					@include flex-direction(row);
+
+					.col.one {
+						@include flex(none);
+						width: $firstColumnWidth;
+					}
+					
+					.col.two {
+						@include flex(auto);
+					}
+				}
+
+				&.lockEnabled {
+					input {
+						margin-left: auto;
+						margin-right: auto;
+						display: block;
+					}
+				}
+
+				&.lockTimeout {
+					span {
+						&:after {
+							content: ": ";
+						};
+					}
+					input {
+						width: 50px;
+						align: right;
+					}
+				}
+			}
+
+			span {
+				vertical-align: middle;
+			}
+			input {
+				vertical-align: middle;
+			}
+		}
 
 		.OTP {
-			height: 100%;
-
 			.header {
 				.description {
 					padding-bottom: 0px;
@@ -417,6 +468,7 @@ refer to http://www.clipperz.com.
 					};
 				}
 			}
+
 			.selectMenu {
 				margin-top: 1em;
 
@@ -550,7 +602,7 @@ refer to http://www.clipperz.com.
 				}
 			}
 			.button {
-				margin:1em 1em 0 0;
+//				margin:1em 1em 0 0;
 			}
 
 			table {
@@ -980,8 +1032,6 @@ refer to http://www.clipperz.com.
 	#extraFeaturesPanel {
 		.extraFeatureContent {
 			header {
-				display: block;
-				height: 48px;
 				border-bottom : 1px solid white;
 
 				.button {
@@ -994,6 +1044,14 @@ refer to http://www.clipperz.com.
 					padding-left: 10px;
 				}
 			}
+			
+			.extraFeature {
+			}
+		}
+		
+		&.fullOpen {
+			.extraFeatureContent {
+			}
 		}
 	}
 }