999933: resolved bugs and UI issues

Employee_Managment_App/src/App.css

@@ -0,0 +1,237 @@
+/* 1. GENERAL: Container paddings shrink, stacking, font adapt for mobile */
+@media (max-width: 768px) {
+  .app-layout {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    min-width: 0;
+    font-size: 15px;
+  }
+  .app-main {
+    padding: 6px 0 0 0 !important;
+  }
+  .achievements-container,
+  .policies-content,
+  .employees-content {
+    padding: 10px 5px !important;
+  }
+}
+
+/* 2. SIDEBAR: overlay, hide, and usability tweaks for mobile */
+@media (max-width: 991px) {
+  .e-sidebar {
+    width: 80vw !important;
+    min-width: 200px !important;
+    max-width: 97vw !important;
+    left: 0 !important;
+    top: 0 !important;
+    height: 100vh !important;
+    border-radius: 0 !important;
+    box-shadow: 0 2px 24px rgba(0,0,0,0.22);
+    z-index: 1111;
+  }
+  .app-sidebar {
+    min-width: 0;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+  .sidebar-brand {
+    gap: 8px !important;
+    font-size: 19px;
+    padding: 8px 0 9px 12px !important;
+  }
+  .sidebar-toggle {
+    margin-left: auto;
+  }
+  .nav.flex-column {
+    gap: 0;
+    padding: 2px 0;
+  }
+}
+
+/* 3. TOP NAV: squash items, stack user info, hide create if needed */
+@media (max-width: 768px) {
+  .topnav-inner {
+    gap: 3px !important;
+    padding: 0 4px !important;
+  }
+  .cluster-right {
+    gap: 3px !important;
+  }
+  .btn-create-group, .btn-create {
+    min-width: 70px !important;
+    padding: 0 7px;
+    font-size: 13px !important;
+  }
+  .topnav-avatar-name {
+    font-size: 12px;
+    margin-left: 4px !important;
+    word-break: break-all;
+  }
+}
+
+/* 4. SEARCH: search bar fills width, form controls height shrink */
+@media (max-width: 768px) {
+  .cluster-center, .search-form {
+    width: 97vw !important;
+    min-width: 0 !important;
+    max-width: 99vw !important;
+  }
+  .search-form .search-field {
+    height: 32px !important;
+    font-size: 14px;
+  }
+}
+/* Mobile search field needs full width */
+@media (max-width: 530px) {
+  .search-form,
+  .search-field.input-group {
+    width: 99vw !important;
+    min-width: 0 !important;
+    max-width: 100vw !important;
+  }
+}
+
+/* 5. BUTTONS, CHIPS, and TOOLBARS: stack and compress */
+@media (max-width: 640px) {
+  .toolbar-right,
+  .org-filters__pills,
+  .filter-chip-row {
+    flex-wrap: wrap !important;
+    gap: 7px !important;
+    row-gap: 6px !important;
+    justify-content: flex-start !important;
+  }
+  .toolbar-field, .filter-chip {
+    font-size: 13px !important;
+    padding: 6px 10px !important;
+  }
+  .annc-panel-tabs button {
+    padding: 8px 4px !important;
+  }
+}
+
+/* 6. GRIDS/TABLES: Horizontal scroll for overflow columns on mobile */
+@media (max-width: 900px) {
+  .e-grid, .lb-sections, .policies-grid-wrapper .e-grid {
+    overflow-x: auto !important;
+    min-width: 360px !important;
+    width: 100vw !important;
+  }
+}
+/* For actual grid row cells, allow wrapping */
+@media (max-width: 640px) {
+  .e-grid .e-rowcell, .lb-row, .policy-name-cell {
+    font-size: 13px !important;
+    padding-left: 4px !important;
+    padding-right: 4px !important;
+    white-space: normal !important;
+  }
+}
+/* Keep action buttons visible in grid on small screens */
+@media (max-width: 640px) {
+  .policy-dialog, .e-dialog {
+    max-width: 97vw !important;
+    min-width: 0 !important;
+  }
+}
+
+/* 7. EMPLOYEE PROFILE (tabs, avatar, flexing) */
+@media (max-width: 600px) {
+  .overview-header {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: 3px !important;
+  }
+  .profile-data-name, .profile-data-mail, .profile-data-designation, .profile-data-supervisor, .profile-data-branch {
+    font-size: 14px !important;
+  }
+  .profile-image svg {
+    width: 48px !important;
+    height: 48px !important;
+  }
+}
+
+/* 8. DIALOGS/ANNOUNCEMENTS: Center and fill for mobile */
+@media (max-width: 570px) {
+  .e-annc-detail-dialog.e-dialog, .policy-dialog.e-dialog {
+    width: 97vw !important;
+    max-width: 97vw !important;
+    left: 1vw !important;
+    right: 1vw !important;
+    min-width: 0 !important;
+    border-radius: 11px !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  .annc-dlg-content {
+    padding-left: 2vw !important;
+    padding-right: 2vw !important;
+  }
+}
+
+/* 9. ANNOUNCEMENTS PANEL: right panel covers full width on tiny screens */
+@media (max-width: 480px) {
+  .annc-right-panel {
+    width: 99vw !important;
+    min-width: 0 !important;
+    left: 0 !important;
+    border-radius: 0 !important;
+    max-width: 100vw !important;
+    font-size: 14px !important;
+  }
+  .annc-panel-header, .annc-panel-tabs, .annc-panel-content {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+}
+
+/* 10. LEADERBOARD/ACHIEVEMENTS: Stacked layout for sections on mobile */
+@media (max-width: 640px) {
+  .lb-sections {
+    grid-template-columns: 1fr !important;
+  }
+  .lb-section {
+    min-width: 0 !important;
+    border-radius: 10px !important;
+    margin-bottom: 14px !important;
+  }
+}
+
+/* 11. GENERAL: Shrink font slightly on XS mobile, compress app-body paddings */
+@media (max-width: 420px) {
+  html, body {
+    font-size: 13.6px !important;
+  }
+  .app-layout {
+    padding: 0 0 !important;
+  }
+}
+
+@media (max-width: 991px) {
+  .e-sidebar {
+    width: 68vw !important;
+    font-size: 30px;
+    min-width: 160px !important;
+    max-width: 88vw !important;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    box-shadow: 3px 0 10px rgba(0,0,0,0.34);
+    background: #222b3c;
+  }
+  .nav-icon{
+    font-size:30px !important;
+    margin-right:15px;
+  }
+  .sidebar-brand{
+    font-size: 35px;
+  }
+  .title{
+    font-size: 35px !important;
+  }
+  .nav .flex-column{
+    margin-top: 15px;
+  }
+  .sidebar-toggle{
+    margin-right: 10px !important;
+  }
+}

Employee_Managment_App/src/App.tsx

@@ -140,6 +140,13 @@ function App() {
           onSearch={(q) => console.log('Search:', q)}
           onMarkRead={handleMarkRead}
           onMarkAllRead={handleMarkAllRead}
+          onOpenSidebar={() => {
+            if (isDesktop) {
+              setSidebarCollapsed(false);
+            } else {
+              setMobileSidebarOpen(true);
+            }
+          }}
         />
 
         {/* Syncfusion Sidebar */}
@@ -167,59 +174,39 @@ function App() {
               <div className="title">{collapsed ? 'HR' : 'HR Portal'}</div>
               <button
                 type="button"
-                className="sidebar-toggle"
+                className="sidebar-toggle e-icons e-menu"
                 aria-label={collapsed ? 'Expand menu' : 'Collapse menu'}
                 title={collapsed ? 'Expand' : 'Collapse'}
                 onClick={isDesktop ? toggleDesktopSidebar : toggleMobileSidebar}
               >
-                {/* menu icon */}
-                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fill="currentColor" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" />
-                </svg>
               </button>
             </div>
 
             <ul className="nav flex-column">
               <li className="nav-item">
                 <NavLink className="nav-link" to="/" end>
-                  <span className="nav-icon" aria-hidden="true">
-                    {/* user/profile */}
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                      <path fill="currentColor" d="M12 12a5 5 0 1 0-5-5a5 5 0 0 0 5 5zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z" />
-                    </svg>
+                  <span className="nav-icon e-icons e-user" aria-hidden="true">
                   </span>
                   {!collapsed && <span className="nav-text">My Profile</span>}
                 </NavLink>
               </li>
               <li className="nav-item">
                 <NavLink className="nav-link" to="/organization">
-                  <span className="nav-icon" aria-hidden="true">
-                    {/* organization/people */}
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                      <path fill="currentColor" d="M16 11a4 4 0 1 0-3.465-2H11V7H8V5H4v2H1v3h3v2h3v2h3v2h3.535A4 4 0 1 0 16 11zM6 7h2v2H6zm10-2a2 2 0 1 1 0 4a2 2 0 0 1 0-4zm0 10a2 2 0 1 1 0 4a2 2 0 0 1 0-4z" />
-                    </svg>
+                  <span className="nav-icon e-icons e-xml-mapping" aria-hidden="true">
                   </span>
                   {!collapsed && <span className="nav-text">Organization</span>}
                 </NavLink>
               </li>
               <li className="nav-item">
                 <NavLink className="nav-link" to="/policies">
-                  <span className="nav-icon" aria-hidden="true">
-                    {/* policy/document */}
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                      <path fill="currentColor" d="M6 2h9l5 5v15H6zM8 4v16h10V9h-5V4zm2 7h6v2h-6zm0 4h6v2h-6z" />
-                    </svg>
+                  <span className="nav-icon e-icons e-file-format" aria-hidden="true">
                   </span>
                   {!collapsed && <span className="nav-text">Policies</span>}
                 </NavLink>
               </li>
               <li className="nav-item">
                 <NavLink className="nav-link" to="/achievements">
-                  <span className="nav-icon" aria-hidden="true">
-                    {/* trophy */}
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                      <path fill="currentColor" d="M17 3H7v4a5 5 0 0 0 4 4.9V14H8v2h8v-2h-3v-2.1A5 5 0 0 0 17 7zM7 7V5h10v2a3 3 0 0 1-6 0H9a3 3 0 0 1-2 3z" />
-                    </svg>
+                  <span className="nav-icon e-icons e-activities" aria-hidden="true">
                   </span>
                   {!collapsed && <span className="nav-text">Achievements</span>}
                 </NavLink>

Employee_Managment_App/src/components/Achievements.tsx

@@ -272,7 +272,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
           <div className="lb-sections">
             <section className="lb-section">
               <header className="lb-header bg-r-overall">
-                <div className="lb-header-icon icon-overall e-icons e-user" aria-hidden>
+                <div className="lb-header-icon icon-overall e-icons e-people" aria-hidden>
                 </div>
                 <div className="lb-header-text">
                   <div className="lb-title">Overall</div>

Employee_Managment_App/src/components/Announcement.css

@@ -146,10 +146,14 @@
   position: relative;
 }
 .annc-panel-item.is-unread {
+  margin-bottom: 5px;
+  padding: 6px;
   background: #f0fdf9;
   border-color: #d1fae5;
 }
 .annc-panel-item.is-read {
+  margin-bottom: 5px;
+  padding: 6px;
   opacity: 0.75;
 }
 .annc-panel-item:hover {

Employee_Managment_App/src/components/Announcement.tsx

@@ -62,11 +62,34 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
   React.useEffect(() => {
     const handleDocClick = (ev: MouseEvent) => {
       if (!open) return;
-      if (panelRef.current && !panelRef.current.contains(ev.target as Node)) onClose();
+
+      const target = ev.target as Node;
+
+      // If detail dialog is open, ignore clicks inside dialog or its overlay
+      if (detailOpen) {
+        const dialogEl = document.querySelector('.e-annc-detail-dialog') as HTMLElement | null;
+        const overlayEl = document.querySelector('.e-dlg-overlay') as HTMLElement | null;
+
+        const clickedInsideDialog =
+          (dialogEl && dialogEl.contains(target)) ||
+          (overlayEl && overlayEl.contains(target));
+
+        if (clickedInsideDialog) {
+          // Let the dialog handle its own close via overlayClick; don't close the aside
+          return;
+        }
+      }
+
+      // Close aside only when clicking outside both the aside and (if open) the dialog
+      if (panelRef.current && !panelRef.current.contains(target)) {
+        onClose();
+      }
     };
-    document.addEventListener('click', handleDocClick);
-    return () => document.removeEventListener('click', handleDocClick);
-  }, [open, onClose]);
+
+    // Use capture to catch the click before Syncfusion might stop propagation
+    document.addEventListener('click', handleDocClick, true);
+    return () => document.removeEventListener('click', handleDocClick, true);
+  }, [open, onClose, detailOpen]);
 
   const setActiveTab = (t: 'notifications' | 'announcements') => {
     setTab(t);

Employee_Managment_App/src/components/AnnouncementDialog.css

@@ -79,9 +79,9 @@
 }
 
 .annc-dlg-details {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(180px, 1fr));
-  gap: 12px 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 @media (max-width: 920px) {
   .annc-dlg-details { grid-template-columns: repeat(2, minmax(180px, 1fr)); }