From f8910410bb7c87b6ab4b3b54b3b4385168c9c2b8 Mon Sep 17 00:00:00 2001
From: jeremystretch <jstretch@ns1.com>
Date: Fri, 6 Aug 2021 12:46:57 -0400
Subject: [PATCH] Closes #6823: Improve table configuration form layout

---
 .../templatetags/table_config_form.html       | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/netbox/templates/utilities/templatetags/table_config_form.html b/netbox/templates/utilities/templatetags/table_config_form.html
index 7a45ca3c0..3c44642d4 100644
--- a/netbox/templates/utilities/templatetags/table_config_form.html
+++ b/netbox/templates/utilities/templatetags/table_config_form.html
@@ -1,37 +1,44 @@
 {% load form_helpers %}
+
 <div class="modal fade" tabindex="-1" id="{{ table_name }}_config">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Table Configuration</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Table Configuration</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form class="form-horizontal userconfigform" data-config-root="tables.{{ table_config_form.table_name }}">
+        <div class="modal-body row">
+          <div class="col-5 text-center">
+            {{ table_config_form.available_columns.label }}
+            {{ table_config_form.available_columns }}
+          </div>
+          <div class="col-2 d-flex align-items-center">
+            <div>
+              <a class="btn btn-success btn-sm w-100 my-2" id="add_columns">
+                <i class="mdi mdi-arrow-right-bold"></i> Add
+              </a>
+              <a class="btn btn-danger btn-sm w-100 my-2" id="remove_columns">
+                <i class="mdi mdi-arrow-left-bold"></i> Remove
+              </a>
             </div>
-            <form class="form-horizontal userconfigform" data-config-root="tables.{{ table_config_form.table_name }}">
-                <div class="modal-body">
-                    {% render_field table_config_form.available_columns %}
-                    <div class="row my-3">
-                        <div class="col col-md-9 offset-md-3">
-                            <a class="btn btn-success btn-sm" id="add_columns"><i class="mdi mdi-arrow-down-bold"></i> Add Columns</a>
-                            <a class="btn btn-danger btn-sm" id="remove_columns"><i class="mdi mdi-arrow-up-bold"></i> Remove Columns</a>
-                        </div>
-                    </div>
-                    {% render_field table_config_form.columns %}
-                    <div class="row my-3">
-                        <div class="col col-md-9 offset-md-3">
-                            <a class="btn btn-primary btn-sm" id="move-option-up" data-target="id_columns">
-                                <i class="mdi mdi-arrow-up-bold"></i> Move Up
-                            </a>
-                            <a class="btn btn-primary btn-sm" id="move-option-down" data-target="id_columns">
-                                <i class="mdi mdi-arrow-down-bold"></i> Move Down
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="submit" class="btn btn-outline-danger" id="reset_tableconfig" value="Reset">Reset</button>
-                    <button type="submit" class="btn btn-primary" id="save_tableconfig" value="Save">Save</button>
-                </div>
-            </form>
+          </div>
+          <div class="col-5 text-center">
+            {{ table_config_form.columns.label }}
+            {{ table_config_form.columns }}
+            <a class="btn btn-primary btn-sm mt-2" id="move-option-up" data-target="id_columns">
+                <i class="mdi mdi-arrow-up-bold"></i> Move Up
+            </a>
+            <a class="btn btn-primary btn-sm mt-2" id="move-option-down" data-target="id_columns">
+                <i class="mdi mdi-arrow-down-bold"></i> Move Down
+            </a>
+          </div>
         </div>
+        <div class="modal-footer">
+            <button type="submit" class="btn btn-outline-danger" id="reset_tableconfig" value="Reset">Reset</button>
+            <button type="submit" class="btn btn-primary" id="save_tableconfig" value="Save">Save</button>
+        </div>
+      </form>
     </div>
+  </div>
 </div>