/** * Unified layout for header controls (user / bell / search). * Icon + optional label share the same DOM hierarchy and spacing. */ .controls-container { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0; height: 100%; } .header-control { position: relative; display: inline-flex; align-items: center; height: 100%; flex-shrink: 0; } .header-control__trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px; padding: 8px 10px !important; height: 100% !important; min-height: 0; line-height: 1 !important; border: none; background: transparent; cursor: pointer; text-decoration: none; font-family: var(--font-family-accent) !important; font-size: 0.95rem; font-weight: 500; box-sizing: border-box; transform: none; margin: 0; } .header-control__label { display: block; white-space: nowrap; line-height: 1; align-self: center; } /* Legacy auth/search rules set height:auto and uneven padding — reset here */ .header-control.auth-user-menu { display: inline-flex !important; align-items: center !important; align-self: stretch; height: 100%; vertical-align: middle; } .header-control__icon.auth-user-icon, .header-control__icon.search-icon { display: block !important; margin: 0 !important; flex-shrink: 0; } .header-control__icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .header-control__icon { display: block; width: 16px; height: 16px; flex-shrink: 0; } /* Auth user dropdown — portaled to while open (like notification bell). */ .auth-user-menu { position: relative; } .auth-user-dropdown.is-portaled, .auth-user-dropdown.is-fixed { position: fixed !important; /* top/left are set inline by header-auth.js — do not override here */ right: auto !important; margin: 0; min-width: 260px; z-index: 2147483000; display: block !important; } .auth-user-dropdown:not([hidden]).is-fixed { opacity: 1 !important; transform: none !important; pointer-events: all !important; visibility: visible !important; } /* Progressive: icon-only when the header is tight */ @media (max-width: 1280px) { .header-control__label { display: none; } .header-control__trigger { padding: 8px; gap: 0; } } @media (max-width: 768px) { /* Keep controls grouped — override theme `display: contents` on mobile */ .controls-container { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap; grid-column: 3; justify-self: end; height: 100%; } .header-control, .auth-user-menu { display: inline-flex !important; align-items: center; height: 100%; } .header-control__label, .auth-user-name, .ttfc-header-bell-text, .search-text, .auth-login-text { display: none !important; } .header-control__trigger, .auth-user-toggle, .ttfc-header-bell-toggle, .search-btn, .auth-login-btn { padding: 6px 8px !important; gap: 0 !important; min-width: 36px; } .header-control__icon, .header-control__icon-wrap, .auth-user-icon, .search-icon, .auth-login-icon, .ttfc-header-bell-icon { width: 20px !important; height: 20px !important; } .header-control__icon-wrap { width: 20px; height: 20px; } }