MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 6: / Line 6: @@
 }
-/* Default table styling */
+/* Base table styling */
 .eras-table {
      border-collapse: collapse;
@@ Line 12: / Line 12: @@
 }
-/* Ensure header spans full width at all times */
+/* Ensure header spans full width */
 .eras-table th {
+    display: block;
      width: 100%;
-     display: block;
+     text-align: center;
 }
@@ Line 23: / Line 24: @@
 }
-/* Medium screens and below - switch to 3x2 layout */
+/* Medium screens and below - switch to 3x2 layout for content */
 @media screen and (max-width: 800px) {
      .eras-table {
-         display: table; /* Keep table structure */
+         display: block;
+    }
+    .eras-table thead {
+        display: block;
+    }
+    .eras-table th {
+        display: block;
+        width: 100%;
      }
      .eras-table tbody {
-         display: grid;
+         display: flex;
-         grid-template-columns: repeat(3, 1fr); /* 3 columns */
+         flex-wrap: wrap;
-        grid-template-rows: repeat(2, auto); /* 2 rows */
-        gap: 10px;
      }
      .eras-table tr {
-         display: contents; /* Allows cells to flow into grid */
+         display: contents;
      }
      .eras-table td {
-         display: block;
+         flex: 0 0 33.333%;
-         width: 100%;
+        box-sizing: border-box;
+         padding: 10px;
      }
 }