Fixes globalize tabs when there is a lot of available locales

app/assets/stylesheets/layout.scss

@@ -359,19 +359,34 @@ a {
 
   .tabs-title {
     font-size: $base-font-size;
-    margin-bottom: 0;
+    margin-right: $line-height;
   }
 
   .tabs-title > a {
     color: $text-medium;
-    margin-bottom: rem-calc(-1);
-    margin-right: $line-height;
+    position: relative;
+
+    &:hover {
+      background: none;
+      color: $brand;
+      text-decoration: none;
+    }
 
     &[aria-selected='true'],
     &.is-active {
+      border-bottom: 0;
       color: $brand;
-      border-bottom: 2px solid $brand;
       font-weight: bold;
+
+      &::after {
+        background: $brand;
+        border-bottom: 2px solid $brand;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
     }
   }
 

app/views/admin/shared/_common_globalize_locales.html.erb

@@ -1,10 +1,11 @@
 <% I18n.available_locales.each do |locale| %>
-  <%= link_to t("admin.translations.remove_language"), "#",
-              id: "js_delete_#{locale}",
-              style: display_translation_style(resource, locale),
-              class: 'float-right delete js-delete-language',
-              data: { locale: locale } %>
-
+  <div class="text-right">
+    <%= link_to t("admin.translations.remove_language"), "#",
+                id: "js_delete_#{locale}",
+                style: display_translation_style(resource, locale),
+                class: 'delete js-delete-language',
+                data: { locale: locale } %>
+  </div>
 <% end %>
 
 <ul class="tabs" data-tabs id="globalize_locale">