Improved permission editor style

shared/css/static/modal-permissions.scss

@@ -475,14 +475,13 @@
 		flex-direction: row;
 	}
 
+	//TODO: Remove the 1em margin everywhere here
 	.container-filter {
 		justify-content: stretch;
-		height: 4em;
+		height: 3em;
 
-		.form-group {
-			height: 3.5em;
-			padding-top: 1.25em;
-			margin-bottom: 0!important;
+		> * {
+			align-self: center;
 		}
 
 		.button-toggle-clients {
@@ -493,31 +492,46 @@
 			height: 2.5em;
 
 			margin-right: 1em;
-
-			align-self: flex-end;
-			margin-bottom: 1rem;
 		}
 
 		.container-input {
 			flex-grow: 5;
 			flex-shrink: 1;
+
+			padding-top: 0!important;
+			margin-bottom: 0!important;
+
+			height: 2.5em;
+
+			.bmd-label-floating {
+				top: .5em;
+			}
+
+			&.is-filled, &:focus-within {
+				.bmd-label-floating {
+					top: -.4em;
+				}
+			}
 		}
 
-		.container-granted-switch {
+		.container-switchs {
+			height: 2.5em;
+
 			margin-left: 1em;
-			margin-bottom: 1em;
 
 			position: relative;
 
 			display: flex;
-			flex-direction: row;
-			justify-content: flex-start;
+			flex-direction: column;
+			justify-content: center;
+
 
-			flex-shrink: 1;
 			flex-grow: 1;
+			flex-shrink: 1;
+			max-width: 10em;
+			min-width: 5em;
 
 			color: #999999;
-			min-width: 8em;
 
 			> label {
 				font-size: .75em;
@@ -526,20 +540,20 @@
 				flex-direction: row;
 				justify-content: flex-start;
 
-				position: absolute;
-				bottom: 0;
-				left: 0;
-
 				pointer-events: all;
 				cursor: pointer;
 
-				> * {
-					align-self: flex-end;
+				.switch {
+					align-self: center;
 				}
 
 				a {
 					padding-left: .25em;
 					font-size: 1.1em;
+
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
 				}
 			}
 		}
@@ -551,12 +565,10 @@
 
 			border-radius: .2em;
 			margin-left: 1em;
-			margin-bottom: 1em;
 
 			display: flex;
 			flex-direction: row;
 			justify-content: flex-end;
-			align-self: flex-end;
 
 			cursor: pointer;
 			background-color: #121213;

shared/css/static/modal.scss

@@ -409,6 +409,8 @@
 		background-image: linear-gradient(0deg, #008aff 2px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, #393939 1px, transparent 0);
 
 		&:focus {
+			height: calc(2.25em - 1px); /* Center the blue line */
+
 			background-size: 100% 100%, 100% 100%;
 			transition-duration: .3s;
 

shared/html/templates.html

@@ -2899,17 +2899,25 @@
                         <input type="text" class="form-control filter-input"/>
                         <!-- <small class="form-text text-muted">{{tr "Filter permissions by permission name" /}}</small> -->
                     </div>
-                    <div class="container-granted-switch">
-                        <label>
+                    <div class="container-switchs">
+                        <label class="container-granted-switch" title="{{tr 'Show only permission which are assigned' /}}">
                             <div class="switch">
                                 <input type="checkbox" class="filter-granted">
                                 <span class="slider">
                                     <span class="dot"></span>
                                 </span>
                             </div>
-                            <!-- <a>{{tr "Show granted permissions only" /}}</a> -->
                             <a>{{tr "Assigned only" /}}</a>
                         </label>
+                        <label class="container-editable-switch" title="{{tr 'Show only permissions which are editable by yourself' /}}">
+                            <div class="switch">
+                                <input type="checkbox" class="filter-granted">
+                                <span class="slider">
+                                    <span class="dot"></span>
+                                </span>
+                            </div>
+                            <a>{{tr "Editable only" /}}</a>
+                        </label>
                     </div>
                     <div class="container-icon-select">
                         <div class="button-select-icon icon-preview">