1 files changed, 79 insertions, 56 deletions

diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss
index 5acf373da73..f83c74a9122 100644
--- a/apps/files_external/css/settings.scss
+++ b/apps/files_external/css/settings.scss
@@ -1,3 +1,7 @@
+/*!
+ * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
 #files_external {
 	margin-bottom: 0px;
 }
@@ -8,70 +12,84 @@
 	tr.externalStorageLoading > td {
 		text-align: center;
 	}
-}
 
-#externalStorage td {
-	& > input:not(.applicableToAllUsers), & > select {
-		width: 100%;
-	}
-}
+	td {
+		height: 50px;
 
-#externalStorage .popovermenu li > .menuitem {
-    width: fit-content !important;
-}
+		&.mountOptionsToggle,
+		&.remove,
+		&.save {
+			position: relative;
+			padding: 0 !important;
+			width: 44px;
+			[class^='icon-'],
+			[class*=' icon-'] {
+				width: 44px;
+				height: 44px;
+				margin: 3px;
+				opacity: 0.5;
+				padding: 14px;
+				vertical-align: text-bottom;
+				cursor: pointer;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
 
-#externalStorage td.status {
-	/* overwrite conflicting core styles */
-	display: table-cell;
-	vertical-align: middle;
-}
+		&.mountPoint,
+		&.backend,
+		&.authentication,
+		&.configuration {
+			min-width: 160px;
+			width: 15%;
+		}
 
-#externalStorage td.status > span {
-	display: inline-block;
-	height: 28px;
-	width: 28px;
-	vertical-align: text-bottom;
-	border-radius: 50%;
-	cursor: pointer;
-}
-#externalStorage {
-	td.mountPoint, td.backend, td.authentication, td.configuration {
-		min-width: 160px;
-		width: 15%;
-	}
-}
-#externalStorage td>img { padding-top:7px; opacity: 0.5; }
-#externalStorage td>img:hover { padding-top:7px; cursor:pointer; opacity: 1; }
-#addMountPoint>td { border:none; }
-#addMountPoint>td.applicable { visibility:hidden; }
-#addMountPoint>td.hidden { visibility:hidden; }
+		&.status {
+			/* overwrite conflicting core styles */
+			display: table-cell;
+			vertical-align: middle;
+			/* ensure width does not change even if internal span is not displayed */
+			width: 43px;
+
+			> span {
+				display: inline-block;
+				height: 28px;
+				width: 28px;
+				vertical-align: text-bottom;
+				border-radius: 50%;
+				cursor: pointer;
+			}
+		}
 
-#externalStorage td {
-	height: 50px;
-	&.mountOptionsToggle,
-	&.remove,
-	&.save {
-		position: relative;
-		padding: 0 !important;
-		width: 44px;
-		[class^='icon-'],
-		[class*=' icon-'] {
-			width: 44px;
-			height: 44px;
-			margin: 3px;
+		> input:not(.applicableToAllUsers), & > select {
+			width: 100%;
+		}
+
+		> img {
+			padding-top: 7px;
 			opacity: 0.5;
-			padding: 14px;
-			vertical-align: text-bottom;
-			cursor: pointer;
+
 			&:hover {
+				cursor:pointer;
 				opacity: 1;
 			}
 		}
 	}
+
+	.popovermenu li > .menuitem {
+		width: fit-content !important;
+	}
 }
 
+#addMountPoint>td { border:none; }
+
+#addMountPoint>td.applicable { visibility:hidden; }
+
+#addMountPoint>td.hidden { visibility:hidden; }
+
 #selectBackend {
-	margin-left: -10px;
+	margin-inline-start: -10px;
 	width: 150px;
 }
 
@@ -79,16 +97,17 @@
 #externalStorage td.backend {
 	white-space: normal;
 }
+
 #externalStorage td.configuration > * {
 	white-space: nowrap;
 }
 
 #externalStorage td.configuration input.added  {
-	margin-right: 6px;
+	margin-inline-end: 6px;
 }
 
 #externalStorage label > input[type="checkbox"] {
-	margin-right: 3px;
+	margin-inline-end: 3px;
 }
 
 #externalStorage td.configuration label {
@@ -116,31 +135,35 @@
 }
 
 #userMountingBackends {
-	padding-left: 25px;
+	padding-inline-start: 25px;
 }
 
 .files-external-select2 .select2-results .select2-result-label {
 	height: 32px;
 	padding: 3px;
 }
+
 .files-external-select2 .select2-results .select2-result-label > span {
 	display: block;
 	position: relative;
 }
+
 .files-external-select2 .select2-results .select2-result-label .avatardiv {
 	display:inline-block;
 }
+
 .files-external-select2 .select2-results .select2-result-label .avatardiv + span {
 	position: absolute;
 	top: 5px;
-	margin-left: 10px;
+	margin-inline-start: 10px;
 }
+
 .files-external-select2 .select2-results .select2-result-label .avatardiv[data-type="group"] + span {
 	vertical-align: top;
 	top: 6px;
 	position: absolute;
 	max-width: 80%;
-	left: 30px;
+	inset-inline-start: 30px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
@@ -150,7 +173,7 @@
 	display: flex;
 	.select2-search-choice-close {
 		display: block;
-		left: auto;
+		inset-inline-start: auto;
 		position: relative;
 		width: 20px;
 	}