fix(webui): sidebar toggler not showing up on small screens #2053

Merged
Sainan merged 1 commits from sidebar-fix into main 2025-05-10 19:12:26 -07:00
2 changed files with 13 additions and 3 deletions

View File

@ -7,9 +7,9 @@
<link rel="stylesheet" href="/webui/style.css" /> <link rel="stylesheet" href="/webui/style.css" />
</head> </head>
<body> <body>
<nav class="navbar navbar-expand sticky-top bg-body-tertiary"> <nav class="navbar navbar-expand-lg sticky-top bg-body-tertiary">
<div class="container"> <div class="container">
<button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar" aria-label="Toggle sidebar"> <button class="navbar-toggler d-lg-none me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar" aria-label="Toggle sidebar">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand">OpenWF WebUI</a> <a class="navbar-brand">OpenWF WebUI</a>
@ -49,7 +49,7 @@
<div class="container pt-3 pb-3" id="main-view"> <div class="container pt-3 pb-3" id="main-view">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel"> <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarLabel">Sidebar</h5> <h5 class="offcanvas-title" id="sidebarLabel">OpenWF WebUI</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebar" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebar" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">

View File

@ -29,3 +29,13 @@ td.text-end > a > svg {
.card-body { .card-body {
overflow: auto; overflow: auto;
} }
/* fixes for navbar on small resolutions due to not being navbar-expand */
.navbar.sticky-top .navbar-nav {
flex-direction: row;
}
.dropdown-toggle {
padding-right: var(--bs-navbar-nav-link-padding-x);
padding-left: var(--bs-navbar-nav-link-padding-x);
}