MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,018: / Line 1,018: @@
 /* =========================================================
-    OOO BROWSER (Unified, Reusable Layout)
+    OOO BROWSER (Unified layout)
-   Works for Buildings / Vehicles / Production / Ore, etc.
     ========================================================= */
 .ooo-browser {
    display: flex;
-   gap: 16px;               /* small gap between list and panel */
+   gap: 20px; /* small spacing between list and panel */
    align-items: flex-start;
    margin-top: 14px;
+  flex-wrap: wrap; /* allows responsive stacking */
 }
 /* LEFT LIST */
 .ooo-browser__listwrap {
+  flex: 0 0 auto;
    position: sticky;
    top: 90px;
    align-self: flex-start;
-  height: max-content;
 }
 .ooo-browser__list {
-   width: 240px;           /* fixed width for consistent list */
+   width: 240px;
    min-width: 240px;
    flex-shrink: 0;
@@ Line 1,044: / Line 1,044: @@
 /* RIGHT PANEL */
+.ooo-browser__panelwrap {
+  flex: 1 1 auto;
+  min-width: 300px; /* prevents collapsing too small */
+}
 .ooo-browser__panel {
-   flex: 1;
+   width: 100%;
-  min-width: 0;            /* ensures panel shrinks if window narrows */
    border-left: 1px solid var(--ooo-border);
-   padding-left: 12px;      /* small spacing from list */
+   padding-left: 16px;
    box-sizing: border-box;
 }
-/* INFOBOX */
+/* INFOBOX inside panel */
 .ooo-browser__panel .ooo-infobox {
-   width: 320px;
+   width: auto;
    max-width: 100%;
-  margin: 0;
-  float: none;
    box-sizing: border-box;
 }
-/* Prevent tables and long lines from breaking layout */
+/* Prevent tables inside infobox from breaking layout */
 .ooo-browser__panel .ooo-infobox table {
    width: 100%;
    table-layout: fixed;
 }
 .ooo-browser__panel .ooo-infobox td,
 .ooo-browser__panel .ooo-infobox th {
@@ Line 1,111: / Line 1,114: @@
    display: none;
 }
 .ooo-browser__info.is-active {
    display: block;
 }
-/* PANEL CONTENT LAYOUT */
+/* PANEL CONTENT */
 .ooo-item-top {
    display: flex;
-   gap: 12px;             /* spacing between infobox and description */
+   gap: 12px; /* tiny spacing between infobox and description */
    align-items: flex-start;
 }
 .ooo-item-top .ooo-infobox {
-   flex-shrink: 0;         /* prevents infobox from shrinking */
+   flex-shrink: 0;
 }
 .ooo-item-description {
    flex: 1;
    line-height: 1.6;
 }
 .ooo-item-body {
-   margin-top: 16px;
+   margin-top: 20px;
-   padding-top: 12px;
+   padding-top: 18px;
    border-top: 1px solid var(--ooo-border);
    max-width: 540px;
@@ Line 1,147: / Line 1,154: @@
 /* MOBILE / NARROW SCREENS */
 @media (max-width: 1000px) {
    .ooo-browser {
      flex-direction: column;
-     gap: 12px;
+     gap: 16px;
    }
-   .ooo-browser__list {
+   .ooo-browser__listwrap,
+  .ooo-browser__panelwrap {
      width: 100%;
-    min-width: 0;
    }
    .ooo-browser__panel {
      border-left: none;
      padding-left: 0;
      border-top: 1px solid var(--ooo-border);
-     padding-top: 12px;
+     padding-top: 16px;
    }
    .ooo-item-top {
      flex-direction: column;
-  }
-  .ooo-browser__panel .ooo-infobox {
-    width: 100%;
    }
 }