Change IssueDashboard css to have styles specific to Issues table

Author: Venkataramanan Venkateswaran

src/components/BMDashboard/Issues/IssueDashboard.css

@@ -1,4 +1,4 @@
-.table th {
+.issues-table-responsive .text-end {
   font-weight: 500;
   color: #6c757d;
   border-bottom-width: 1px;
@@ -49,7 +49,7 @@
 }
 
 /* Fixed table responsiveness */
-.table-responsive {
+.issues-table-responsive {
   overflow-x: visible !important; /* Prevent horizontal scrollbar */
   overflow-y: visible !important; /* Ensure dropdowns aren't clipped */
   position: relative;
@@ -65,8 +65,8 @@ td.text-end {
   white-space: nowrap;
   width: 1%;
 }
-td,
-th {
+.issues-table-responsive td,
+.issues-table-responsive th {
   text-align: left !important;
 }
 
@@ -76,7 +76,7 @@ th {
 }
 
 /* Ensure table doesn't exceed container width */
-.table {
+.issues-table-responsive {
   width: 100%;
   table-layout: fixed;
 }

src/components/BMDashboard/Issues/IssueDashboard.jsx

@@ -106,7 +106,7 @@ export default function IssueDashboard() {
         </Col>
       </Row>
 
-      <div className="table-responsive">
+      <div className="issues-table-responsive">
         <Table hover className={`mb-0 ${darkMode ? 'table-dark' : ''}`}>
           <thead className={darkMode ? 'table-dark' : 'table-light'}>
             <tr>