Merge pull request #4235 from OneCommunityGlobal/DurgaVenkataPraveen-HeaderAlignmentFixing

Durga Venkata Praveen Fix: Header responsive layout and CSS module conversion

Author: one-community

src/components/Header/Header.jsx

@@ -54,7 +54,7 @@ import {
 } from '../../languages/en/ui';
 import Logout from '../Logout/Logout';
 import '../../App.css';
-import './Header.css';
+import styles from './Header.module.css';
 import hasPermission, { cantUpdateDevAdminDetails } from '../../utils/permissions';
 import {
   getUnreadUserNotifications,
@@ -192,6 +192,44 @@ export function Header(props) {
     };
   }, [user.userid, props.auth.firstName]);
 
+  // Debugging Enhancement: Monitor window resize events for responsive testing
+  useEffect(() => {
+    const handleResize = () => {
+      const currentWidth = window.innerWidth;
+      // eslint-disable-next-line no-console
+      console.log(`[Header Debug] Window resized to: ${currentWidth}px`);
+      
+      // Log breakpoint information for debugging
+      if (currentWidth >= 1728) {
+        // eslint-disable-next-line no-console
+        console.log(`[Header Debug] Breakpoint: Large screen (90%+) - Owner message below timer`);
+      } else if (currentWidth >= 1400) {
+        // eslint-disable-next-line no-console
+        console.log(`[Header Debug] Breakpoint: Desktop - Centered layout`);
+      } else if (currentWidth >= 1200) {
+        // eslint-disable-next-line no-console
+        console.log(`[Header Debug] Breakpoint: Medium desktop - Centered layout`);
+      } else if (currentWidth >= 768) {
+        // eslint-disable-next-line no-console
+        console.log(`[Header Debug] Breakpoint: Tablet - Stacked layout`);
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(`[Header Debug] Breakpoint: Mobile - Compact vertical layout`);
+      }
+    };
+
+    // Log initial window size
+    handleResize();
+
+    // Add resize event listener
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   useEffect(() => {
     if (props.auth.isAuthenticated) {
       props.getHeaderData(props.auth.user.userid);
@@ -340,29 +378,36 @@ export function Header(props) {
 
   const viewingUser = JSON.parse(window.sessionStorage.getItem('viewingUser'));
   return (
-    <div className={`header-wrapper${darkMode ? ' dark-mode' : ''}`} data-testid="header">
-      <Navbar className="py-3 navbar" color="dark" dark expand="md">
+    <div className={`${styles.headerWrapper}${darkMode ? ` ${styles.darkMode}` : ''}`} data-testid="header">
+      <Navbar className={`py-3 ${styles.navbar}`} color="dark" dark expand="md">
         {logoutPopup && <Logout open={logoutPopup} setLogoutPopup={setLogoutPopup} />}
         {showPromotionsPopup && 
         (<DisplayBox onClose={() => setShowPromotionsPopup(false)} />)}
-        <div
-          className="timer-message-section"
-          style={user.role === 'Owner' ? { marginRight: '0.5rem' } : { marginRight: '1rem' }}
-        >
-          {isAuthenticated && <Timer darkMode={darkMode} />}
-          {isAuthenticated && (
-            <div className="owner-message">
-              <OwnerMessage />
-            </div>
-          )}
-        </div>
-        <NavbarToggler onClick={toggle} />
-        {isAuthenticated && (
-          <Collapse isOpen={isOpen} navbar>
-            <Nav className="ml-auto nav-links d-flex" navbar>
-              <div
-                className="d-flex justify-content-center align-items-center"
-                style={{ width: '100%' }}
+        
+        <div className="d-flex justify-content-between align-items-center w-100 p-3">
+          {/* Left Component - Timer */}
+          <div className={styles.leftSection}>
+            {isAuthenticated && <Timer darkMode={darkMode} />}
+          </div>
+
+          {/* Center Component - Owner Message */}
+          <div className={`${styles.centerSection} text-center flex-grow-1`}>
+            {isAuthenticated && (
+              <div className={styles.ownerMessage}>
+                <OwnerMessage />
+              </div>
+            )}
+          </div>
+
+          {/* Right Component - Navigation */}
+          <div className={styles.rightSection}>
+            <NavbarToggler onClick={toggle} />
+            {isAuthenticated && (
+              <Collapse isOpen={isOpen} navbar>
+                <Nav className={`${styles.navLinks} d-flex`} navbar>
+                  <div
+                    className="d-flex justify-content-center align-items-center"
+                    style={{ width: '100%' }}
               >
                 {canUpdateTask && (
                   <NavItem className="responsive-spacing">
@@ -615,6 +660,8 @@ export function Header(props) {
             </Nav>
           </Collapse>
         )}
+          </div>
+        </div>
       </Navbar>
       {!isAuthUser && (
         <PopUpBar

src/components/Header/Header.css src/components/Header/Header.module.csssrc/components/Header/Header.css renamed to src/components/Header/Header.module.css

@@ -67,7 +67,7 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  white-space: nowrap;
+  overflow: visible;
 }
 
 .redBackGroupHeader {
@@ -92,11 +92,6 @@
 
 }
 
-.navbar {
-  z-index: 100;
-  overflow: visible;
-}
-
 .nav-links {
   display: flex;
   flex-direction: row;
@@ -231,4 +226,83 @@
     transform: scale(1) !important;
     vertical-align: middle !important;
   }
+}
+
+/* Conservative Three Section Header Layout - Prevents icon overlap */
+.left-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 0 0 auto;
+  min-width: fit-content;
+}
+
+.center-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  text-align: center;
+  min-width: 200px; /* Ensure minimum visibility */
+  overflow: hidden; /* Handle text overflow gracefully */
+}
+
+.right-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  min-width: fit-content;
+}
+
+/* Responsive behavior - prevent icon overlap on smaller screens */
+@media (max-width: 1200px) {
+  .left-section,
+  .center-section,
+  .right-section {
+    flex-wrap: nowrap;
+  }
+  
+  /* Ensure right section (navigation/icons) stays on the right */
+  .right-section {
+    margin-left: 0.5rem;
+    flex-shrink: 0;
+  }
+  
+  /* Give center section minimum space but allow some compression */
+  .center-section {
+    flex-shrink: 0.5;
+    min-width: 150px; /* Minimum width to stay visible */
+    margin: 0 0.5rem; /* Add some breathing room */
+  }
+  
+  /* Keep left section stable but allow some compression */
+  .left-section {
+    flex-shrink: 0.5;
+    margin-right: 0.5rem;
+  }
+}
+
+/* Medium screens - better balance */
+@media (max-width: 900px) {
+  .center-section {
+    min-width: 120px; /* Still visible but more compressed */
+    font-size: 0.9rem; /* Slightly smaller text */
+  }
+}
+
+/* Mobile specific - stack vertically to prevent overlap */
+@media (max-width: 768px) {
+  .navbar .d-flex {
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+  }
+  
+  .left-section,
+  .center-section,
+  .right-section {
+    width: 100% !important;
+    justify-content: center !important;
+  }
 }