ivooskamp/backupchecks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix navbar overflow on split-screen desktop layouts

Browse Source
This commit is contained in:
Ivo Oskamp 2026-02-23 14:41:11 +01:00
parent 8e847e802b
commit 40ffe3656e
2 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
containers/backupchecks/src/static/css/layout.css
View File

@ -87,3 +87,43 @@ main.dashboard-container {
margin-left: 0; margin-left: 0;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
/* Navbar responsive behavior for split-screen/half-width desktop layouts */
@media (max-width: 1399.98px) {
.navbar .navbar-collapse {
align-items: stretch;
}
.navbar .navbar-search {
width: 100%;
margin-right: 0 !important;
}
.navbar .navbar-search .form-control {
width: 100%;
min-width: 0 !important;
}
.navbar .navbar-userinfo {
display: block;
margin-right: 0 !important;
margin-bottom: 0.5rem;
}
.navbar .navbar-role-form,
.navbar .navbar-theme-form {
width: 100%;
margin-right: 0 !important;
margin-bottom: 0.5rem;
}
.navbar .navbar-role-form .form-select,
.navbar .navbar-theme-form .form-select {
width: 100% !important;
min-width: 0 !important;
}
.navbar .navbar-logout-btn {
width: 100%;
}
}

12
containers/backupchecks/src/templates/layout/base.html
View File

@ -59,7 +59,7 @@
</div> </div>
{% endif %} {% endif %}
<nav class="navbar navbar-expand-lg fixed-top bg-body-tertiary border-bottom"> <nav class="navbar navbar-expand-xxl fixed-top bg-body-tertiary border-bottom">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('main.dashboard') }}">Backupchecks</a> <a class="navbar-brand" href="{{ url_for('main.dashboard') }}">Backupchecks</a>
<button <button
@ -162,7 +162,7 @@
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
<form method="get" action="{{ url_for('main.search_page') }}" class="d-flex me-3 mb-2 mb-lg-0" role="search" autocomplete="off"> <form method="get" action="{{ url_for('main.search_page') }}" class="navbar-search d-flex me-3 mb-2 mb-xxl-0" role="search" autocomplete="off">
<input <input
class="form-control form-control-sm me-2" class="form-control form-control-sm me-2"
type="search" type="search"
@ -174,14 +174,14 @@
/> />
<button class="btn btn-outline-secondary btn-sm" type="submit">Search</button> <button class="btn btn-outline-secondary btn-sm" type="submit">Search</button>
</form> </form>
<span class="navbar-text me-3"> <span class="navbar-text me-3 navbar-userinfo">
<a class="text-decoration-none" href="{{ url_for('main.user_settings') }}"> <a class="text-decoration-none" href="{{ url_for('main.user_settings') }}">
{{ current_user.username }} ({{ active_role }}) {{ current_user.username }} ({{ active_role }})
</a> </a>
</span> </span>
{% if current_user.is_authenticated and user_roles|length > 1 %} {% if current_user.is_authenticated and user_roles|length > 1 %}
<form method="post" action="{{ url_for('main.set_active_role_route') }}" class="me-2"> <form method="post" action="{{ url_for('main.set_active_role_route') }}" class="me-2 navbar-role-form">
<select <select
class="form-select form-select-sm" class="form-select form-select-sm"
name="active_role" name="active_role"
@ -195,7 +195,7 @@
</select> </select>
</form> </form>
{% endif %} {% endif %}
<form method="post" action="{{ url_for('main.set_theme_preference') }}" class="me-2"> <form method="post" action="{{ url_for('main.set_theme_preference') }}" class="me-2 navbar-theme-form">
<select <select
class="form-select form-select-sm" class="form-select form-select-sm"
name="theme" name="theme"
@ -208,7 +208,7 @@
<option value="auto" {% if _theme_pref == 'auto' %}selected{% endif %}>Auto</option> <option value="auto" {% if _theme_pref == 'auto' %}selected{% endif %}>Auto</option>
</select> </select>
</form> </form>
<a class="btn btn-outline-secondary" href="{{ url_for('auth.logout') }}">Logout</a> <a class="btn btn-outline-secondary navbar-logout-btn" href="{{ url_for('auth.logout') }}">Logout</a>
{% endif %} {% endif %}
</div> </div>
</div> </div>