Fixes #6999: Properly align controls on sm and md breakpoints

netbox/project-static/styles/netbox.scss

@@ -288,7 +288,7 @@ div.title-container {
     justify-content: flex-start;
 
     // Right-align controls on larger screens.
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(lg) {
       justify-content: flex-end;
     }
 
@@ -872,11 +872,22 @@ div.card-overlay {
   }
 }
 
-div.card > div.card-header > div.table-controls {
+.table-controls {
   display: flex;
-  align-items: center;
-  width: 100%;
-  max-width: 25%;
+
+  @include media-breakpoint-up(md) {
+    // `!important` needed because of inherited margin-bottom from `.col`
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .table-configure {
+    justify-content: flex-start;
+
+    @include media-breakpoint-up(md) {
+      justify-content: flex-end;
+    }
+  }
 
   .form-switch.form-check-inline {
     flex: 1 0 auto;

netbox/templates/inc/table_controls.html

@@ -1,5 +1,5 @@
 <div class="row mb-3 justify-content-between">
-  <div class="col col-12 col-lg-4 my-3 my-lg-0 d-flex noprint table-controls">
+  <div class="table-controls noprint col col-12 col-md-8 col-lg-4">
     <div class="input-group input-group-sm">
       <input
         type="text"
@@ -9,9 +9,9 @@
       />
     </div>
   </div>
-  <div class="col col-md-3 mb-0 d-flex noprint table-controls">
+  <div class="table-controls noprint col col-md-3 mb-0">
     {% if request.user.is_authenticated and table_modal %}
-      <div class="input-group input-group-sm justify-content-end">
+      <div class="table-configure input-group input-group-sm">
         <button
           type="button"
           data-bs-toggle="modal"