MediaWiki:Common.css: Difference between revisions

Newer edit →

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
-/* Container for left + right sections */
+/* Main page layout */
 .mp-container {
    display: flex;
-  justify-content: space-between;
    align-items: flex-start;
-   gap: 20px; /* space between main and sidebar */
+   gap: 20px;
+  /* keep everything inside the wiki content width */
+  box-sizing: border-box;
 }
-/* Left content */
+/* Left column fills remaining space */
 .mp-left {
-   flex: 1; /* take up remaining space */
+   flex: 1 1 auto;
+  min-width: 0; /* prevents weird overflow with long content */
 }
-/* Sidebar on right */
+/* Right sidebar */
 .mp-right {
-   width: 250px; /* adjust sidebar width */
+   flex: 0 0 320px;         /* fixed sidebar width on desktop */
+  max-width: 100%;
+  box-sizing: border-box;
+  border-left: 1px solid #e0e0e0; /* subtle divider */
+  padding-left: 16px;
+  margin-left: 4px;
+}
+/* Make cards/embed inside the sidebar not hang off the edge */
+.mp-right > * {
+  width: 100%;
+}
+/* Responsive: stack on narrow screens */
+@media (max-width: 900px) {
+  .mp-container {
+    flex-direction: column;
+  }
+  .mp-right {
+    flex: none;
+    width: 100%;
+    border-left: 0;
+    border-top: 1px solid #e0e0e0;
+    padding-left: 0;
+    padding-top: 12px;
+    margin-left: 0;
+    margin-top: 12px;
+  }
 }