Make key bindings select consistent with UI (#2206)

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>

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>