Improve styling on the routes panel.

Author: markstory

templates/element/routes_panel.php

@@ -52,8 +52,8 @@
         <thead>
         <tr>
             <th><?= __d('debug_kit', 'Route name') ?></th>
-            <th><?= __d('debug_kit', 'URI template') ?></th>
-            <th><?= __d('debug_kit', 'Defaults') ?></th>
+            <th class="c-debug_table c-left-align"><?= __d('debug_kit', 'URI template') ?></th>
+            <th class="c-debug-table c-left-align"><?= __d('debug_kit', 'Defaults') ?></th>
         </tr>
         </thead>
         <tbody>
@@ -86,8 +86,8 @@
             ?>
             <tr class="<?= $class ?>">
                 <td><?= h(Hash::get($route->options, '_name', $route->getName())) ?></td>
-                <td><?= h($route->template) ?></td>
-                <td><pre><?= json_encode($route->defaults, JSON_PRETTY_PRINT) ?></pre></td>
+                <td class="c-debug-table c-left-align"><?= h($route->template) ?></td>
+                <td class="c-debug-table c-left-align"><pre><?= json_encode($route->defaults, JSON_PRETTY_PRINT) ?></pre></td>
             </tr>
         <?php endforeach; ?>
         </tbody>

webroot/css/style.css

@@ -283,6 +283,10 @@ strong {
 .c-debug-table .highlighted td {
     background: var(--highlighted);
 }
+.c-debug-table th.c-left-align,
+.c-debug-table td.c-left-align {
+  text-align: left;
+}
 
 .c-flash {
     position: relative;