From 43840dacaf6037c4afd26eed9b6a7470db7ae59d Mon Sep 17 00:00:00 2001
From: sawankshrma <thesawan47@gmail.com>
Date: Tue, 17 Feb 2026 01:52:00 +0530
Subject: [PATCH] feat: move activity modal trigger to info icon

---
 src/app/app.module.ts                         |  2 ++
 .../circular-heatmap.component.css            | 27 ++++++++++++++-----
 .../circular-heatmap.component.html           | 10 ++++++-
 src/styles.css                                |  6 ++++-
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4210172c..18e98db9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -30,6 +30,7 @@ import { ProgressSliderComponent } from './component/progress-slider/progress-sl
 import { KpiComponent } from './component/kpi/kpi.component';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-groups-editor.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -65,6 +66,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
     FormsModule,
     HttpClientModule,
     TeamsGroupsEditorModule,
+    MatTooltipModule,
   ],
   providers: [
     LoaderService,
diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.css b/src/app/pages/circular-heatmap/circular-heatmap.component.css
index b31aac0b..6f721dda 100644
--- a/src/app/pages/circular-heatmap/circular-heatmap.component.css
+++ b/src/app/pages/circular-heatmap/circular-heatmap.component.css
@@ -8,12 +8,27 @@
   shape-rendering: crispEdges;
 }
 
-.title-button {
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-weight: 700;
+.title-text {
+  font-weight: 500;
+  margin-right: 5px;
+}
+
+.info-button {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  opacity: 0.6;
+}
+.compact-tooltip {
+  transform: translateY(-20px) !important;
+}
+
+.info-icon {
+  font-size: 18px;
+}
+
+.info-button:hover {
+  opacity: 1;
 }
 
 .right-panel {
diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.html b/src/app/pages/circular-heatmap/circular-heatmap.component.html
index 2d47efda..6e970187 100644
--- a/src/app/pages/circular-heatmap/circular-heatmap.component.html
+++ b/src/app/pages/circular-heatmap/circular-heatmap.component.html
@@ -73,8 +73,16 @@ <h2>Nothing to show</h2>
               (closed)="onPanelClosed(activity)">
               <mat-expansion-panel-header>
                 <mat-panel-title>
-                  <button class="title-button" (click)="openActivityDetails(activity['uuid'])">
+                  <span class="title-text">
                     {{ activity['name'] }}
+                  </span>
+                  <button
+                    mat-icon-button
+                    class="info-button"
+                    matTooltip="Open activity description"
+                    matTooltipClass="compact-tooltip"
+                    (click)="openActivityDetails(activity['uuid']); $event.stopPropagation()">
+                    <mat-icon class="info-icon">info</mat-icon>
                   </button>
                 </mat-panel-title>
               </mat-expansion-panel-header>
diff --git a/src/styles.css b/src/styles.css
index 77080f8a..fa4c6eb5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -58,4 +58,8 @@ h1, h2, h3 {
 
 .usage-dimensions img {
     max-width: 40rem;
-}
\ No newline at end of file
+}
+
+.compact-tooltip {
+  transform: translateY(-10px) !important;
+}