public inbox for pgsql-www@postgresql.org
help / color / mirror / Atom feedFrom: Dave Page <dpage@pgadmin.org>
To: PostgreSQL WWW <pgsql-www@lists.postgresql.org>
Subject: Button alignment on hamburger menu
Date: Wed, 26 Nov 2025 10:40:07 +0000
Message-ID: <CA+OCxown=DT0kXqGsT_k5=xdGrJmkqkU_=N3w0PuWnNgC99F1Q@mail.gmail.com> (raw)
When the browser viewport shrinks and switches to hamburger menu mode, the
search and light dark mode buttons are terribly aligned.
The attached patch fixes that. See the attached screenshots for
before/after.
I will commit on Friday if no-one objects.
--
Dave Page
pgAdmin: https://www.pgadmin.org
PostgreSQL: https://www.postgresql.org
pgEdge: https://www.pgedge.com
Attachments:
[application/octet-stream] hamburger_button_alignment.diff (786B, 3-hamburger_button_alignment.diff)
download | inline diff:
diff --git a/media/css/main.css b/media/css/main.css
index 3be226d3..282e4c94 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -1884,6 +1884,27 @@ button.imagebutton {
#docContent table.table {
font-size: 70%;
}
+ /* Search and theme buttons layout in mobile menu */
+ #pgNavbar form[role="search"],
+ #pgNavbar #form-theme {
+ display: inline-block;
+ margin: 0.5rem 0.25rem;
+ }
+ #pgNavbar form[role="search"] .input-group {
+ width: auto;
+ }
+ #pgNavbar form[role="search"] .btn,
+ #pgNavbar #form-theme .btn {
+ width: 2.5rem;
+ height: 2.5rem;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ #pgNavbar #form-theme .btn {
+ margin-left: 0;
+ }
}
@media (max-width: 768px) {
[image/png] before.png (42.7K, 4-before.png)
download | view image
[image/png] after.png (38.4K, 5-after.png)
download | view image
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: pgsql-www@postgresql.org
Cc: dpage@pgadmin.org, pgsql-www@lists.postgresql.org
Subject: Re: Button alignment on hamburger menu
In-Reply-To: <CA+OCxown=DT0kXqGsT_k5=xdGrJmkqkU_=N3w0PuWnNgC99F1Q@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox