From 998d8e83f3b53e964cd3396457dffd25529c6b8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Valim?= <jose.valim@dashbit.co>
Date: Sat, 16 Sep 2023 11:39:15 +0200
Subject: [PATCH] Make key bindings select consistent with UI (#2206)

---
 .../components/form_components.ex             |  3 ++-
 lib/livebook_web/live/settings_live.ex        | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/lib/livebook_web/components/form_components.ex b/lib/livebook_web/components/form_components.ex
index 0a638c65c..e09742144 100644
--- a/lib/livebook_web/components/form_components.ex
+++ b/lib/livebook_web/components/form_components.ex
@@ -408,6 +408,7 @@ defmodule LivebookWeb.FormComponents do
   attr :label, :string, default: nil
   attr :value, :any
   attr :errors, :list, default: []
+  attr :class, :string, default: ""
   attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form"
   attr :help, :string, default: nil
 
@@ -421,7 +422,7 @@ defmodule LivebookWeb.FormComponents do
 
     ~H"""
     <.field_wrapper id={@id} name={@name} label={@label} errors={@errors} help={@help}>
-      <select id={@id} name={@name} class="input" {@rest}>
+      <select id={@id} name={@name} class={["input", @class]} {@rest}>
         <option :if={@prompt} value="" disabled selected><%= @prompt %></option>
         <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
       </select>
diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex
index 40a61e8b2..d4cc0bf1f 100644
--- a/lib/livebook_web/live/settings_live.ex
+++ b/lib/livebook_web/live/settings_live.ex
@@ -168,16 +168,22 @@ defmodule LivebookWeb.SettingsLive do
                 label="Wrap words in Markdown"
                 value={false}
               />
-              <.select_field
-                name="editor_mode"
-                label="Key bindings"
-                value="normal"
-                options={[
-                  {"Default", "default"},
-                  {"Emacs", "emacs"},
-                  {"Vim", "vim"}
-                ]}
-              />
+              <div class="flex items-center gap-1 sm:gap-3 justify-between">
+                <span class="text-gray-700 flex gap-1 items-center">
+                  Key bindings
+                </span>
+
+                <.select_field
+                  name="editor_mode"
+                  value={false}
+                  class="pt-1 pb-1"
+                  options={[
+                    {"Default", "default"},
+                    {"Emacs", "emacs"},
+                    {"Vim", "vim"}
+                  ]}
+                />
+              </div>
             </div>
           </div>
         </div>