From a3dc1a26f5f47cf0b2c4014da02c92ecc4e2e25c Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 5 Jun 2024 19:43:38 +0200
Subject: [PATCH] (home) fix borders in the two-column layout for locale
 selector

---
 assets/style.scss         |  4 ++--
 components/LocaleList.vue | 32 +++++++++++++++++---------------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index b3fabb96d..b02713574 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -239,8 +239,8 @@ form[disabled] {
 .list-group-item-hoverable {
     &:hover {
         color: $primary;
-        border-inline-start: 3px solid $primary;
-        padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
+        border-inline-start: 3px solid $primary !important;
+        padding-inline-start: calc(#{$list-group-item-padding-x} - 2px) !important;
     }
 }
 .list-group-item-active {
diff --git a/components/LocaleList.vue b/components/LocaleList.vue
index 8329b7d24..033a9781e 100644
--- a/components/LocaleList.vue
+++ b/components/LocaleList.vue
@@ -1,19 +1,21 @@
 <template>
-    <div class="list-group d-flex flex-wrap flex-row">
-        <template v-for="(options, locale) in locales">
-            <a
-                v-if="filter === '' || options.matches(filter)"
-                :key="locale"
-                :href="options.url"
-                class="list-group-item list-group-item-action list-group-item-hoverable w-md-50"
-            >
-                <div class="h3">
-                    <LocaleIcon :locale="options" class="mx-2" />
-                    {{ options.name }}
-                    <small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
-                </div>
-            </a>
-        </template>
+    <div class="border rounded overflow-hidden">
+        <div class="list-group d-flex flex-wrap flex-row list-group-flush">
+            <template v-for="(options, locale) in locales">
+                <a
+                    v-if="filter === '' || options.matches(filter)"
+                    :key="locale"
+                    :href="options.url"
+                    class="list-group-item list-group-item-action list-group-item-hoverable w-md-50 border-start"
+                >
+                    <div class="h3">
+                        <LocaleIcon :locale="options" class="mx-2" />
+                        {{ options.name }}
+                        <small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
+                    </div>
+                </a>
+            </template>
+        </div>
     </div>
 </template>