Fix iOS UI issues: header layout and scroll behavior

[Copilot]

Two iOS-specific issues: (1) navbar brand pushed to far right on mobile due to position-absolute breaking when flex container wraps, and (2) scroll-back/sticky behavior when dragging on card elements.

Header Layout (mobile < 768px)

• Restructure navbar flex container to flex-wrap: wrap with brand on its own centered row via order: -1 and width: 100%
• Nav links and action buttons flow naturally to second row

iOS Scroll Behavior

• overscroll-behavior: none on html/body to prevent rubber-band bounce
• touch-action: pan-y on main and .card elements for proper vertical touch scrolling
• -webkit-overflow-scrolling: touch on scrollable containers

@media (max-width:768px) {
  .navbar .container-xxl {
    flex-wrap: wrap;
    justify-content: center;
  }
  .navbar-brand.position-absolute {
    position: static !important;
    order: -1;
    width: 100%;
    text-align: center;
  }
}

Mobile Preview (430×932)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Fix iOS UI issues</issue_title>
<issue_description>There are two issues with the site on iOS at the moment.

Here is what the site currently looks like on an IPhone 16 Pro Max:

I have highlighted two of the issues -
On the top of the page the header folding is a bit weird and the “TuneBridge” title button gets merged over to the right hand side of the screen above the login and register buttons. This is functional but I’d have expected the title to remain in the middle of the page and for the other buttons and links to be in the lower line of the title (it visually looks like there are two rows).

I’ve also highlighted the bottom section, but this is really a problem across the site. It becomes hard or almost impossible to scroll in some places on the site because the divs seem somewhat sticky and when you drag them the site moves but it then scrolls back to the previous location.

Here is a recording as well:
https://github.com/user-attachments/assets/2fcb9370-5bc9-4888-b4d0-b5fd7cb7bc28

If you drag the area slightly between the divs then the page does scroll as expected, but the weird scroll back is unwelcome and inconvenient.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Fix iOS UI issues #146

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.