Report #6

Description

Issue Description On some mobile viewports, the Lenci logo overlaps/interacts with the transparent header (top navigation area). The header content (logo + actions like “إنشاء حساب/تسجيل الدخول” and icons) appears to collide with the hero/brand area, causing visual overlap, clipping, or stacking conflicts. This is inconsistent across devices (e.g., Galaxy S22 Ultra vs iPhone 14/14 Pro Max), which suggests responsive breakpoints/safe-area/header height rules aren’t stable. Expected Behavior The header area (logo + actions) should remain self-contained with predictable height and spacing. The hero content (logo/heading) should start below the header and never overlap with it. On all mobile sizes, the logo and header elements should be fully visible and not clipped, including devices with notches/safe areas. Acceptance Criteria On the listed mobile sizes (Galaxy S22 Ultra 384×824, iPhone 14 390×844, iPhone 14 Pro Max 430×932), the header and hero content do not overlap. The header maintains a consistent minimum height and the page content below has enough top padding/margin to clear it. The logo in the header is fully visible (no clipping), and the header actions/icons remain clickable with no element covering them. Scrolling does not cause the header to “jump” into the hero area or change stacking order unexpectedly. Works correctly with RTL (Arabic) and respects safe-area insets (notch) without elements touching/colliding with the screen edges.