fix: unbreak pagination list style (#444)

* fix: unbreak pagination list

and generally use more classes for styling

Author: fricklerhandwerk

src/website/webview/static/style.css

@@ -373,39 +373,56 @@ body {
   font-family: "IBM Plex Sans Condensed";
 }
 
+nav h1,
+nav ul {
+  padding: 0;
+  margin: 0;
+}
+
 nav.header {
   background-color: black;
   padding: 0.5em;
   display: flex;
   align-items: center;
 }
-nav h1,
-nav ul {
-  padding: 0;
-  margin: 0;
-}
+
 nav.header ul {
   margin-left: auto;
 }
-nav.header ul li {
-  margin-left: 2em;
-  display: inline;
-  flex: center;
-}
+
 nav.header a {
   text-decoration: none;
 }
+
 nav.header a:visited {
   color: white;
   margin: 0;
 }
+
 nav.header span {
   color: white;
 }
+
+.centered-inline-list ul {
+  display: flex;
+  justify-content: center;
+  gap: 2em;
+}
+
+.centered-inline-list > ul li {
+  display: inline;
+  list-style-type: none;
+}
+
+.page-width {
+  max-width: 55rem;
+  margin: auto;
+  padding: 1rem 0;
+}
+
 nav#pagination {
   background-color: unset;
   color: black;
-  justify-content: center;
 }
 
 #testing-disclaimer {
@@ -422,16 +439,14 @@ p {
 }
 
 article {
-  padding: 1em;
+  padding: 0 1em;
 }
 
 footer {
   text-align: center;
 }
 
 nav.issue-pipeline {
-  max-width: 55em;
-  margin: auto;
   padding: 0 0.5em;
 }
 
@@ -440,20 +455,7 @@ nav.issue-pipeline ul {
   margin: 0;
 }
 
-nav.issue-pipeline ul {
-  margin-left: auto;
-  display: flex;
-  justify-content: center;
-  gap: 1em;
-}
-
-nav.issue-pipeline ul li {
-  list-style-type: none;
-}
-
 #suggestion-list {
-  max-width: 55rem;
-  margin: auto;
   display: flex;
   row-gap: 0.5rem;
   padding: 0.5em;

src/website/webview/templates/components/pagination.html

@@ -1,4 +1,4 @@
-<nav id="pagination">
+<nav id="pagination" class="page-width centered-inline-list">
   <ul>
     {% for page_number in adjusted_elided_page_range %}
       <li class="index">

src/website/webview/templates/suggestion_list.html

@@ -3,8 +3,8 @@
 
 {% block content %}
 
-<header>
-  <nav class="issue-pipeline">
+<header class="page-width">
+  <nav class="issue-pipeline centered-inline-list">
     <ul>
       <li><a href="/dismissed">Dismissed suggestions</a></li>
       <li><a href="/suggestions">Untriaged suggestions</a></li>
@@ -43,7 +43,7 @@ <h1>Drafts</h1>
 
 {% endif %}
 
-<div id="suggestion-list">
+<div id="suggestion-list" class="page-width">
   {% for object in object_list %}
     {% suggestion object.proposal object.payload object.activity_log %}
   {% endfor %}