Merge pull request #5042 from OneCommunityGlobal/vinay_k_radar_chart

Vinay K Radar Chart

Author: one-community

src/components/HGNSkillsDashboard/SkillsProfilePage/components/RadarChart.jsx

@@ -310,7 +310,7 @@ function RadarChart({ profileData, compact = true, onSkillsDataReady }) {
             },
             weight: '500',
           },
-          color: darkMode ? '#e6e6e6' : compact ? '#555' : '#333',
+          color: darkMode ? '#e2e8f0' : compact ? '#555' : '#333',
           padding: compact ? 10 : 15,
           callback: function(value) {
             if (window.innerWidth < 600 && value.length > 15) {

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/LeftSection.module.css

@@ -24,6 +24,10 @@
   color: #1f2937 !important;
   text-shadow: none !important;
   filter: none !important;
+  overflow-wrap: break-word;
+  word-break: break-all;
+  max-width: 100%;
+  hyphens: auto;
 }
 
 /* Job title */
@@ -38,9 +42,10 @@
 @media (width <= 768px) {
   .leftSection {
     width: 100%;
-    padding: 16px 0 12px;
-    flex-direction: row;
+    padding: 16px 10px 12px;
+    flex-flow: row wrap;
     gap: 20px;
+    justify-content: center;
   }
 
   .userName,
@@ -49,6 +54,27 @@
   }
 }
 
+@media (width <= 480px) {
+  .leftSection {
+    flex-direction: column;
+    padding: 12px 8px;
+    gap: 10px;
+  }
+
+  .userName {
+    font-size: 1.2rem;
+  }
+
+  .jobTitle {
+    font-size: 0.9rem;
+  }
+
+  .profilePic {
+    width: 80px;
+    height: 80px;
+  }
+}
+
 :global(.dark-mode) .leftSection {
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   border-color: #303030;

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/RadarChart.module.css

@@ -4,10 +4,14 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 10px 0;
-  margin: 0 auto;
-  max-width: 720px;
-  width: 100%;
+  padding: 18px;
+  background: linear-gradient(145deg, #fff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
+  border: 1px solid rgb(62 160 203 / 10%);
+  min-height: 420px;
+  max-height: 500px;
+  position: relative;
 }
 
 .radarChart.compact {
@@ -43,7 +47,7 @@
 
 .chartContainer {
   width: 100%;
-  max-width: clamp(300px, 42vw, 520px); /* reduced overall footprint */
+  max-width: clamp(280px, 38vw, 460px);
   aspect-ratio: 1 / 1;
   height: auto;
   position: relative;
@@ -132,8 +136,50 @@
 }
 
 @media (width <= 480px) {
-  .radarChart canvas {
-    max-height: 380px;
+  .radarChart {
+    padding: 8px;
+    min-height: 320px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .chartTitle h4 {
+    font-size: 16px;
+  }
+
+  .chartTitle p {
+    font-size: 11px;
+  }
+
+  .chartContainer {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .chartLegend {
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  .legendItem {
+    font-size: 11px;
+  }
+
+  .legendColor {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+@media (width <= 360px) {
+  .radarChart {
+    padding: 5px;
+    min-height: 280px;
+  }
+
+  .chartTitle h4 {
+    font-size: 14px;
   }
 }
 
@@ -144,7 +190,7 @@
   }
 }
 
-/* Dark theme support (optional) */
+/* Dark theme support */
 .dark {
   background: #1f1f1f;
   border-color: #2a2a2a;
@@ -168,3 +214,28 @@
   border-color: rgb(62 160 203 / 30%);
   box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
 }
+
+:global(.dark-mode) .chartTitle h4 {
+  color: #63b3ed;
+}
+
+:global(.dark-mode) .chartTitle p {
+  color: #a0aec0;
+}
+
+:global(.dark-mode) .legendItem {
+  color: #e2e8f0;
+}
+
+:global(.dark-mode) .loadingSpinner {
+  border-color: rgb(62 160 203 / 30%);
+  border-left-color: #63b3ed;
+}
+
+:global(.dark-mode) .errorState h4 {
+  color: #ff6b6b;
+}
+
+:global(.dark-mode) .errorState p {
+  color: #a0aec0;
+}

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/RightSection.module.css

@@ -32,9 +32,28 @@ h3 {
 
 @media (width <= 768px) {
   .rightSection {
-    padding: 0 0 10px;
+    width: 100%;
+    padding: 0;
+    overflow-x: hidden;
+  }
+
+  .skillsAndChart {
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
   }
   .skillsAndChart > *:first-child { flex: 0 0 auto; }
+
+  .skillsAndChart > *:last-child {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+@media (width <= 480px) {
+  .skillsAndChart {
+    gap: 12px;
+  }
 }
 
 :global(.dark-mode) h3 {

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/Skills.module.css

@@ -48,14 +48,33 @@
 @media (width <= 768px) {
   .skills {
     width: 100%;
-    flex-direction: column;
+    flex-flow: row wrap;
     align-items: center;
+    justify-content: center;
+    gap: 8px;
   }
 
   .skills button {
-    width: 100%;
-    max-width: 80%;
+    width: auto;
+    max-width: none;
     font-size: 14px;
+    padding: 8px 12px;
+  }
+  
+  .skills h3 {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+@media (width <= 480px) {
+  .skills {
+    gap: 6px;
+  }
+  
+  .skills button {
+    font-size: 13px;
+    padding: 6px 10px;
   }
 }
 

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/UserSkillsProfile.module.css

@@ -54,6 +54,23 @@
     display: flex;
     flex-direction: column;
     padding: 18px 16px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  .userProfileHome {
+    padding: 10px;
+    overflow-x: hidden;
+  }
+}
+
+@media (width <= 480px) {
+  .dashboardContainer {
+    padding: 12px 10px;
+  }
+  
+  .userProfileHome {
+    padding: 5px;
   }
 }
 

vite.config.js

@@ -41,7 +41,13 @@ export default defineConfig(({ mode }) => {
       }),
     ],
     optimizeDeps: {
-      include: ['react-popper', 'react-datepicker', 'react-tooltip', 'react-bootstrap'],
+      include: [
+        'react-popper',
+        'react-datepicker',
+        'react-tooltip',
+        'react-bootstrap',
+        'libphonenumber-js/max',
+      ],
       force: true, // force re-bundle after cache issues; set to false once deps load
     },
   };

vitest.config.js

@@ -18,5 +18,8 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: [resolve(__dirname, 'src/setupTests.js')],
+    deps: {
+      inline: ['libphonenumber-js'],
+    },
   },
 });