Improve the responsiveness of the area tables, by using flex instead of tables.

Author: Ivorforce

_extensions/area_table.py

@@ -29,7 +29,7 @@ def transform_github_teams(match: re.Match):
 
 def transform_github_labels(match: re.Match):
     old_value = match.group(1)
-    transformed = f'<code class="docutils literal notranslate"><span class="pre">{old_value}</span></code> (<a href="https://github.com/godotengine/godot/issues?q=is%3Aissue%20state%3Aopen%20label%3A{old_value}">issues</a>, <a href="https://github.com/godotengine/godot/pulls?q=is%3Apr+is%3Aopen+label%3A{old_value}">PRs</a>)'
+    transformed = f'<span style="white-space: nowrap;"><code class="docutils literal notranslate"><span class="pre">{old_value}</span></code> (<a href="https://github.com/godotengine/godot/issues?q=is%3Aissue%20state%3Aopen%20label%3A{old_value}">issues</a>, <a href="https://github.com/godotengine/godot/pulls?q=is%3Apr+is%3Aopen+label%3A{old_value}">PRs</a>)</span>'
     return transformed
 
 
@@ -55,43 +55,35 @@ class TableDirective(Directive):
 
     def run(self):
         # Create a table node with the parsed header and data
-        table = nodes.table()
+        table = nodes.container()
         table.setdefault('classes', []).append("gdarea-table")
-        tgroup = nodes.tgroup(cols=2)
-        table += tgroup
-
-        # Set column specifications
-        tgroup += nodes.colspec(colwidth=2)
-        tgroup += nodes.colspec(colwidth=5)
 
         # Create and add the table body
-        tbody = nodes.tbody()
-        tgroup += tbody
         for column_title in area_table_rows:
             row_text = self.options.get(column_title.lower().replace(" ", "_"), '')
             if not row_text:
                 continue
 
-            body_row = nodes.row()
+            row = nodes.container()
 
-            entry = nodes.entry()
+            entry = nodes.container()
             entry.setdefault('classes', []).append("gdarea-table-header")
             entry += nodes.paragraph(text=column_title)
-            body_row += entry
+            row += entry
 
             row_text = channel_re.sub(transform_channels, row_text)
             row_text = godot_team_re.sub(transform_github_teams, row_text)
             row_text = labels_re.sub(transform_github_labels, row_text)
             row_text = triage_re.sub(transform_github_triage, row_text)
             row_text = lead_re.sub(transform_lead, row_text)
 
-            entry = nodes.entry()
+            entry = nodes.container()
             paragraph = nodes.paragraph()
             paragraph += nodes.raw('', row_text, format='html')
             entry += paragraph
-            body_row += entry
+            row += entry
 
-            tbody += body_row
+            table += row
 
         return [table]
 

_static/css/custom.css

@@ -1866,43 +1866,56 @@ p + .classref-constant {
     background: var(--role-button-background-color);
 }
 
-.rst-content table.docutils.gdarea-table {
+.rst-content div.docutils.gdarea-table {
     background-color: var(--code-background-color);
     border: 0;
     border-left: 6px solid var(--code-border-color);
     padding: 4px 10px;
     width: 100%;
-    table-layout:fixed
+    margin-bottom: 40px;
 }
 
-.rst-content table.docutils.gdarea-table td.gdarea-table-header {
-    padding: 8px;
-    border-right:1px dashed var(--code-border-color);
-    text-align: left;
-    width:25%;
+.rst-content div.docutils.gdarea-table > div {
+    padding: 8px 0 8px 0;
+    background-color: var(--code-background-color) !important;
+    border-bottom: 1px dashed var(--code-border-color);
+    border-collapse:collapse;
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.rst-content table.docutils.gdarea-table td {
-    padding: 8px 0 8px 12px;
-    background-color: var(--code-background-color) !important;
+.rst-content div.docutils.gdarea-table div:last-of-type {
+    border-bottom: 0;
 }
 
-.rst-content table.docutils.gdarea-table td.gdarea-table-header, .rst-content table.docutils.gdarea-table td {
-    border-bottom: 1px dashed var(--code-border-color);
-    border-collapse:collapse
+.rst-content div.docutils.gdarea-table > div > div {
+    padding: 0 0 0 12px;
+    min-width: 20em;
+    flex: 20000 20000 10em;
+    display: flex;
+    align-items: center;
+    min-height: 2em;
 }
 
-.rst-content table.docutils.gdarea-table tr:last-of-type td, .rst-content table.docutils.gdarea-table tr:last-of-type td.gdarea-table-header {
-    border-bottom:0
+.rst-content div.docutils.gdarea-table > div > div.gdarea-table-header {
+    flex: 1 1 10em;
+    min-width: 10em;
+    border-right:1px dashed var(--code-border-color);
+    text-align: left;
 }
 
-.rst-content table.docutils.gdarea-table td.gdarea-table-header > p {
+.rst-content div.docutils.gdarea-table > div > div > p {
+    margin-bottom: 0;
+}
+
+.rst-content div.docutils.gdarea-table > div > div.gdarea-table-header > p {
     font-size: 1rem !important;
     font-weight: bold;
 }
 
 span.team-lead:before {
     content: "⭐️ ";
+    white-space: nowrap;
 }
 
 span.team-lead {

organization/areas.rst

@@ -232,7 +232,7 @@ Apple
 .. gdareatable::
    :communication: #apple
    :github_reviews: @godotengine/ios, @godotengine/macos
-   :github_labels: <gh-label>platform:ios</gh-label>, <gh-label>platform:macos</gh-label>, <gh-label>platform:visionos</gh-label>,
+   :github_labels: <gh-label>platform:ios</gh-label>, <gh-label>platform:macos</gh-label>, <gh-label>platform:visionos</gh-label>
    :maintainers: Bastiaan Olij (@BastiaanOlij), <lead>Pāvels Nadtočajevs (@bruvzg)</lead>
    :triage_project: <gh-triage project=84>Platforms issue triage</gh-triage>