I am facing an issue where the column containing the select field overlaps the first column with the "heading" when collapsing the window before it hits the medium breakpoint. I have tried adjusting the settings but still can't figure out why this is happening. Any assistance would be greatly appreciated.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df9e3fbe3fd">[email protected]</a>/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="row">
<div class="col-md-1">
<span class="h2">Leads</span>
</div>
<div class="col-md-3">
<form>
<input type="hidden" name="status" id="status" value="Today">
<input type="hidden" name="tab" id="tab-status-agent" value="follow_up">
<select name="user_id" id="select-agent" class="form-control" onchange="this.form.submit()">
<option value="">All Team Members</option>
<option value="unassigned">Unassigned</option>
<option value="7">Luke Skywalker</option>
<option value="2">Han Solo</option>
<option value="1">Leia Organa</option>
</select>
</form>
</div>
<div class="col-md-5 text-right">
<form data-remote="false" class="d-inline" id="power-dialer-form" action="/calls/power_dialer" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="vqtLpEeM2kh5MP7nZFhFrfrmJhjm6T3IF++8UGmHpHjZP4E9WSOpIsextGJptcRYPIuDBqVWgDkVYeHOn9uWow==">
<button type="submit" name="commit" value="" class="btn btn-primary" id="add-to-power-dialer" disabled="">
<i class="fas fa-phone" title="Add to power dialer"></i>
</button>
</form>
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn btn-primary" data-toggle="modal" data-target="#assign-leads" title="Assign leads" href="#">
<span class="fas fa-user-check"></span>
</a>
<a class="btn btn-primary" data-toggle="modal" data-target="#new-lead" title="New lead" href="#">
<span class="fas fa-user-plus"></span>
</a>
<a class="btn btn-primary" data-toggle="modal" data-target="#import-leads" title="Import leads" href="#">
<span class="fas fa-file-import"></span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="input-group search-bar">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon"><i class="fas fa-search"></i></div>
</div>
<input type="search" id="search" class="form-control">
</div>
</div>
</div>I tried to adjust the settings as follows:
ROW: COL-2 COL-3 COL-4 COL-3
This resolved the overlap issue, however, it resulted in the select field being too far away from the heading.