fix(overall app): resolve button, inputs and mat-panel broken css issue

Author: sawankshrma

src/app/component/add-evidence-modal/add-evidence-modal.component.html

@@ -24,13 +24,9 @@ <h3>Evidence Details</h3>
     <mat-error *ngIf="titleError" class="field-error">Title is required.</mat-error>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>Description</mat-label>
-      <textarea
-        matInput
-        [(ngModel)]="description"
-        rows="4"
-        placeholder="Describe the evidence in detail..."></textarea>
+      <textarea matInput [(ngModel)]="description" rows="4" placeholder="Description"></textarea>
     </mat-form-field>
+
     <mat-form-field appearance="outline">
       <mat-label>Reviewer</mat-label>
       <input matInput [(ngModel)]="reviewer" placeholder="e.g. Jane Doe" />

src/app/component/report-config-modal/report-config-modal.component.css

@@ -68,10 +68,18 @@
     color: var(--text-secondary);
 }
 
-.checkbox-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 8px;
+:host {
+    .checkbox-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 1px;
+    }
+
+    .references-section {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+        gap: 1px;
+    }
 }
 
 .search-field {

src/app/component/team-selector/team-selector.component.css

@@ -36,8 +36,8 @@
     white-space: nowrap;
 }
 
-.checkbox-grid {
+:host ::ng-deep .checkbox-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 8px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 10px)) !important;
+    gap: 2px !important;
 }

src/app/pages/circular-heatmap/circular-heatmap.component.css

@@ -14,10 +14,10 @@
 }
 
 .info-button {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
+  width: 20px !important;
+  height: 20px !important;
   opacity: 0.6;
+  padding: 0px !important;
 }
 .compact-tooltip {
   transform: translateY(-20px) !important;
@@ -204,6 +204,36 @@ button.filter-toggle {
   align-items: center;
 }
 
+/* Card padding */
+:host ::ng-deep .activity-card .mat-mdc-card-content {
+  padding: 0 16px 16px 0;
+}
+
+:host ::ng-deep .activity-card {
+  padding: 16px;
+  margin-top: 20px;
+}
+
+/* Expansion panel spacing */
+:host ::ng-deep .activity-card mat-expansion-panel {
+  margin-bottom: 8px;
+  border-radius: 8px !important;
+}
+
+:host ::ng-deep .activity-card .mat-expansion-panel-header {
+  height: 48px;
+  padding: 0 16px;
+}
+
+mat-card-title-group {
+  margin-bottom: 15px;
+}
+
+:host ::ng-deep .activity-card .mat-expansion-panel-body li {
+  justify-content: center;
+  align-items: center;
+}
+
 @media only screen and (max-width: 750px) {
   .heatmapClass {
       grid-template-rows: auto auto 1fr auto;
@@ -235,4 +265,8 @@ button.filter-toggle {
     width: 100%;
   }
 
+}
+
+.filter-label {
+  margin-top: 20px;
 }

src/app/pages/circular-heatmap/circular-heatmap.component.html

@@ -43,7 +43,7 @@ <h2>Nothing to show</h2>
                 {{ group.key }}
               </mat-chip-option>
             </mat-chip-listbox>
-
+            <mat-divider></mat-divider>
             <label class="filter-label">Team Filter</label>
             <mat-chip-listbox selectable multiple>
               <mat-chip-option
@@ -54,6 +54,7 @@ <h2>Nothing to show</h2>
                 {{ team.key }}
               </mat-chip-option>
             </mat-chip-listbox>
+            <mat-divider></mat-divider>
           </div>
         </div>
         <mat-card appearance="outlined" class="activity-card" *ngIf="showActivityCard">

src/app/pages/settings/settings.component.css

@@ -248,3 +248,6 @@ mat-icon.mandatory-icon {
   margin-left: 0.5rem;
   font-weight: 500;
 }
+.progress-definitions-section, .settings-about-section {
+  padding: 10px 0 0 20px;
+}

src/custom-theme.scss

@@ -437,4 +437,19 @@ svg .cursors #hover {
 svg .cursors #selected {
   stroke: var(--heatmap-cursor-selected, black);
   stroke-width: 4px;
+}
+
+mat-expansion-panel-header {
+  height: 48px !important;
+  padding: 0 16px;
+}
+
+.mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
+  padding-top: 16px;
+  padding-bottom: 8px;
+  min-height: 56px;
+}
+
+.mat-mdc-button, .mdc-button{
+  letter-spacing: 0.1px;
 }