Fix: float and clear

Fix other background-positions
Minor fix in link button icon position
Update header left and right to start and end

Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>

7 files changed, 128 insertions, 30 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 365d94e3a31..3441db7f65d 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -157,7 +157,6 @@ kbd {
 			width: 100%;
 			padding: 10px;
 			padding-inline-start: 34px;
-			background-position: 10px center;
 			text-align: start;
 			margin: 0;
 		}
@@ -321,7 +320,6 @@ kbd {
 			/* Main entry link */
 			> a {
 				background-size: 16px 16px;
-				background-position: 14px center;
 				background-repeat: no-repeat;
 				display: block;
 				justify-content: space-between;
@@ -358,7 +356,7 @@ kbd {
 				/* counter can also be inside the link */
 				> .app-navigation-entry-utils  {
 					display: inline-block;
-					float: right;
+					/* Check Floating fix below */ 
 					.app-navigation-entry-utils-counter {
 						padding-inline-end: 0 !important;
 					}
@@ -662,6 +660,40 @@ kbd {
 	}
 }
 
+/* Floating and background-position fix */
+/* Cannot use inline-start and :dir to support Samsung Internet */ 
+body[dir='ltr'] {
+	.app-navigation-personal,
+	.app-navigation-administration {
+		.app-navigation-new button {
+			background-position: left 10px center;
+		}
+
+		> ul > li > ul > li > a {
+			background-position: left 14px center;
+
+			> .app-navigation-entry-utils {
+				float: right;
+			}
+		}
+	}
+}
+body[dir='rtl'] {
+	.app-navigation-personal,
+	.app-navigation-administration {
+		.app-navigation-new button {
+			background-position: right 10px center;
+		}
+
+		> ul > li > ul > li > a {
+			background-position: right 14px center;
+
+			> .app-navigation-entry-utils {
+				float: left;
+			}
+		}
+	}
+}
 
 /* CONTENT  --------------------------------------------------------- */
 #content {
@@ -857,7 +889,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 
 		&::before {
 			background-image: var(--icon-settings-dark);
-			background-position: 14px center;
 			background-repeat: no-repeat;
 			content: '';
 			width: var(--default-clickable-area);
@@ -869,11 +900,27 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 
 		&:focus-visible {
 			box-shadow: 0 0 0 2px inset var(--color-primary-element) !important;
-			background-position: 12px center;
 		}
 	}
 }
 
+/* Background-position fix */
+body[dir='ltr'] #app-settings-header .settings-button {
+	&::before {
+		background-position: left 14px center;
+	}
+	&:focus-visible {
+		background-position: left 12px center;
+	}
+}
+body[dir='rtl'] #app-settings-header .settings-button {
+	&::before {
+		background-position: right 14px center;
+	}
+	&:focus-visible {
+		background-position: right 12px center;
+	}
+}
 /* GENERAL SECTION ------------------------------------------------------------ */
 .section {
 	display: block;
@@ -971,12 +1018,19 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 	}
 }
 .tabsContainer {
-	clear: left;
 	.tab {
 		padding: 0 15px 15px;
 	}
 }
 
+/* Cannot use inline-start to support Samsung Internet*/ 
+body[dir='ltr'] .tabsContainer {
+	clear: left;
+}
+body[dir='rtl'] .tabsContainer {
+	clear: right;
+}
+
 /* POPOVER MENU ------------------------------------------------------------ */
 $popoveritem-height: 34px;
 $popovericon-size: 16px;
diff --git a/core/css/global.scss b/core/css/global.scss
index d0a12dc383d..de83f862786 100644
--- a/core/css/global.scss
+++ b/core/css/global.scss
@@ -7,20 +7,52 @@
 
 /* Global Components */
 
-.pull-left {
-	float: left;
-}
+/* The following lines are a hacky way to adjust float and clear based on direction.
+ Samsung Internet doesn't support `inline-start|end` and :dir.
+ pull-right|left and clear-right|left are also kept for backward compatibility.
+  */
+body[dir='ltr'] {
+	.pull-left,
+	.pull-start {
+		float: left;
+	}
 
-.pull-right {
-	float: right;
-}
+	.pull-right,
+	.pull-end {
+		float: right;
+	}
+
+	.clear-left,
+	.clear-start {
+		clear: left;
+	}
 
-.clear-left {
-	clear: left;
+	.clear-right,
+	.clear-end {
+		clear: right;
+	}
 }
 
-.clear-right {
-	clear: right;
+body[dir='rtl'] {
+	.pull-left,
+	.pull-start {
+		float: right;
+	}
+
+	.pull-right,
+	.pull-end {
+		float: left;
+	}
+
+	.clear-left,
+	.clear-start {
+		clear: right;
+	}
+
+	.clear-right,
+	.clear-end {
+		clear: left;
+	}
 }
 
 .clear-both {
diff --git a/core/css/guest.scss b/core/css/guest.scss
index f1c0ffcd14c..a4bafba3b89 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -591,14 +591,19 @@ p.info {
 		margin-inline-end: 25px;
 	}
 
-	img.float-spinner {
-		float: left;
-	}
-
 	a.update-show-detailed {
 		border-bottom: inherit;
 	}
 }
+
+/* Cannot use inline-start and :dir to support Samsung Internet */ 
+body[dir='ltr'] .update img.float-spinner {
+	float: left;
+}
+body[dir='rtl'] .update img.float-spinner {
+	float: right;
+}
+
 #update-progress-detailed {
 	text-align: start;
 	margin-bottom: 12px;
diff --git a/core/css/header.scss b/core/css/header.scss
index fb08dda78e5..a81e9785dba 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -31,7 +31,7 @@
 		bottom: 2px;
 	}
 
-	.header-right {
+	.header-end {
 		// Add some spacing so the last entry looks ok
 		margin-inline-end: calc(3 * var(--default-grid-baseline));
 
@@ -88,7 +88,7 @@
 	/* Header menu */
 	$header-menu-entry-height: 44px;
 
-	.header-right > div > .menu {
+	.header-end > div > .menu {
 		background-color: var(--color-main-background);
 		filter: drop-shadow(0 1px 5px var(--color-box-shadow));
 		border-radius: var(--border-radius-large);
@@ -146,25 +146,25 @@
 		flex-shrink: 0;
 	}
 
-	#header-left, .header-left,
-	#header-right, .header-right {
+	#header-start, .header-start,
+	#header-end, .header-end {
 		display: inline-flex;
 		align-items: center;
 	}
 
-	#header-left, .header-left {
+	#header-start, .header-start {
 		flex: 1 0;
 		white-space: nowrap;
 		min-width: 0;
 	}
 
-	#header-right, .header-right {
+	#header-end, .header-end {
 		justify-content: flex-end;
 		flex-shrink: 1;
 	}
 
 	/* Right header standard */
-	.header-right {
+	.header-end {
 		> .header-menu__trigger img {
 			filter: var(--background-image-invert-if-bright);
 		}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 2b6514d0930..363aa63697d 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -132,7 +132,7 @@
 }
 
 @media only screen and (max-width: 480px) {
-	#header .header-right > div > .menu {
+	#header .header-end > div > .menu {
 		max-width: calc(100vw - 10px);
 		position: fixed;
 		&::after {
@@ -140,7 +140,7 @@
 		}
 	}
 	/* Arrow directly child of menutoggle */
-	#header .header-right > div {
+	#header .header-end > div {
 		&.openedMenu {
 			&::after {
 				display: block;
diff --git a/core/css/public.scss b/core/css/public.scss
index 98a24d12fe1..79f406b44d5 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -14,7 +14,7 @@
 		--footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline));
 	}
 
-	.header-right {
+	.header-end {
 
 		#header-primary-action a {
 			color: var(--color-primary-element-text);
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 110b2c7f4c4..eb766b8844b 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -248,8 +248,15 @@ body {
 	position: absolute;
 	inset-inline-end: 1em;
 	top: .8em;
+}
+
+/* Cannot use inline-start and :dir to support Samsung Internet */ 
+body[dir='ltr'] #show, #dbpassword {
 	float: right;
 }
+body[dir='ltr'] #show, #dbpassword {
+	float: left;
+}
 
 #show + label, #dbpassword + label {
 	inset-inline-end: 21px;