From e53f7fdc088f819940c54e579807ef55d2e2c1c9 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Wed, 18 Dec 2024 03:26:44 +0000
Subject: [PATCH] Minor design update for roles list in settings.

---
 VERSION                             |  2 +-
 assets/misuzu.css/settings/role.css | 18 ++++++++++++++----
 templates/settings/account.twig     |  2 ++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/VERSION b/VERSION
index 781eeac..11376a9 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-20241218
+20241218.1
diff --git a/assets/misuzu.css/settings/role.css b/assets/misuzu.css/settings/role.css
index 98e8975..f604d81 100644
--- a/assets/misuzu.css/settings/role.css
+++ b/assets/misuzu.css/settings/role.css
@@ -4,13 +4,12 @@
     border-radius: 2px;
     margin: 2px;
     overflow: hidden;
-    width: 200px;
 }
 
 .settings__role__collection {
     display: flex;
-    flex-wrap: wrap;
     justify-content: center;
+    flex-direction: column;
     margin: 2px;
 }
 
@@ -19,14 +18,25 @@
     width: 100%;
     height: 100%;
     display: flex;
-    flex-direction: column;
+    align-items: center;
 }
 
 .settings__role__name {
     font-size: 1.2em;
     line-height: 1.7em;
-    border-bottom: 1px solid var(--accent-colour);
     padding: 0 5px;
+    margin: 2px 0;
+    min-width: 160px;
+    text-align: right;
+}
+
+.settings__role__separator {
+    flex-grow: 0;
+    flex-shrink: 0;
+    background-color: var(--accent-colour);
+    width: 1px;
+    align-self: stretch;
+    margin: 5px 0;
 }
 
 .settings__role__description {
diff --git a/templates/settings/account.twig b/templates/settings/account.twig
index 3246b9c..d281b0e 100644
--- a/templates/settings/account.twig
+++ b/templates/settings/account.twig
@@ -80,6 +80,8 @@
                                 {{ role.name }}
                             </div>
 
+                            <div class="settings__role__separator"></div>
+
                             <div class="settings__role__description">
                                 {{ role.description }}
                             </div>