From bbe8a711d7c6ab421aee96551a49bd4124ca994c Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sat, 21 Dec 2024 01:44:20 +0100
Subject: [PATCH] fix(ui): link text is left-aligned by default; links are
 auto-aligned

---
 front/src/components/ui/Layout.vue |  2 +-
 front/src/components/ui/Link.vue   | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 211edd95e..115ba248e 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -47,7 +47,7 @@ const columnWidth = props.columnWidth ?? 320
 
   /* Layout strategy */
 
-  &.columns{
+  &.columns {
     column-count: auto;
     column-width: calc(v-bind(columnWidth) * 1px);
     display: block;
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 629816cff..776345943 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -28,9 +28,9 @@ const isSimple = propsToColor(colorProps).class === ''
     v-bind="propsToColor({ ...colorProps, interactive: true })"
     :class="[
       $style.link,
-      'is-' + width,
-      'is-text-aligned-' + (alignText ?? 'center'),
-      'is-self-aligned-' + (alignSelf ?? 'left'),
+      $style['is-' + width],
+      $style['is-text-aligned-' + (alignText ?? 'left')],
+      $style['is-self-aligned-' + (alignSelf ?? 'auto')],
       round && $style['is-round'],
       isIconOnly && $style['is-icon-only'],
       isSimple && $style['force-underline'],
@@ -50,8 +50,8 @@ const isSimple = propsToColor(colorProps).class === ''
     :class="[
       $style.link,
       $style['is-' + width],
-      $style['is-text-aligned-' + (alignText ?? 'center')],
-      $style['is-self-aligned-' + (alignSelf ?? 'start')],
+      $style['is-text-aligned-' + (alignText ?? 'left')],
+      $style['is-self-aligned-' + (alignSelf ?? 'auto')],
       round && $style['is-round'],
       isIconOnly && $style['is-icon-only'],
       isSimple && $style['no-spacing'],
@@ -68,6 +68,7 @@ const isSimple = propsToColor(colorProps).class === ''
 <style module lang="scss">
   .link {
     white-space: nowrap;
+    justify-content: space-between;
 
     font-family: $font-main;
     font-weight: v-bind(fontWeight);
@@ -153,6 +154,10 @@ const isSimple = propsToColor(colorProps).class === ''
       align-self: center;
     }
 
+    &.is-self-aligned-auto {
+      align-self: auto;
+    }
+
     &.is-self-aligned-end {
       align-self: flex-end;
     }