From 2ddac39b65c5f3d269e68152b9f5bc580576bdeb Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 6 Feb 2025 19:32:58 +0200
Subject: [PATCH] client: tweak the editability dropdown

---
 src/public/app/widgets/editability_select.ts | 26 ++++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/public/app/widgets/editability_select.ts b/src/public/app/widgets/editability_select.ts
index c98cfd90f..d9a8898cf 100644
--- a/src/public/app/widgets/editability_select.ts
+++ b/src/public/app/widgets/editability_select.ts
@@ -14,10 +14,14 @@ const TPL = `
     }
 
     .editability-dropdown .dropdown-item {
-        display: block !important;
+        display: flex !importamt;
     }
 
-    .editability-dropdown .dropdown-item div {
+    .editability-dropdown .dropdown-item > div {
+        margin-left: 10px;
+    }
+
+    .editability-dropdown .description {
         font-size: small;
         color: var(--muted-text-color);
         white-space: normal;
@@ -30,18 +34,24 @@ const TPL = `
     <div class="editability-dropdown dropdown-menu dropdown-menu-right tn-dropdown-list">
         <a class="dropdown-item" href="#" data-editability="auto">
             <span class="check">&check;</span>
-            ${t("editability_select.auto")}
-            <div>${t("editability_select.note_is_editable")}</div>
+            <div>
+                ${t("editability_select.auto")}
+                <div class="description">${t("editability_select.note_is_editable")}</div>
+            </div>
         </a>
         <a class="dropdown-item" href="#" data-editability="readOnly">
             <span class="check">&check;</span>
-            ${t("editability_select.read_only")}
-            <div>${t("editability_select.note_is_read_only")}</div>
+            <div>
+                ${t("editability_select.read_only")}
+                <div class="description">${t("editability_select.note_is_read_only")}</div>
+            </div>
         </a>
         <a class="dropdown-item" href="#" data-editability="autoReadOnlyDisabled">
             <span class="check">&check;</span>
-            ${t("editability_select.always_editable")}
-            <div>${t("editability_select.note_is_always_editable")}</div>
+            <div>
+                ${t("editability_select.always_editable")}
+                <div class="description">${t("editability_select.note_is_always_editable")}</div>
+            </div>
         </a>
     </div>
 </div>