Don't overflow select tag arrow with the option text

Closes #13765

sao/src/sao.less

@@ -880,6 +880,14 @@ img.icon {
         }
     }
 
+    .form-selection {
+        select.form-control {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
     @media screen and (min-width: @screen-sm-min) {
         .form-reference {
             > .input-sm, > .input-group {

sao/src/theme.less

@@ -173,6 +173,7 @@ select,
 select.form-control {
     border: 0;
     border-radius: 0;
+    border-inline-end: 13px solid transparent;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -181,7 +182,7 @@ select.form-control {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
     background-size: 13px;
     background-repeat: no-repeat;
-    background-position: right center;
+    background-position: calc(100% + 13px);
     .box-shadow(inset 0 -1px 0 #ddd);
     font-size: 16px;
     line-height: 1.5;