parkhojeong opened a new pull request, #1522: URL: https://github.com/apache/airflow-site/pull/1522
User reported that the hamburger menu on the Airflow landing page appears centered on small screens. user-reported screenshot <img width="1897" height="241" alt="image" src="https://github.com/user-attachments/assets/e78ea410-ba07-44b5-a0c7-f45cc8574701"; /> Related: https://github.com/apache/airflow/discussions/66254 ## Root cause The navbar DOM is: ```html <nav class="navbar"> <div class="navbar__icon-container">logo</div> <div class="navbar__menu-container">desktop menu</div> <div class="navbar__theme-toggle">theme toggle</div> <!-- order: 10 --> <div class="navbar__drawer-container">hamburger</div> </nav> On mobile and tablet widths, the desktop menu is hidden, leaving the logo, theme toggle, and hamburger button in a single flex row. Because `.navbar__theme-toggle` used `order: 10` and the logo area did not have an auto margin, the remaining controls stayed in the middle of the navbar row instead of being pushed to the far right, causing the hamburger button to appear centered. ## Fix The navbar DOM is: ```html <nav class="navbar"> <div class="navbar__icon-container">logo</div> <div class="navbar__menu-container">desktop menu</div> <!-- hidden on mobile and tablet --> <div class="navbar__theme-toggle">theme toggle</div> <!-- margin-left: auto --> <div class="navbar__drawer-container">hamburger</div> </nav> The fix removes order: 10 from .navbar__theme-toggle and adds margin-left: auto, which keeps the controls aligned on the right side. - mobile screenshot | Before | After | |---|---| | <img width="452" height="102" alt="image" src="https://github.com/user-attachments/assets/9a1c0625-bdba-4ef0-9236-fab56d3ed8a6"; /> | <img width="412" height="101" alt="image" src="https://github.com/user-attachments/assets/0cafaec0-93c9-4e0d-9ca0-87b8cd52e98b"; /> | - table screenshot(same as mobile) | Before | After | |---|---| | <img width="998" height="96" alt="image" src="https://github.com/user-attachments/assets/2602d822-0c52-430f-913d-3e99c3b4202b"; /> |<img width="887" height="100" alt="image" src="https://github.com/user-attachments/assets/90d23ea8-e137-46b8-8098-73f35d8c6300"; /> | <details> <summary>desktop screenshot(not changed)</summary> desktop screenshot(not changed) | Before | After | |---|---| | <img width="1495" height="133" alt="image" src="https://github.com/user-attachments/assets/139fb550-2772-4f28-a8c8-470680cd78dc"; /> | <img width="1493" height="126" alt="image" src="https://github.com/user-attachments/assets/a5a8db4e-da51-4b22-9e6f-d86522ecd422"; /> | </details> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
