Width of #content varies, so #left-pane children also vary

Author: ysangkok

datafiles/static/hackage.css

@@ -315,12 +315,30 @@ table.properties td, table.properties th {
     /* keep this in sync with #left-pane children */
     width: 60vw;
   }
+
+  #left-pane > * {
+      /*   (100% - (width of properties)) * (width of #content) - gap
+       * = (100% - 40%                  ) * 60vw                - 2em
+       * = 60%                            * 60vw                - 2em
+       * = 36vw - 2em
+       */
+      width: calc(36vw - 2em);
+  }
 }
 
 @media only screen and (min-width: 1280px) and (max-width: 1919px) {
   #content {
     width: 65vw;
   }
+
+  #left-pane > * {
+      /*   (100% - (width of properties)) * (width of #content) - gap
+       * = (100% - 40%                  ) * 65vw                - 2em
+       * = 60%                            * 65vw                - 2em
+       * = 39vw - 2em
+       */
+      width: calc(39vw - 2em);
+  }
 }
 
 @media only screen and (min-width: 1280px) {
@@ -345,6 +363,15 @@ table.properties td, table.properties th {
   #content {
     width: 75vw;
   }
+
+  #left-pane > * {
+      /*   (100% - (width of properties)) * (width of #content) - gap
+       * = (100% - 40%                  ) * 75vw                - 2em
+       * = 60%                            * 75vw                - 2em
+       * = 45vw - 2em
+       */
+      width: calc(45vw - 2em);
+  }
 }
 
 @media only screen and (min-width: 950px) {
@@ -376,23 +403,6 @@ table.properties td, table.properties th {
       margin-bottom: 2em;
   }
 
-  #left-pane > * {
-      /*   (100% - (width of properties)) * (width of #content) - gap
-       * = (100% - 40%                  ) * 60vw                - 2em
-       * = 60%                            * 60vw                - 2em
-       * = 36vw - 2em
-       */
-      width: calc(36vw - 2em);
-  }
-
-  #left-pane > #modules {
-      /* This overrides the width in the previous block. We want a long module
-       * name to make the left-pane wide, so that it will push down
-       * #properties.
-       */
-      width: fit-content;
-  }
-
   #flex-container {
       display: flex;
       flex-wrap: wrap;
@@ -406,6 +416,10 @@ table.properties td, table.properties th {
     width: 88vw;
   }
 
+  #left-pane > * {
+      width: fit-content;
+  }
+
   #page-header {
     text-align: center;
     padding: 6px 0 4px 0;
@@ -461,6 +475,14 @@ table.properties td, table.properties th {
 
 /* @group Page Structure */
 
+#left-pane > #modules {
+    /* This overrides the width in width-dependent blocks. We want a long
+     * module name to make the left-pane wide, so that it will push down
+     * #properties.
+     */
+    width: fit-content;
+}
+
 #content {
   margin: 0 auto;
   padding: 0;