[wp-meta] [Making WordPress.org] #8227: Photo Directory: Mobile menu toggle icon alignment and sizing issue below 600px

[Making WordPress.org]

#8227: Photo Directory: Mobile menu toggle icon alignment and sizing issue below
600px
-----------------------------+---------------------
 Reporter:  azharderaiya     |       Owner:  (none)
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:
Component:  Photo Directory  |  Resolution:
 Keywords:                   |
-----------------------------+---------------------

Comment (by darshitrajyaguru97):

 == Testing Summary ==

 I was able to reproduce the issue on the Photo Directory page at smaller
 viewport widths.

 === **Environment ===
 * Device: Chrome DevTools (iPhone 12 Pro simulation)
 * Viewport: ≤599px
 * Browser: Chrome (latest)

 === **Steps to Reproduce ===
 # Visit https://wordpress.org/photos/
 # Open DevTools and set viewport width to 599px or below
 # Observe the secondary menu toggle icon in the "Photos" header

 === **Actual Result ===
 * The menu toggle icon appears misaligned and visually compressed
 * The SVG icon does not maintain proper alignment within its container

 === **Expected Result ===
 * The menu toggle icon should be centered and maintain consistent
 dimensions
 * It should visually align with the primary navigation toggle

 === **Root Cause ===
 * The button {{{(.wp-block-navigation__responsive-container-open)}}} lacks
 enforced dimensions and alignment on smaller screens
 * The SVG icon uses fixed dimensions (24x24), which do not adapt well when
 the parent container shrinks

 === **Suggested Approach ===

 * Ensure the toggle button has a consistent clickable area and proper
 alignment (e.g., using flexbox)
 * Allow the SVG to scale more predictably by controlling its size via CSS
 instead of relying solely on fixed width/height attributes

 **Example:

 {{{
 @media (max-width: 599px) {
         .wporg-is-mobile-nav .wp-block-navigation__responsive-container-
 open {
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 width: 40px;
                 height: 40px;
                 padding: 0;
         }

         .wporg-is-mobile-nav .wp-block-navigation__responsive-container-
 open svg {
                 width: 20px;
                 height: 20px;
                 flex-shrink: 0;
         }
 }
 }}}

 === **Notes ===
 * The issue is primarily layout-related rather than an SVG asset issue
 * Updating the SVG itself is likely unnecessary unless visual
 inconsistencies are observed across breakpoints
 * Fixing container behavior should resolve the problem consistently

 Happy to test a patch or refine further if needed.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/8227#comment:1>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org