Styles better

frontend/src/styles/components/_diagnostics.scss

@@ -18,7 +18,7 @@
   }
 
   h3 {
-    margin: 0 0 $spacing-md 0;
+    margin: 0;
     color: $color-primary;
     font-size: 1.1rem;
     font-weight: 600;
@@ -32,6 +32,7 @@
   border: 1px solid #e5e7eb;
   border-radius: $border-radius;
   background-color: $color-container;
+  margin: 16px 0px;
 
   @media (prefers-color-scheme: dark) {
     background-color: $color-container-dark;
@@ -100,7 +101,7 @@
   }
 }
 
-.room-chart {
+.chart {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -108,6 +109,7 @@
   border: 1px solid #e5e7eb;
   border-radius: $border-radius;
   background-color: $color-container;
+  width: 100%;
 
   @media (prefers-color-scheme: dark) {
     background-color: $color-container-dark;
@@ -115,17 +117,17 @@
   }
 }
 
-.room-bar-item {
+.bar-item {
   display: flex;
   flex-direction: column;
   gap: 4px;
 
-  .room-header {
+  .diagnostics-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    .room-label {
+    .diagnostics-label {
       font-weight: 600;
       font-size: 14px;
       color: $color-text;
@@ -136,14 +138,14 @@
       }
     }
 
-    .room-count {
+    .diagnostics-count {
       font-size: 12px;
       color: $color-muted;
       font-weight: 500;
     }
   }
 
-  .room-bar-container {
+  .bar-container {
     width: 100%;
     height: 24px;
     background-color: #e5e7eb;
@@ -154,10 +156,60 @@
       background-color: #555;
     }
 
-    .room-bar {
+    .bar {
       height: 100%;
       background-color: $color-primary;
       transition: width 0.3s ease;
     }
   }
 }
+
+.diagnostics-row {
+  display: flex;
+  gap: 24px;              
+  align-items: flex-start;
+  flex-wrap: wrap;        
+}
+
+.diagnostics-column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 48%;             
+  min-width: 280px;       
+}
+
+.open-tickets{
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  padding: 0 1rem;
+  box-sizing: border-box;
+  min-height: 60px;
+
+  .left {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    
+    h2 {
+      margin: 0;
+      white-space: nowrap;
+    }
+  }
+  
+  .center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.home {
+  .ticket_count {
+    font-size: xxx-large;
+    height: 115px;
+  }
+}

frontend/src/styles/components/_tickets.scss

@@ -75,4 +75,6 @@
   border-radius: 10px;
   height: 50px;
   width: 250px;
+  margin: 0;
+  font-size: xx-large;
 }