Updated main groups classroom UX

ogWebconsole/src/app/components/groups/groups.component.css

@@ -218,19 +218,38 @@ mat-card {
 .classroom-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-  justify-content: flex-start;
+  gap: 16px; /* Espacio entre elementos */
+  justify-content: flex-start; /* Alinea los elementos a la izquierda */
 }
 
 .classroom-item {
-  flex: 0 1 calc(16.66% - 16px);
-  max-width: calc(16.66% - 16px);
-  box-sizing: border-box;
+  flex: 0 1 calc(16.66% - 16px); /* 6 columnas (para pantallas grandes) */
+  box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho */
 }
 
 .classroom-card {
-  width: 100%;
-  text-align: center;
+  width: 100%; /* Asegura que el card ocupe todo el espacio del item */
+}
+
+/* Pantallas medianas: 4 columnas */
+@media (max-width: 1024px) {
+  .classroom-item {
+    flex: 0 1 calc(25% - 16px); /* 4 columnas */
+  }
+}
+
+/* Pantallas pequeñas: 2 columnas */
+@media (max-width: 768px) {
+  .classroom-item {
+    flex: 0 1 calc(50% - 16px); /* 2 columnas */
+  }
+}
+
+/* Pantallas muy pequeñas: 1 columna */
+@media (max-width: 480px) {
+  .classroom-item {
+    flex: 0 1 100%; /* 1 columna */
+  }
 }
 
 .client-text {

ogWebconsole/src/app/components/groups/groups.component.html

@@ -139,8 +139,6 @@
           </div>
         </mat-card-content>
       </mat-card>
-
-
     </div>
   </mat-tab>