Enforce minimum width on header dropdown.

The header dropdown menu's horizontal positioning depends on the
width of the user pfp/username/currency region to not overflow off
the right side of the page. Therefore, we enforce a minimum width.

There is presumably some way to fix this by right-aligning the right
side of the dropdown menu to the right side of the dropdown header.
I didn't want to risk it given the strange interplay of all of the
Bootstrap styling and the media queries. Also, it does visually
look better to be left-aligned.
remotes/1693045480750635534/spooky-22
Snakes 2022-06-27 03:45:46 -04:00
parent d68f2a604a
commit a3e05a86d3
2 changed files with 3 additions and 3 deletions

View File

@ -158,7 +158,7 @@
</li> </li>
<li class="nav-item d-flex align-items-center justify-content-center text-center"> <li class="nav-item d-flex align-items-center justify-content-center text-center">
<div class="dropdown"> <div class="dropdown" id="header--dropdown">
<a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" <a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"> aria-haspopup="true" aria-expanded="false">
<div class="d-flex"> <div class="d-flex">
@ -177,7 +177,7 @@
</div> </div>
</div> </div>
</a> </a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left shadow fade px-0"> <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left shadow fade px-0" id="header--dropdown-menu">
<div class="px-2"> <div class="px-2">
<a class="dropdown-item" href="{{v.url}}"><i class="fas fa-user-circle fa-fw mr-3"></i>My <a class="dropdown-item" href="{{v.url}}"><i class="fas fa-user-circle fa-fw mr-3"></i>My
profile</a> profile</a>

View File

@ -1,6 +1,6 @@
{%- {%-
set CACHE_VER = { set CACHE_VER = {
'css/main.css': 365, 'css/main.css': 366,
'css/4chan.css': 61, 'css/4chan.css': 61,
'css/classic.css': 61, 'css/classic.css': 61,