Line break long routes to prevent scrolling

Prevents horizontal scrolling on the rails/info/routes page when there
are long route names by introducing styled line breaks so that the table
will fit within the rendered width of the browser.

This is particularly relevant when there are a lot of nested namespaces
in a rails project and makes the page more readable, especially when
filtering with a search query.

The table headings have also been left-aligned so that they line up more
intuitively with the content and now that the table is no longer
horizontally scrolling, less space has been explicitly allocated for the
HTTP Verb column.
This commit is contained in:
Jason Kotchoff 2023-02-24 11:39:22 +11:00
parent 7b5e2f3d2c
commit b11131868f

@ -2,18 +2,26 @@
#route_table {
margin: 0;
border-collapse: collapse;
word-wrap:break-word;
table-layout: fixed;
width:100%;
}
#route_table thead tr {
border-bottom: 2px solid #ddd;
}
#route_table th {
padding-left: 30px;
text-align: left;
}
#route_table thead tr.bottom {
border-bottom: none;
}
#route_table thead tr.bottom th {
padding: 10px 0;
padding: 10px 30px;
line-height: 15px;
}
@ -21,6 +29,10 @@
-webkit-appearance: textfield;
}
#route_table thead th.http-verb {
width: 10%;
}
#route_table tbody tr {
border-bottom: 1px solid #ddd;
}
@ -66,7 +78,7 @@
<thead>
<tr>
<th>Helper</th>
<th>HTTP Verb</th>
<th class="http-verb">HTTP Verb</th>
<th>Path</th>
<th>Controller#Action</th>
</tr>