Fix float and clear

Signed-off-by: Mostafa Ahangarha <[email protected]>

core/css/apps.scss

@@ -367,7 +367,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;
 					}
@@ -671,6 +671,24 @@ kbd {
 	}
 }
 
+/* Floating fix */
+/* Cannot use inline-start and :dir to support Samsung Internet */ 
+body[dir='ltr'] {
+	.app-navigation-personal,
+	.app-navigation-administration {
+		> ul > li > ul > li > a > .app-navigation-entry-utils {
+			float: right;
+		}
+	}
+}
+body[dir='rtl'] {
+	.app-navigation-personal,
+	.app-navigation-administration {
+		> ul > li > ul > li > a > .app-navigation-entry-utils {
+			float: left;
+		}
+	}
+}
 
 /* CONTENT  --------------------------------------------------------- */
 #content {
@@ -980,12 +998,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: 44px;
 $popovericon-size: 16px;

core/css/global.scss

@@ -4,20 +4,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 {