Fix language bar hover details

src/renderer/src/assets/main.css

@@ -275,6 +275,7 @@ code {
   width: 100%;
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
 }
 
 .logout-button {
@@ -297,26 +298,70 @@ code {
   background-color: transparent; 
 }
 
-.barr{
-  background: none;
-  color: #fff;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  width: 13vw;
-  background-color: yellow;
-  height: 12px;
-  border-radius: 9999px;
+.language-bars {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease;
-  margin-left: 2px;
+  align-items: stretch;
+  gap: 3px;
+  width: 100%;
+  min-width: 0;
+  height: 12px;
   -webkit-app-region: no-drag;
 }
 
-.barr:hover {
-  opacity: 0.8; 
+.language-bar-segment {
+  position: relative;
+  min-width: 18px;
+  height: 12px;
+  border-radius: 9999px;
+  cursor: default;
+  outline: none;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.language-bar-segment:hover,
+.language-bar-segment:focus-visible {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
+}
+
+.language-tooltip {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translateX(-50%) translateY(4px);
+  z-index: 10;
+  pointer-events: none;
+  white-space: nowrap;
+  border-radius: 6px;
+  background: #f6f8fa;
+  color: #161b22;
+  padding: 4px 7px;
+  font-size: 11px;
+  line-height: 1;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.language-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: #f6f8fa;
+}
+
+.language-bar-segment:hover .language-tooltip,
+.language-bar-segment:focus-visible .language-tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
 }
 
 ::-webkit-scrollbar {
@@ -589,4 +634,4 @@ code {
 @keyframes settingsRotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(180deg); }
-}
+}

src/renderer/src/components/GitHubStatsWidget.tsx

@@ -164,6 +164,10 @@ function GitHubStatsWidget({
     ? Object.entries(languages)
         .sort((a, b) => b[1] - a[1])
         .slice(0, 4)
+        .map(([name, count]) => ({
+          name,
+          percentage: totalLangCount ? (count / totalLangCount) * 100 : 0
+        }))
     : []
 
   // Filter contribWeeks by selected duration
@@ -187,20 +191,23 @@ function GitHubStatsWidget({
       {filteredWeeks && <ContributionGrid weeks={filteredWeeks} />}
       {topLanguages.length > 0 && (
         <div className="language-bar-container">
-          <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}>
-            {topLanguages.map(([item, count]) => {
-              const percentage = ((count / totalLangCount) * 100).toFixed(1)
-              // const width = Math.max(40, Math.min(80, (parseFloat(percentage) / 100) * 200))
-              return (
-            <button
-            key={item}
-            onClick={onLogout}
-            className="barr"
-            style={{backgroundColor: getLangColor(item),}}
-            title={`${item}: ${percentage}%`}
-          >
-              </button>
-          )})}
+          <div className="language-bars" aria-label="Top languages">
+            {topLanguages.map(({ name, percentage }) => (
+              <div
+                key={name}
+                className="language-bar-segment"
+                style={{
+                  backgroundColor: getLangColor(name),
+                  flexGrow: Math.max(percentage, 6)
+                }}
+                title={`${name}: ${percentage.toFixed(1)}%`}
+                tabIndex={0}
+              >
+                <span className="language-tooltip">
+                  {name}: {percentage.toFixed(1)}%
+                </span>
+              </div>
+            ))}
           </div>
           <button
             onClick={onLogout}